"use client";

import { StockInLineEntry, EscalationInput } from "@/app/api/po/actions";
import {
  Box,
  Card,
  CardContent,
  Grid,
  Stack,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import StyledDataGrid from "../StyledDataGrid";
import { useCallback, useEffect, useMemo } from "react";
import {
  GridColDef,
  GridRowIdGetter,
  GridRowModel,
  useGridApiContext,
  GridRenderCellParams,
  GridRenderEditCellParams,
  useGridApiRef,
} from "@mui/x-data-grid";
import InputDataGrid from "../InputDataGrid";
import { TableRow } from "../InputDataGrid/InputDataGrid";
import TwoLineCell from "./TwoLineCell";
import QcSelect from "./QcSelect";
import { QcItemWithChecks } from "@/app/api/qc";
import { GridEditInputCell } from "@mui/x-data-grid";
import { StockInLine } from "@/app/api/po";
import { stockInLineStatusMap } from "@/app/utils/formatUtil";

interface Props {
  itemDetail: StockInLine;
//   qc: QcItemWithChecks[];
}
type EntryError =
  | {
      [field in keyof StockInLineEntry]?: string;
    }
  | undefined;

const EscalationForm: React.FC<Props> = ({ 
//   qc,
  itemDetail,
 }) => {
  const { t } = useTranslation();
  const apiRef = useGridApiRef();
  const {
    register,
    formState: { errors, defaultValues, touchedFields },
    watch,
    control,
    setValue,
    getValues,
    reset,
    resetField,
    setError,
    clearErrors,
  } = useFormContext<EscalationInput>();
  console.log(itemDetail)

  const [status, determineCount] = useMemo(() => {
    switch (itemDetail.status) {
        case "pending":
            return ["determine1", 1];
        case "determine1":
            return ["determine2", 2];
        case "determine2":
            return ["determine3", 3];
        default:
            return ["receiving", "receive or reject" ];
    }
  }, [itemDetail])

  // const acceptedQty = watch("acceptedQty") || 0
  const acceptedQty = watch("acceptedQty") || 0

  // console.log(acceptedQty)
  console.log(acceptedQty)
  console.log(itemDetail.acceptedQty)
  useEffect(() => {
    console.log("triggered")
    setValue("status", status)
  }, [])

  return (
    <Grid container justifyContent="flex-start" alignItems="flex-start">
      <Grid item xs={12}>
        <Typography variant="h6" display="block" marginBlockEnd={1}>
          {t(`Escalation`)}: {determineCount}
        </Typography>
      </Grid>
      <Grid item xs={12}>
        <Typography variant="h6" display="block" marginBlockEnd={1}>
          {t(`to be processed`)}: {itemDetail.acceptedQty - acceptedQty}
        </Typography>
      </Grid>
      <Grid
        container
        justifyContent="flex-start"
        alignItems="flex-start"
        spacing={2}
        sx={{ mt: 0.5 }}
      >
        <Grid item xs={6}>
          <TextField
            label={t("acceptedQty")}
            fullWidth
            {...register("acceptedQty", {
              required: "acceptedQty required!",
              min: 0,
              valueAsNumber: true,
              max: itemDetail.acceptedQty
            })}
            defaultValue={itemDetail.acceptedQty}
            error={Boolean(errors.acceptedQty)}
            helperText={errors.acceptedQty?.message}
          />
        </Grid>
      </Grid>
      <Grid
        container
        justifyContent="flex-start"
        alignItems="flex-start"
        spacing={2}
        sx={{ mt: 0.5 }}
      >
      </Grid>
    </Grid>
  );
};
export default EscalationForm;