/***************************************************************************
 * The contents of this file were generated with Amplify Studio.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 **************************************************************************/

/* eslint-disable */
import * as React from "react";
import {
  Badge,
  Button,
  Divider,
  Flex,
  Grid,
  Icon,
  ScrollView,
  SwitchField,
  Text,
  TextField,
  useTheme,
} from "@aws-amplify/ui-react";
import { getOverrideProps } from "@aws-amplify/ui-react/internal";
import { Library } from "../models";
import { fetchByPath, validateField } from "./utils";
import { DataStore } from "aws-amplify";
function ArrayField({
  items = [],
  onChange,
  label,
  inputFieldRef,
  children,
  hasError,
  setFieldValue,
  currentFieldValue,
  defaultFieldValue,
  lengthLimit,
  getBadgeText,
  errorMessage,
}) {
  const labelElement = <Text>{label}</Text>;
  const {
    tokens: {
      components: {
        fieldmessages: { error: errorStyles },
      },
    },
  } = useTheme();
  const [selectedBadgeIndex, setSelectedBadgeIndex] = React.useState();
  const [isEditing, setIsEditing] = React.useState();
  React.useEffect(() => {
    if (isEditing) {
      inputFieldRef?.current?.focus();
    }
  }, [isEditing]);
  const removeItem = async (removeIndex) => {
    const newItems = items.filter((value, index) => index !== removeIndex);
    await onChange(newItems);
    setSelectedBadgeIndex(undefined);
  };
  const addItem = async () => {
    if (
      currentFieldValue !== undefined &&
      currentFieldValue !== null &&
      currentFieldValue !== "" &&
      !hasError
    ) {
      const newItems = [...items];
      if (selectedBadgeIndex !== undefined) {
        newItems[selectedBadgeIndex] = currentFieldValue;
        setSelectedBadgeIndex(undefined);
      } else {
        newItems.push(currentFieldValue);
      }
      await onChange(newItems);
      setIsEditing(false);
    }
  };
  const arraySection = (
    <React.Fragment>
      {!!items?.length && (
        <ScrollView height="inherit" width="inherit" maxHeight={"7rem"}>
          {items.map((value, index) => {
            return (
              <Badge
                key={index}
                style={{
                  cursor: "pointer",
                  alignItems: "center",
                  marginRight: 3,
                  marginTop: 3,
                  backgroundColor:
                    index === selectedBadgeIndex ? "#B8CEF9" : "",
                }}
                onClick={() => {
                  setSelectedBadgeIndex(index);
                  setFieldValue(items[index]);
                  setIsEditing(true);
                }}
              >
                {getBadgeText ? getBadgeText(value) : value.toString()}
                <Icon
                  style={{
                    cursor: "pointer",
                    paddingLeft: 3,
                    width: 20,
                    height: 20,
                  }}
                  viewBox={{ width: 20, height: 20 }}
                  paths={[
                    {
                      d: "M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z",
                      stroke: "black",
                    },
                  ]}
                  ariaLabel="button"
                  onClick={(event) => {
                    event.stopPropagation();
                    removeItem(index);
                  }}
                />
              </Badge>
            );
          })}
        </ScrollView>
      )}
      <Divider orientation="horizontal" marginTop={5} />
    </React.Fragment>
  );
  if (lengthLimit !== undefined && items.length >= lengthLimit && !isEditing) {
    return (
      <React.Fragment>
        {labelElement}
        {arraySection}
      </React.Fragment>
    );
  }
  return (
    <React.Fragment>
      {labelElement}
      {isEditing && children}
      {!isEditing ? (
        <>
          <Button
            onClick={() => {
              setIsEditing(true);
            }}
          >
            Add item
          </Button>
          {errorMessage && hasError && (
            <Text color={errorStyles.color} fontSize={errorStyles.fontSize}>
              {errorMessage}
            </Text>
          )}
        </>
      ) : (
        <Flex justifyContent="flex-end">
          {(currentFieldValue || isEditing) && (
            <Button
              children="Cancel"
              type="button"
              size="small"
              onClick={() => {
                setFieldValue(defaultFieldValue);
                setIsEditing(false);
                setSelectedBadgeIndex(undefined);
              }}
            ></Button>
          )}
          <Button
            size="small"
            variation="link"
            isDisabled={hasError}
            onClick={addItem}
          >
            {selectedBadgeIndex !== undefined ? "Save" : "Add"}
          </Button>
        </Flex>
      )}
      {arraySection}
    </React.Fragment>
  );
}
export default function LibraryCreateForm(props) {
  const {
    clearOnSuccess = true,
    onSuccess,
    onError,
    onSubmit,
    onValidate,
    onChange,
    overrides,
    ...rest
  } = props;
  const initialValues = {
    createdAt: "",
    updatedAt: "",
    userId: "",
    isIntro: false,
    isOutro: false,
    isDeleted: false,
    libraryType: "",
    title: "",
    picture: "",
    shortDescription: "",
    uploadUrl: "",
    uploadThumnail: "",
    cloudFrontUrl: "",
    s3URI: "",
    s3Bucket: "",
    s3Key: "",
    playbackUrl: "",
    directPlayBackUrl: "",
    thumbnails: [],
    libraryStatus: "",
  };
  const [createdAt, setCreatedAt] = React.useState(initialValues.createdAt);
  const [updatedAt, setUpdatedAt] = React.useState(initialValues.updatedAt);
  const [userId, setUserId] = React.useState(initialValues.userId);
  const [isIntro, setIsIntro] = React.useState(initialValues.isIntro);
  const [isOutro, setIsOutro] = React.useState(initialValues.isOutro);
  const [isDeleted, setIsDeleted] = React.useState(initialValues.isDeleted);
  const [libraryType, setLibraryType] = React.useState(
    initialValues.libraryType
  );
  const [title, setTitle] = React.useState(initialValues.title);
  const [picture, setPicture] = React.useState(initialValues.picture);
  const [shortDescription, setShortDescription] = React.useState(
    initialValues.shortDescription
  );
  const [uploadUrl, setUploadUrl] = React.useState(initialValues.uploadUrl);
  const [uploadThumnail, setUploadThumnail] = React.useState(
    initialValues.uploadThumnail
  );
  const [cloudFrontUrl, setCloudFrontUrl] = React.useState(
    initialValues.cloudFrontUrl
  );
  const [s3URI, setS3URI] = React.useState(initialValues.s3URI);
  const [s3Bucket, setS3Bucket] = React.useState(initialValues.s3Bucket);
  const [s3Key, setS3Key] = React.useState(initialValues.s3Key);
  const [playbackUrl, setPlaybackUrl] = React.useState(
    initialValues.playbackUrl
  );
  const [directPlayBackUrl, setDirectPlayBackUrl] = React.useState(
    initialValues.directPlayBackUrl
  );
  const [thumbnails, setThumbnails] = React.useState(initialValues.thumbnails);
  const [libraryStatus, setLibraryStatus] = React.useState(
    initialValues.libraryStatus
  );
  const [errors, setErrors] = React.useState({});
  const resetStateValues = () => {
    setCreatedAt(initialValues.createdAt);
    setUpdatedAt(initialValues.updatedAt);
    setUserId(initialValues.userId);
    setIsIntro(initialValues.isIntro);
    setIsOutro(initialValues.isOutro);
    setIsDeleted(initialValues.isDeleted);
    setLibraryType(initialValues.libraryType);
    setTitle(initialValues.title);
    setPicture(initialValues.picture);
    setShortDescription(initialValues.shortDescription);
    setUploadUrl(initialValues.uploadUrl);
    setUploadThumnail(initialValues.uploadThumnail);
    setCloudFrontUrl(initialValues.cloudFrontUrl);
    setS3URI(initialValues.s3URI);
    setS3Bucket(initialValues.s3Bucket);
    setS3Key(initialValues.s3Key);
    setPlaybackUrl(initialValues.playbackUrl);
    setDirectPlayBackUrl(initialValues.directPlayBackUrl);
    setThumbnails(initialValues.thumbnails);
    setCurrentThumbnailsValue("");
    setLibraryStatus(initialValues.libraryStatus);
    setErrors({});
  };
  const [currentThumbnailsValue, setCurrentThumbnailsValue] =
    React.useState("");
  const thumbnailsRef = React.createRef();
  const validations = {
    createdAt: [],
    updatedAt: [],
    userId: [],
    isIntro: [],
    isOutro: [],
    isDeleted: [],
    libraryType: [{ type: "Required" }],
    title: [],
    picture: [],
    shortDescription: [],
    uploadUrl: [],
    uploadThumnail: [],
    cloudFrontUrl: [],
    s3URI: [],
    s3Bucket: [],
    s3Key: [],
    playbackUrl: [],
    directPlayBackUrl: [],
    thumbnails: [{ type: "Required" }],
    libraryStatus: [],
  };
  const runValidationTasks = async (
    fieldName,
    currentValue,
    getDisplayValue
  ) => {
    const value =
      currentValue && getDisplayValue
        ? getDisplayValue(currentValue)
        : currentValue;
    let validationResponse = validateField(value, validations[fieldName]);
    const customValidator = fetchByPath(onValidate, fieldName);
    if (customValidator) {
      validationResponse = await customValidator(value, validationResponse);
    }
    setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
    return validationResponse;
  };
  const convertToLocal = (date) => {
    const df = new Intl.DateTimeFormat("default", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      calendar: "iso8601",
      numberingSystem: "latn",
      hourCycle: "h23",
    });
    const parts = df.formatToParts(date).reduce((acc, part) => {
      acc[part.type] = part.value;
      return acc;
    }, {});
    return `${parts.year}-${parts.month}-${parts.day}T${parts.hour}:${parts.minute}`;
  };
  return (
    <Grid
      as="form"
      rowGap="15px"
      columnGap="15px"
      padding="20px"
      onSubmit={async (event) => {
        event.preventDefault();
        let modelFields = {
          createdAt,
          updatedAt,
          userId,
          isIntro,
          isOutro,
          isDeleted,
          libraryType,
          title,
          picture,
          shortDescription,
          uploadUrl,
          uploadThumnail,
          cloudFrontUrl,
          s3URI,
          s3Bucket,
          s3Key,
          playbackUrl,
          directPlayBackUrl,
          thumbnails,
          libraryStatus,
        };
        const validationResponses = await Promise.all(
          Object.keys(validations).reduce((promises, fieldName) => {
            if (Array.isArray(modelFields[fieldName])) {
              promises.push(
                ...modelFields[fieldName].map((item) =>
                  runValidationTasks(fieldName, item)
                )
              );
              return promises;
            }
            promises.push(
              runValidationTasks(fieldName, modelFields[fieldName])
            );
            return promises;
          }, [])
        );
        if (validationResponses.some((r) => r.hasError)) {
          return;
        }
        if (onSubmit) {
          modelFields = onSubmit(modelFields);
        }
        try {
          Object.entries(modelFields).forEach(([key, value]) => {
            if (typeof value === "string" && value.trim() === "") {
              modelFields[key] = undefined;
            }
          });
          await DataStore.save(new Library(modelFields));
          if (onSuccess) {
            onSuccess(modelFields);
          }
          if (clearOnSuccess) {
            resetStateValues();
          }
        } catch (err) {
          if (onError) {
            onError(modelFields, err.message);
          }
        }
      }}
      {...getOverrideProps(overrides, "LibraryCreateForm")}
      {...rest}
    >
      <TextField
        label="Created at"
        isRequired={false}
        isReadOnly={false}
        type="datetime-local"
        value={createdAt && convertToLocal(new Date(createdAt))}
        onChange={(e) => {
          let value =
            e.target.value === "" ? "" : new Date(e.target.value).toISOString();
          if (onChange) {
            const modelFields = {
              createdAt: value,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.createdAt ?? value;
          }
          if (errors.createdAt?.hasError) {
            runValidationTasks("createdAt", value);
          }
          setCreatedAt(value);
        }}
        onBlur={() => runValidationTasks("createdAt", createdAt)}
        errorMessage={errors.createdAt?.errorMessage}
        hasError={errors.createdAt?.hasError}
        {...getOverrideProps(overrides, "createdAt")}
      ></TextField>
      <TextField
        label="Updated at"
        isRequired={false}
        isReadOnly={false}
        type="datetime-local"
        value={updatedAt && convertToLocal(new Date(updatedAt))}
        onChange={(e) => {
          let value =
            e.target.value === "" ? "" : new Date(e.target.value).toISOString();
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt: value,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.updatedAt ?? value;
          }
          if (errors.updatedAt?.hasError) {
            runValidationTasks("updatedAt", value);
          }
          setUpdatedAt(value);
        }}
        onBlur={() => runValidationTasks("updatedAt", updatedAt)}
        errorMessage={errors.updatedAt?.errorMessage}
        hasError={errors.updatedAt?.hasError}
        {...getOverrideProps(overrides, "updatedAt")}
      ></TextField>
      <TextField
        label="User id"
        isRequired={false}
        isReadOnly={false}
        value={userId}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId: value,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.userId ?? value;
          }
          if (errors.userId?.hasError) {
            runValidationTasks("userId", value);
          }
          setUserId(value);
        }}
        onBlur={() => runValidationTasks("userId", userId)}
        errorMessage={errors.userId?.errorMessage}
        hasError={errors.userId?.hasError}
        {...getOverrideProps(overrides, "userId")}
      ></TextField>
      <SwitchField
        label="Is intro"
        defaultChecked={false}
        isDisabled={false}
        isChecked={isIntro}
        onChange={(e) => {
          let value = e.target.checked;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro: value,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.isIntro ?? value;
          }
          if (errors.isIntro?.hasError) {
            runValidationTasks("isIntro", value);
          }
          setIsIntro(value);
        }}
        onBlur={() => runValidationTasks("isIntro", isIntro)}
        errorMessage={errors.isIntro?.errorMessage}
        hasError={errors.isIntro?.hasError}
        {...getOverrideProps(overrides, "isIntro")}
      ></SwitchField>
      <SwitchField
        label="Is outro"
        defaultChecked={false}
        isDisabled={false}
        isChecked={isOutro}
        onChange={(e) => {
          let value = e.target.checked;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro: value,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.isOutro ?? value;
          }
          if (errors.isOutro?.hasError) {
            runValidationTasks("isOutro", value);
          }
          setIsOutro(value);
        }}
        onBlur={() => runValidationTasks("isOutro", isOutro)}
        errorMessage={errors.isOutro?.errorMessage}
        hasError={errors.isOutro?.hasError}
        {...getOverrideProps(overrides, "isOutro")}
      ></SwitchField>
      <SwitchField
        label="Is deleted"
        defaultChecked={false}
        isDisabled={false}
        isChecked={isDeleted}
        onChange={(e) => {
          let value = e.target.checked;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted: value,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.isDeleted ?? value;
          }
          if (errors.isDeleted?.hasError) {
            runValidationTasks("isDeleted", value);
          }
          setIsDeleted(value);
        }}
        onBlur={() => runValidationTasks("isDeleted", isDeleted)}
        errorMessage={errors.isDeleted?.errorMessage}
        hasError={errors.isDeleted?.hasError}
        {...getOverrideProps(overrides, "isDeleted")}
      ></SwitchField>
      <TextField
        label="Library type"
        isRequired={true}
        isReadOnly={false}
        value={libraryType}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType: value,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.libraryType ?? value;
          }
          if (errors.libraryType?.hasError) {
            runValidationTasks("libraryType", value);
          }
          setLibraryType(value);
        }}
        onBlur={() => runValidationTasks("libraryType", libraryType)}
        errorMessage={errors.libraryType?.errorMessage}
        hasError={errors.libraryType?.hasError}
        {...getOverrideProps(overrides, "libraryType")}
      ></TextField>
      <TextField
        label="Title"
        isRequired={false}
        isReadOnly={false}
        value={title}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title: value,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.title ?? value;
          }
          if (errors.title?.hasError) {
            runValidationTasks("title", value);
          }
          setTitle(value);
        }}
        onBlur={() => runValidationTasks("title", title)}
        errorMessage={errors.title?.errorMessage}
        hasError={errors.title?.hasError}
        {...getOverrideProps(overrides, "title")}
      ></TextField>
      <TextField
        label="Picture"
        isRequired={false}
        isReadOnly={false}
        value={picture}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture: value,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.picture ?? value;
          }
          if (errors.picture?.hasError) {
            runValidationTasks("picture", value);
          }
          setPicture(value);
        }}
        onBlur={() => runValidationTasks("picture", picture)}
        errorMessage={errors.picture?.errorMessage}
        hasError={errors.picture?.hasError}
        {...getOverrideProps(overrides, "picture")}
      ></TextField>
      <TextField
        label="Short description"
        isRequired={false}
        isReadOnly={false}
        value={shortDescription}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription: value,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.shortDescription ?? value;
          }
          if (errors.shortDescription?.hasError) {
            runValidationTasks("shortDescription", value);
          }
          setShortDescription(value);
        }}
        onBlur={() => runValidationTasks("shortDescription", shortDescription)}
        errorMessage={errors.shortDescription?.errorMessage}
        hasError={errors.shortDescription?.hasError}
        {...getOverrideProps(overrides, "shortDescription")}
      ></TextField>
      <TextField
        label="Upload url"
        isRequired={false}
        isReadOnly={false}
        value={uploadUrl}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl: value,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.uploadUrl ?? value;
          }
          if (errors.uploadUrl?.hasError) {
            runValidationTasks("uploadUrl", value);
          }
          setUploadUrl(value);
        }}
        onBlur={() => runValidationTasks("uploadUrl", uploadUrl)}
        errorMessage={errors.uploadUrl?.errorMessage}
        hasError={errors.uploadUrl?.hasError}
        {...getOverrideProps(overrides, "uploadUrl")}
      ></TextField>
      <TextField
        label="Upload thumnail"
        isRequired={false}
        isReadOnly={false}
        value={uploadThumnail}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail: value,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.uploadThumnail ?? value;
          }
          if (errors.uploadThumnail?.hasError) {
            runValidationTasks("uploadThumnail", value);
          }
          setUploadThumnail(value);
        }}
        onBlur={() => runValidationTasks("uploadThumnail", uploadThumnail)}
        errorMessage={errors.uploadThumnail?.errorMessage}
        hasError={errors.uploadThumnail?.hasError}
        {...getOverrideProps(overrides, "uploadThumnail")}
      ></TextField>
      <TextField
        label="Cloud front url"
        isRequired={false}
        isReadOnly={false}
        value={cloudFrontUrl}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl: value,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.cloudFrontUrl ?? value;
          }
          if (errors.cloudFrontUrl?.hasError) {
            runValidationTasks("cloudFrontUrl", value);
          }
          setCloudFrontUrl(value);
        }}
        onBlur={() => runValidationTasks("cloudFrontUrl", cloudFrontUrl)}
        errorMessage={errors.cloudFrontUrl?.errorMessage}
        hasError={errors.cloudFrontUrl?.hasError}
        {...getOverrideProps(overrides, "cloudFrontUrl")}
      ></TextField>
      <TextField
        label="S3 uri"
        isRequired={false}
        isReadOnly={false}
        value={s3URI}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI: value,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.s3URI ?? value;
          }
          if (errors.s3URI?.hasError) {
            runValidationTasks("s3URI", value);
          }
          setS3URI(value);
        }}
        onBlur={() => runValidationTasks("s3URI", s3URI)}
        errorMessage={errors.s3URI?.errorMessage}
        hasError={errors.s3URI?.hasError}
        {...getOverrideProps(overrides, "s3URI")}
      ></TextField>
      <TextField
        label="S3 bucket"
        isRequired={false}
        isReadOnly={false}
        value={s3Bucket}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket: value,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.s3Bucket ?? value;
          }
          if (errors.s3Bucket?.hasError) {
            runValidationTasks("s3Bucket", value);
          }
          setS3Bucket(value);
        }}
        onBlur={() => runValidationTasks("s3Bucket", s3Bucket)}
        errorMessage={errors.s3Bucket?.errorMessage}
        hasError={errors.s3Bucket?.hasError}
        {...getOverrideProps(overrides, "s3Bucket")}
      ></TextField>
      <TextField
        label="S3 key"
        isRequired={false}
        isReadOnly={false}
        value={s3Key}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key: value,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.s3Key ?? value;
          }
          if (errors.s3Key?.hasError) {
            runValidationTasks("s3Key", value);
          }
          setS3Key(value);
        }}
        onBlur={() => runValidationTasks("s3Key", s3Key)}
        errorMessage={errors.s3Key?.errorMessage}
        hasError={errors.s3Key?.hasError}
        {...getOverrideProps(overrides, "s3Key")}
      ></TextField>
      <TextField
        label="Playback url"
        isRequired={false}
        isReadOnly={false}
        value={playbackUrl}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl: value,
              directPlayBackUrl,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.playbackUrl ?? value;
          }
          if (errors.playbackUrl?.hasError) {
            runValidationTasks("playbackUrl", value);
          }
          setPlaybackUrl(value);
        }}
        onBlur={() => runValidationTasks("playbackUrl", playbackUrl)}
        errorMessage={errors.playbackUrl?.errorMessage}
        hasError={errors.playbackUrl?.hasError}
        {...getOverrideProps(overrides, "playbackUrl")}
      ></TextField>
      <TextField
        label="Direct play back url"
        isRequired={false}
        isReadOnly={false}
        value={directPlayBackUrl}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl: value,
              thumbnails,
              libraryStatus,
            };
            const result = onChange(modelFields);
            value = result?.directPlayBackUrl ?? value;
          }
          if (errors.directPlayBackUrl?.hasError) {
            runValidationTasks("directPlayBackUrl", value);
          }
          setDirectPlayBackUrl(value);
        }}
        onBlur={() =>
          runValidationTasks("directPlayBackUrl", directPlayBackUrl)
        }
        errorMessage={errors.directPlayBackUrl?.errorMessage}
        hasError={errors.directPlayBackUrl?.hasError}
        {...getOverrideProps(overrides, "directPlayBackUrl")}
      ></TextField>
      <ArrayField
        onChange={async (items) => {
          let values = items;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails: values,
              libraryStatus,
            };
            const result = onChange(modelFields);
            values = result?.thumbnails ?? values;
          }
          setThumbnails(values);
          setCurrentThumbnailsValue("");
        }}
        currentFieldValue={currentThumbnailsValue}
        label={"Thumbnails"}
        items={thumbnails}
        hasError={errors?.thumbnails?.hasError}
        errorMessage={errors?.thumbnails?.errorMessage}
        setFieldValue={setCurrentThumbnailsValue}
        inputFieldRef={thumbnailsRef}
        defaultFieldValue={""}
      >
        <TextField
          label="Thumbnails"
          isRequired={true}
          isReadOnly={false}
          value={currentThumbnailsValue}
          onChange={(e) => {
            let { value } = e.target;
            if (errors.thumbnails?.hasError) {
              runValidationTasks("thumbnails", value);
            }
            setCurrentThumbnailsValue(value);
          }}
          onBlur={() =>
            runValidationTasks("thumbnails", currentThumbnailsValue)
          }
          errorMessage={errors.thumbnails?.errorMessage}
          hasError={errors.thumbnails?.hasError}
          ref={thumbnailsRef}
          labelHidden={true}
          {...getOverrideProps(overrides, "thumbnails")}
        ></TextField>
      </ArrayField>
      <TextField
        label="Library status"
        isRequired={false}
        isReadOnly={false}
        value={libraryStatus}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              userId,
              isIntro,
              isOutro,
              isDeleted,
              libraryType,
              title,
              picture,
              shortDescription,
              uploadUrl,
              uploadThumnail,
              cloudFrontUrl,
              s3URI,
              s3Bucket,
              s3Key,
              playbackUrl,
              directPlayBackUrl,
              thumbnails,
              libraryStatus: value,
            };
            const result = onChange(modelFields);
            value = result?.libraryStatus ?? value;
          }
          if (errors.libraryStatus?.hasError) {
            runValidationTasks("libraryStatus", value);
          }
          setLibraryStatus(value);
        }}
        onBlur={() => runValidationTasks("libraryStatus", libraryStatus)}
        errorMessage={errors.libraryStatus?.errorMessage}
        hasError={errors.libraryStatus?.hasError}
        {...getOverrideProps(overrides, "libraryStatus")}
      ></TextField>
      <Flex
        justifyContent="space-between"
        {...getOverrideProps(overrides, "CTAFlex")}
      >
        <Button
          children="Clear"
          type="reset"
          onClick={(event) => {
            event.preventDefault();
            resetStateValues();
          }}
          {...getOverrideProps(overrides, "ClearButton")}
        ></Button>
        <Flex
          gap="15px"
          {...getOverrideProps(overrides, "RightAlignCTASubFlex")}
        >
          <Button
            children="Submit"
            type="submit"
            variation="primary"
            isDisabled={Object.values(errors).some((e) => e?.hasError)}
            {...getOverrideProps(overrides, "SubmitButton")}
          ></Button>
        </Flex>
      </Flex>
    </Grid>
  );
}