import { QcItemWithChecks } from "@/app/api/qc";
import useUploadContext from "../UploadProvider/useUploadContext";
import {
  PickOrderQcInput,
  updateStockOutLine,
  UpdateStockOutLine,
} from "@/app/api/pickOrder/actions";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import QcContent from "./QcContent";
import { Box, Button, Modal, ModalProps, Stack } from "@mui/material";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { Check } from "@mui/icons-material";
import { StockOutLine } from "@/app/api/pickOrder";
import dayjs from "dayjs";
import { INPUT_DATE_FORMAT, OUTPUT_TIME_FORMAT } from "@/app/utils/formatUtil";

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  //   overflow: "scroll",
  bgcolor: "background.paper",
  pt: 5,
  px: 5,
  pb: 10,
  display: "block",
  width: { xs: "60%", sm: "60%", md: "60%" },
};

interface Props extends Omit<ModalProps, "children"> {
  qc: QcItemWithChecks[];
  qcDefaultValues: StockOutLine & PickOrderQcInput;
  disabled: boolean;
}

const QcForm: React.FC<Props> = ({
  qc,
  qcDefaultValues,
  disabled,
  open,
  onClose,
}) => {
  const { setIsUploading } = useUploadContext();
  const { t } = useTranslation("pickOrder");
  const formProps = useForm<PickOrderQcInput>({
    defaultValues: {
      qty: qcDefaultValues.qty,
      status: qcDefaultValues.status,
    },
  });

  const errors = formProps.formState.errors;
  const closeHandler = useCallback<NonNullable<ModalProps["onClose"]>>(
    (...args) => {
      onClose?.(...args);
      //   reset();
    },
    [onClose],
  );

  const onSubmit = useCallback<SubmitHandler<PickOrderQcInput>>(
    async (data, event) => {
      console.log(data);
      console.log(qcDefaultValues);
      // checking later
      // post
      const postData: UpdateStockOutLine = {
        id: qcDefaultValues.id,
        itemId: qcDefaultValues.itemId,
        pickOrderLineId: qcDefaultValues.pickOrderLineId,
        inventoryLotLineId: qcDefaultValues.inventoryLotLineId,
        qty: data.qty,
        status: data.status,
        // pickTime: dayjs().format(`${INPUT_DATE_FORMAT} ${OUTPUT_TIME_FORMAT}`),
      };
      console.log(postData);
      // return
      const res = await updateStockOutLine(postData);
      if (res) {
        console.log(res);
        closeHandler({}, "backdropClick");
      } else {
        console.log(res);
        console.log("bug la");
      }
    },
    [closeHandler, qcDefaultValues],
  );
  return (
    <>
      <FormProvider {...formProps}>
        <Modal open={open} onClose={closeHandler}>
          <Box
            sx={style}
            component="form"
            onSubmit={formProps.handleSubmit(onSubmit)}
          >
            <QcContent
              qc={qc}
              qcDefaultValues={qcDefaultValues}
              disabled={disabled}
            />
            <Stack direction="row" justifyContent="flex-end" gap={1}>
              {!disabled ? (
                <Button
                  name="submit"
                  variant="contained"
                  startIcon={<Check />}
                  type="submit"
                >
                  {t("submit")}
                </Button>
              ) : undefined}
            </Stack>
          </Box>
        </Modal>
      </FormProvider>
    </>
  );
};
export default QcForm;