FPSMS-frontend/src/components/RoughScheduleDetail/RoughScheudleDetailView.tsx

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslation } from "react-i18next";
import {
  CreateItemInputs,
  saveItem,
} from "@/app/api/settings/item/actions";
import {
  FormProvider,
  SubmitErrorHandler,
  SubmitHandler,
  useForm,
} from "react-hook-form";
import { deleteDialog } from "../Swal/CustomAlerts";
import {Box, Button, Grid, Link, Stack, Tab, Tabs, TabsProps, Typography} from "@mui/material";
import {Add, Check, Close, EditNote} from "@mui/icons-material";
import {ItemQc, ItemsResult} from "@/app/api/settings/item";
import { useGridApiRef } from "@mui/x-data-grid";
import ProductDetails from "@/components/CreateItem/ProductDetails";
import DetailInfoCard from "@/components/RoughScheduleDetail/DetailInfoCard";
import ViewByFGDetails from "@/components/RoughScheduleDetail/ViewByFGDetails";
import ViewByBomDetails from "@/components/RoughScheduleDetail/ViewByBomDetails";

type Props = {
  isEditMode: boolean;
  // type: TypeEnum;
  defaultValues: Partial<CreateItemInputs> | undefined;
  qcChecks: ItemQc[]
};

const RoughScheduleDetailView: React.FC<Props> = ({
  isEditMode,
  // type,
  defaultValues,
  qcChecks
}) => {
  // console.log(type)
  const apiRef = useGridApiRef();
  const params = useSearchParams()
  console.log(params.get("id"))
  const [serverError, setServerError] = useState("");
  const [tabIndex, setTabIndex] = useState(0);
  const { t } = useTranslation();
  const router = useRouter();
  const [isEdit, setIsEdit] = useState(false);
  //const title = "Rough Schedule Detail"
  const [mode, redirPath] = useMemo(() => {
    // var typeId = TypeEnum.CONSUMABLE_ID
    var title = "";
    var mode = "";
    var redirPath = "";
    // if (type === TypeEnum.MATERIAL) {
    //   typeId = TypeEnum.MATERIAL_ID
    //   title = "Material";
    //   redirPath = "/settings/material";
    // }
    // if (type === TypeEnum.PRODUCT) {
      // typeId = TypeEnum.PRODUCT_ID
      title = "Product";
      redirPath = "scheduling/rough/edit";
    // }
    // if (type === TypeEnum.BYPRODUCT) {
    //   typeId = TypeEnum.BYPRODUCT_ID
    //   title = "By-Product";
    //   redirPath = "/settings/byProduct";
    // }
    if (isEditMode) {
      mode = "Edit";
    } else {
      mode = "Create";
    }
    return [mode, redirPath];
  }, [isEditMode]);
  // console.log(typeId)
  const formProps = useForm<CreateItemInputs>({
    defaultValues: defaultValues ? defaultValues : {
    },
  });
  const errors = formProps.formState.errors;

  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
    (_e, newValue) => {
      setTabIndex(newValue);
    },
    [],
  );

  const handleCancel = () => {
    router.replace(`/scheduling/rough`);
  };

  const onSubmit = useCallback<SubmitHandler<CreateItemInputs & {}>>(
    async (data, event) => {
      let hasErrors = false;
      console.log(errors)
      // console.log(apiRef.current.getCellValue(2, "lowerLimit"))
      // apiRef.current.
      try {
        if (hasErrors) {
          setServerError(t("An error has occurred. Please try again later."));
          return false;
        }
      } catch (e) {
        // backend error
        setServerError(t("An error has occurred. Please try again later."));
        console.log(e);
      }
    },
    [apiRef, router, t]
  );

  // multiple tabs
  const onSubmitError = useCallback<SubmitErrorHandler<CreateItemInputs>>(
    (errors) => {},
    []
  );

  const onClickEdit = () =>{
    setIsEdit(!isEdit)
  }

  return (
    <>
      <FormProvider {...formProps}>
        <Stack
          spacing={2}
          component="form"
          onSubmit={formProps.handleSubmit(onSubmit, onSubmitError)}
        >
        {/*<Grid>*/}
        {/*  <Typography mb={2} variant="h4">*/}
        {/*    {t(`${mode} ${title}`)}*/}
        {/*  </Typography>*/}
        {/*</Grid>*/}
        <DetailInfoCard
            recordDetails={{
              id: 1,
              scheduledPeriod: "2025-05-11 to 2025-05-17",
              scheduledAt: "2025-05-07",
              productCount: 13,
              productionCount: 21000
            }}
            isEditing={isEdit}
        />
        <Stack
            direction="row"
            justifyContent="space-between"
            flexWrap="wrap"
            rowGap={2}
        >
          <Button
              variant="contained"
              onClick={onClickEdit}
              // startIcon={<Add />}
              //LinkComponent={Link}
              //href="qcCategory/create"
          >
            {isEdit ? t("Save") : t("Edit")}
          </Button>
        </Stack>

        <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
        <Tab label={t("View By Schedule")} iconPosition="end"/>
        <Tab label={t("View By Material")} iconPosition="end" />
        </Tabs>
          {serverError && (
            <Typography variant="body2" color="error" alignSelf="flex-end">
              {serverError}
            </Typography>
          )}
          {tabIndex === 0 && <ViewByFGDetails isEdit={isEdit} apiRef={apiRef}/>}
          {tabIndex === 1 && <ViewByBomDetails isEdit={isEdit} apiRef={apiRef} isHideButton={true} />}
          <Stack direction="row" justifyContent="flex-end" gap={1}>
            <Button
              name="submit"
              variant="contained"
              startIcon={<Check />}
              type="submit"
              //   disabled={submitDisabled}
            >
              {isEditMode ? t("Save") : t("Confirm")}
            </Button>
            <Button
              variant="outlined"
              startIcon={<Close />}
              onClick={handleCancel}
            >
              {t("Cancel")}
            </Button>
          </Stack>
        </Stack>
      </FormProvider>
    </>
  );
};
export default RoughScheduleDetailView;