"use client";
import {
  Box,
  Card,
  CardContent,
  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 { CreateItemInputs } from "@/app/api/settings/item/actions";
import { NumberInputProps } from "@/components/CreateItem/NumberInputProps";
import { arrayToDateString, integerFormatter } from "@/app/utils/formatUtil";
import { DetailedProdScheduleResult } from "@/app/api/scheduling";
// import { SaveDetailedSchedule } from "./DetailedScheduleDetailView";

// temp interface input

type Props = {
  // recordDetails: SaveDetailedSchedule;
  isEditing: boolean;
};

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

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

  // const [details, setDetails] = useState<DetailedProdScheduleResult | undefined>(undefined);

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

  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("Production Date")}
                fullWidth
                // {...register("scheduleAt", {
                //   required: "Schedule At required!",
                // })}
                defaultValue={`${arrayToDateString(getValues("scheduleAt"))}`}
                // defaultValue={details?.scheduledPeriod}
                disabled={!isEditing}
                // error={Boolean(errors.name)}
                // helperText={errors.name?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Total Job Orders")}
                fullWidth
                // {...register("totalFGType", {
                //   required: "Total FG Type required!",
                // })}
                    // TODO: May update by table row qty
                defaultValue={
                  typeof getValues("totalFGType") == "number"
                    ? integerFormatter.format(getValues("totalFGType"))
                    : getValues("totalFGType")
                }
                // defaultValue={details?.productCount}
                disabled={!isEditing}
                // error={Boolean(errors.code)}
                // helperText={errors.code?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <Controller
                name="totalEstProdCount"
                control={control}
                render={({ field }) => (
                  <TextField
                    {...field}
                    label={t("Total Production Qty")}
                    fullWidth
                    disabled={!isEditing}
                    // TODO: May update by table demand qty
                    defaultValue={
                      typeof field.value == "number"
                        ? integerFormatter.format(field.value)
                        : field.value
                    }
                    // value={
                    //   typeof field.value == "number"
                    //     ? integerFormatter.format(field.value)
                    //     : field.value
                    // }
                    // defaultValue={typeof (details?.productionCount) == "number" ? integerFormatter.format(details?.productionCount) : details?.productionCount}
                    // error={Boolean(errors.type)}
                    // helperText={errors.type?.message}
                    required
                  />
                )}
              />
            </Grid>
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};
export default DetailInfoCard;