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 {
  FormProvider,
  SubmitErrorHandler,
  SubmitHandler,
  useForm,
} from "react-hook-form";
import {
  Box,
  Button,
  Grid,
  Link,
  Stack,
  Tab,
  Tabs,
  TabsProps,
  Typography,
} from "@mui/material";
import { Add, Check, Close, EditNote } from "@mui/icons-material";
import DetailInfoCard from "@/components/RoughScheduleDetail/DetailInfoCard";
import ViewByFGDetails from "@/components/RoughScheduleDetail/ViewByFGDetails";
import ViewByBomDetails from "@/components/RoughScheduleDetail/ViewByBomDetails";
import { RoughProdScheduleResult, ScheduleType } from "@/app/api/scheduling";
import { arrayToDayjs, dayjsToDateString } from "@/app/utils/formatUtil";
import { useGridApiRef } from "@mui/x-data-grid";

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

const RoughScheduleDetailView: React.FC<Props> = ({
  isEditMode,
  type,
  defaultValues,
}) => {
  // console.log(type)
  const apiRef = useGridApiRef();
  const params = useSearchParams();
  const [serverError, setServerError] = useState("");
  const [tabIndex, setTabIndex] = useState(0);
  const { t } = useTranslation("schedule");
  const router = useRouter();
  const [isEdit, setIsEdit] = useState(false);
  //const title = "Demand Forecast Detail"

  // console.log(typeId)
  const formProps = useForm<RoughProdScheduleResult>({
    defaultValues: defaultValues ? defaultValues : {},
  });
  const errors = formProps.formState.errors;

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

  const dayPeriod = useMemo<string[]>(() => {
    const from = arrayToDayjs(formProps.getValues("schedulePeriod"));
    const to = arrayToDayjs(formProps.getValues("schedulePeriodTo"));

    const diffDays = Math.abs(from.diff(to, "day"));
    const result: string[] = [];
    for (let i = 0; i <= diffDays; i++) {
      result.push(dayjsToDateString(from.add(i, "day")));
    }

    return result;
  }, []);

  const [pagingController, setPagingController] = useState({
    pageNum: 1,
    pageSize: 10,
    totalCount: 0,
  });

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

  const onSubmit = useCallback<SubmitHandler<RoughProdScheduleResult>>(
    async (data, event) => {
      const 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<RoughProdScheduleResult>
  >((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 FG") + (tabIndex === 0 ? t(" (Selected)") : "")}
              iconPosition="end"
            />
            <Tab
              label={
                t("View By Material") + (tabIndex === 1 ? t(" (Selected)") : "")
              }
              iconPosition="end"
            />
          </Tabs>
          {serverError && (
            <Typography variant="body2" color="error" alignSelf="flex-end">
              {serverError}
            </Typography>
          )}
          {tabIndex === 0 && (
            <ViewByFGDetails
              type={type}
              isEdit={isEdit}
              apiRef={apiRef}
              dayPeriod={dayPeriod}
            />
          )}
          {tabIndex === 1 && (
            <ViewByBomDetails
              type={type}
              isEdit={isEdit}
              apiRef={apiRef}
              dayPeriod={dayPeriod}
            />
          )}
          {/* <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;