"use client";

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 { QcItemWithChecks } from "@/app/api/qc";
import { GridEditInputCell } from "@mui/x-data-grid";
import { StockInLine } from "@/app/api/po";
import { stockInLineStatusMap } from "@/app/utils/formatUtil";
import { PickOrderApprovalInput } from "@/app/api/pickOrder/actions";
import { StockOutLine } from "@/app/api/pickOrder";

interface Props {
  //   approvalDefaultValues: StockInLine;
  //   qc: QcItemWithChecks[];
  approvalDefaultValues: StockOutLine & PickOrderApprovalInput;

  disabled: boolean;
}

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

  //   const status = "rejected"
  const totalQty = approvalDefaultValues.qty;
  const allowQty = watch("allowQty");
  const rejectQty = watch("rejectQty");

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