/***************************************************************************
 * 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 {
  Button,
  Flex,
  Grid,
  SwitchField,
  TextField,
} from "@aws-amplify/ui-react";
import { getOverrideProps } from "@aws-amplify/ui-react/internal";
import { RecipeCard } from "../models";
import { fetchByPath, validateField } from "./utils";
import { DataStore } from "aws-amplify";
export default function RecipeCardUpdateForm(props) {
  const {
    id: idProp,
    recipeCard: recipeCardModelProp,
    onSuccess,
    onError,
    onSubmit,
    onValidate,
    onChange,
    overrides,
    ...rest
  } = props;
  const initialValues = {
    createdAt: "",
    updatedAt: "",
    cloneFrom: "",
    userId: "",
    isDeleted: false,
    title: "",
    uploadUrl: "",
    gifUrl: "",
    cloudFrontUrl: "",
    duration: "",
    cardType: "",
    cardThumbnail: "",
  };
  const [createdAt, setCreatedAt] = React.useState(initialValues.createdAt);
  const [updatedAt, setUpdatedAt] = React.useState(initialValues.updatedAt);
  const [cloneFrom, setCloneFrom] = React.useState(initialValues.cloneFrom);
  const [userId, setUserId] = React.useState(initialValues.userId);
  const [isDeleted, setIsDeleted] = React.useState(initialValues.isDeleted);
  const [title, setTitle] = React.useState(initialValues.title);
  const [uploadUrl, setUploadUrl] = React.useState(initialValues.uploadUrl);
  const [gifUrl, setGifUrl] = React.useState(initialValues.gifUrl);
  const [cloudFrontUrl, setCloudFrontUrl] = React.useState(
    initialValues.cloudFrontUrl
  );
  const [duration, setDuration] = React.useState(initialValues.duration);
  const [cardType, setCardType] = React.useState(initialValues.cardType);
  const [cardThumbnail, setCardThumbnail] = React.useState(
    initialValues.cardThumbnail
  );
  const [errors, setErrors] = React.useState({});
  const resetStateValues = () => {
    const cleanValues = recipeCardRecord
      ? { ...initialValues, ...recipeCardRecord }
      : initialValues;
    setCreatedAt(cleanValues.createdAt);
    setUpdatedAt(cleanValues.updatedAt);
    setCloneFrom(cleanValues.cloneFrom);
    setUserId(cleanValues.userId);
    setIsDeleted(cleanValues.isDeleted);
    setTitle(cleanValues.title);
    setUploadUrl(cleanValues.uploadUrl);
    setGifUrl(cleanValues.gifUrl);
    setCloudFrontUrl(cleanValues.cloudFrontUrl);
    setDuration(cleanValues.duration);
    setCardType(cleanValues.cardType);
    setCardThumbnail(cleanValues.cardThumbnail);
    setErrors({});
  };
  const [recipeCardRecord, setRecipeCardRecord] =
    React.useState(recipeCardModelProp);
  React.useEffect(() => {
    const queryData = async () => {
      const record = idProp
        ? await DataStore.query(RecipeCard, idProp)
        : recipeCardModelProp;
      setRecipeCardRecord(record);
    };
    queryData();
  }, [idProp, recipeCardModelProp]);
  React.useEffect(resetStateValues, [recipeCardRecord]);
  const validations = {
    createdAt: [],
    updatedAt: [],
    cloneFrom: [],
    userId: [],
    isDeleted: [],
    title: [],
    uploadUrl: [],
    gifUrl: [],
    cloudFrontUrl: [],
    duration: [],
    cardType: [],
    cardThumbnail: [],
  };
  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,
          cloneFrom,
          userId,
          isDeleted,
          title,
          uploadUrl,
          gifUrl,
          cloudFrontUrl,
          duration,
          cardType,
          cardThumbnail,
        };
        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(
            RecipeCard.copyOf(recipeCardRecord, (updated) => {
              Object.assign(updated, modelFields);
            })
          );
          if (onSuccess) {
            onSuccess(modelFields);
          }
        } catch (err) {
          if (onError) {
            onError(modelFields, err.message);
          }
        }
      }}
      {...getOverrideProps(overrides, "RecipeCardUpdateForm")}
      {...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,
              cloneFrom,
              userId,
              isDeleted,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail,
            };
            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,
              cloneFrom,
              userId,
              isDeleted,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail,
            };
            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="Clone from"
        isRequired={false}
        isReadOnly={false}
        value={cloneFrom}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom: value,
              userId,
              isDeleted,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail,
            };
            const result = onChange(modelFields);
            value = result?.cloneFrom ?? value;
          }
          if (errors.cloneFrom?.hasError) {
            runValidationTasks("cloneFrom", value);
          }
          setCloneFrom(value);
        }}
        onBlur={() => runValidationTasks("cloneFrom", cloneFrom)}
        errorMessage={errors.cloneFrom?.errorMessage}
        hasError={errors.cloneFrom?.hasError}
        {...getOverrideProps(overrides, "cloneFrom")}
      ></TextField>
      <TextField
        label="User id"
        isRequired={false}
        isReadOnly={false}
        value={userId}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId: value,
              isDeleted,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail,
            };
            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 deleted"
        defaultChecked={false}
        isDisabled={false}
        isChecked={isDeleted}
        onChange={(e) => {
          let value = e.target.checked;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId,
              isDeleted: value,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail,
            };
            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="Title"
        isRequired={false}
        isReadOnly={false}
        value={title}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId,
              isDeleted,
              title: value,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail,
            };
            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="Upload url"
        isRequired={false}
        isReadOnly={false}
        value={uploadUrl}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId,
              isDeleted,
              title,
              uploadUrl: value,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail,
            };
            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="Gif url"
        isRequired={false}
        isReadOnly={false}
        value={gifUrl}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId,
              isDeleted,
              title,
              uploadUrl,
              gifUrl: value,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail,
            };
            const result = onChange(modelFields);
            value = result?.gifUrl ?? value;
          }
          if (errors.gifUrl?.hasError) {
            runValidationTasks("gifUrl", value);
          }
          setGifUrl(value);
        }}
        onBlur={() => runValidationTasks("gifUrl", gifUrl)}
        errorMessage={errors.gifUrl?.errorMessage}
        hasError={errors.gifUrl?.hasError}
        {...getOverrideProps(overrides, "gifUrl")}
      ></TextField>
      <TextField
        label="Cloud front url"
        isRequired={false}
        isReadOnly={false}
        value={cloudFrontUrl}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId,
              isDeleted,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl: value,
              duration,
              cardType,
              cardThumbnail,
            };
            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="Duration"
        isRequired={false}
        isReadOnly={false}
        value={duration}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId,
              isDeleted,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration: value,
              cardType,
              cardThumbnail,
            };
            const result = onChange(modelFields);
            value = result?.duration ?? value;
          }
          if (errors.duration?.hasError) {
            runValidationTasks("duration", value);
          }
          setDuration(value);
        }}
        onBlur={() => runValidationTasks("duration", duration)}
        errorMessage={errors.duration?.errorMessage}
        hasError={errors.duration?.hasError}
        {...getOverrideProps(overrides, "duration")}
      ></TextField>
      <TextField
        label="Card type"
        isRequired={false}
        isReadOnly={false}
        value={cardType}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId,
              isDeleted,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType: value,
              cardThumbnail,
            };
            const result = onChange(modelFields);
            value = result?.cardType ?? value;
          }
          if (errors.cardType?.hasError) {
            runValidationTasks("cardType", value);
          }
          setCardType(value);
        }}
        onBlur={() => runValidationTasks("cardType", cardType)}
        errorMessage={errors.cardType?.errorMessage}
        hasError={errors.cardType?.hasError}
        {...getOverrideProps(overrides, "cardType")}
      ></TextField>
      <TextField
        label="Card thumbnail"
        isRequired={false}
        isReadOnly={false}
        value={cardThumbnail}
        onChange={(e) => {
          let { value } = e.target;
          if (onChange) {
            const modelFields = {
              createdAt,
              updatedAt,
              cloneFrom,
              userId,
              isDeleted,
              title,
              uploadUrl,
              gifUrl,
              cloudFrontUrl,
              duration,
              cardType,
              cardThumbnail: value,
            };
            const result = onChange(modelFields);
            value = result?.cardThumbnail ?? value;
          }
          if (errors.cardThumbnail?.hasError) {
            runValidationTasks("cardThumbnail", value);
          }
          setCardThumbnail(value);
        }}
        onBlur={() => runValidationTasks("cardThumbnail", cardThumbnail)}
        errorMessage={errors.cardThumbnail?.errorMessage}
        hasError={errors.cardThumbnail?.hasError}
        {...getOverrideProps(overrides, "cardThumbnail")}
      ></TextField>
      <Flex
        justifyContent="space-between"
        {...getOverrideProps(overrides, "CTAFlex")}
      >
        <Button
          children="Reset"
          type="reset"
          onClick={(event) => {
            event.preventDefault();
            resetStateValues();
          }}
          isDisabled={!(idProp || recipeCardModelProp)}
          {...getOverrideProps(overrides, "ResetButton")}
        ></Button>
        <Flex
          gap="15px"
          {...getOverrideProps(overrides, "RightAlignCTASubFlex")}
        >
          <Button
            children="Submit"
            type="submit"
            variation="primary"
            isDisabled={
              !(idProp || recipeCardModelProp) ||
              Object.values(errors).some((e) => e?.hasError)
            }
            {...getOverrideProps(overrides, "SubmitButton")}
          ></Button>
        </Flex>
      </Flex>
    </Grid>
  );
}