"use client";
import {
  Box,
  Card,
  CardContent,
  FormControl,
  Grid,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import InputDataGrid from "../InputDataGrid";
import { useCallback, useEffect, useMemo, useState } from "react";
import { GridColDef, GridRowModel } from "@mui/x-data-grid";
import { InputDataGridProps, TableRow } from "../InputDataGrid/InputDataGrid";
import { TypeEnum } from "@/app/utils/typeEnum";
import { NumberInputProps } from "@/components/CreateItem/NumberInputProps";
import { arrayToDateString, integerFormatter } from "@/app/utils/formatUtil";
import { RoughProdScheduleResult } from "@/app/api/scheduling";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

type Props = {
  isEditing: boolean;
};

const DetailInfoCard: React.FC<Props> = ({ isEditing }) => {
  const {
    t,
    i18n: { language },
  } = useTranslation();

  const {
    control,
    register,
    getValues,
    watch,
    formState: { errors, defaultValues, touchedFields },
  } = useFormContext<RoughProdScheduleResult>();

  // const [details, setDetails] = useState(null);

  useEffect(() => {
    console.log("[debug] record details", getValues());
    // setDetails(recordDetails);
  }, [getValues]);

  useEffect(() => {
    console.log("[debug] isEdit", isEditing);
  }, [isEditing]);

  return (
    <Card sx={{ display: "block" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          {/* <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Schedule Detail")}
          </Typography> */}
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                label={t("Date")}
                fullWidth
                // {...register("scheduledPeriod", {
                //   required: "name required!",
                // })}
                defaultValue={`${arrayToDateString(
                  getValues("schedulePeriod"),
                )} - ${arrayToDateString(getValues("schedulePeriodTo"))}`}
                disabled={!isEditing}
                // error={Boolean(errors.name)}
                // helperText={errors.name?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Total FG Item")}
                fullWidth
                // {...register("totalFGType", {
                //   required: "Total FG Item required!",
                // })}
                defaultValue={
                  typeof getValues("totalFGType") == "number"
                    ? integerFormatter.format(getValues("totalFGType"))
                    : getValues("totalFGType")
                }
                disabled={!isEditing}
                // error={Boolean(errors.code)}
                // helperText={errors.code?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Total Estimated Demand Qty")}
                fullWidth
                // {...register("totalEstProdCount", {
                //   required: "Qty required!",
                // })}
                disabled={!isEditing}
                defaultValue={
                  typeof getValues("totalFGType") == "number"
                    ? integerFormatter.format(getValues("totalEstProdCount"))
                    : getValues("totalEstProdCount")
                }
                // error={Boolean(errors.type)}
                // helperText={errors.type?.message}
              />
            </Grid>
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};
export default DetailInfoCard;