"use client";
import {
  Autocomplete,
  Box,
  Button,
  Card,
  CardContent,
  Grid,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import { Check, Close, EditNote } from "@mui/icons-material";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import InputDataGrid from "../InputDataGrid";

import { SyntheticEvent, useCallback, 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 "./NumberInputProps";
import { CreateItemInputs } from "@/app/api/settings/item/actions";
import { RestartAlt } from "@mui/icons-material";
import { ItemQc } from "@/app/api/settings/item";
import { QcCategoryCombo } from "@/app/api/settings/qcCategory";
type Props = {
  //   isEditMode: boolean;
  //   type: TypeEnum;
  isEditMode: boolean;
  // type: TypeEnum;
  defaultValues?: Partial<CreateItemInputs> | undefined;
  qcChecks?: ItemQc[];
  qcCategoryCombo: QcCategoryCombo[];
};

const ProductDetails: React.FC<Props> = ({ isEditMode, qcCategoryCombo }) => {
  const {
    t,
    i18n: { language },
  } = useTranslation();

  const {
    register,
    formState: { errors, defaultValues, touchedFields },
    watch,
    control,
    setValue,
    getValues,
    reset,
    resetField,
    setError,
    clearErrors,
  } = useFormContext<CreateItemInputs>();
  // const typeColumns = useMemo<GridColDef[]>(
  //   () => [
  //     {
  //       field: "type",
  //       headerName: "type",
  //       flex: 1,
  //       editable: true,
  //     },
  //   ],
  //   []
  // );
  // const weightUnitColumns = useMemo<GridColDef[]>(
  //   () => [
  //     {
  //       field: "weightUnit",
  //       headerName: "Weight Unit",
  //       flex: 1,
  //       editable: true,
  //     },
  //     {
  //       field: "conversion",
  //       headerName: "conversion", // show base unit
  //       flex: 1,
  //       type: "number",
  //       editable: true,
  //     },
  //   ],
  //   []
  // );
  // const uomColumns = useMemo<GridColDef[]>(
  //   () => [
  //     {
  //       field: "uom",
  //       headerName: "uom",
  //       flex: 1,
  //       editable: true,
  //     },
  //   ],
  //   []
  // );

  // const validationTest = useCallback(
  //   (
  //     newRow: GridRowModel<TableRow<Partial<CreateItemInputs>, EntryError>>
  //   ): EntryError => {
  //     const error: EntryError = {};
  //     console.log(newRow);
  //     return Object.keys(error).length > 0 ? error : undefined;
  //   },
  //   []
  // );
  const handleCancel = () => {
    // router.replace(`/settings/product`);
    console.log("cancel");
  };

  const handleAutoCompleteChange = useCallback((event: SyntheticEvent<Element, Event>, value: QcCategoryCombo, onChange: (...event: any[]) => void) => {
    onChange(value.id)
}, [])

  return (
    <Card sx={{ display: "block" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Product Details")}
          </Typography>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                label={t("Name")}
                fullWidth
                {...register("name", {
                  required: "name required!",
                })}
                error={Boolean(errors.name)}
                helperText={errors.name?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Code")}
                fullWidth
                {...register("code", {
                  required: "code required!",
                })}
                error={Boolean(errors.code)}
                helperText={errors.code?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Type")}
                fullWidth
                {...register("type", {
                  required: "type required!",
                })}
                error={Boolean(errors.type)}
                helperText={errors.type?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("description")}
                fullWidth
                {...register("description")}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("shelfLife")}
                type="number"
                fullWidth
                {...register("shelfLife", {
                  valueAsNumber: true,
                  required: "shelfLife required!",
                })}
                error={Boolean(errors.shelfLife)}
                helperText={errors.shelfLife?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("countryOfOrigin")}
                fullWidth
                {...register("countryOfOrigin", {
                  required: "countryOfOrigin required!",
                })}
                error={Boolean(errors.countryOfOrigin)}
                helperText={errors.countryOfOrigin?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("remarks")}
                fullWidth
                {...register("remarks", {
                  //   required: "remarks required!",
                })}
                error={Boolean(errors.remarks)}
                helperText={errors.remarks?.message}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("maxQty")}
                type="number"
                fullWidth
                inputProps={NumberInputProps}
                {...register("maxQty", {
                  valueAsNumber: true,
                  min: 0,
                  required: "maxQty required!",
                })}
                error={Boolean(errors.maxQty)}
                helperText={errors.maxQty?.message}
              />
            </Grid>
            <Grid item xs={6}>
                <Controller
                  control={control}
                  name="qcCategoryId"
                  render={({ field }) => (
                    <Autocomplete
                      disableClearable
                      options={qcCategoryCombo}
                      defaultValue={qcCategoryCombo.find(qc => qc.id === field.value)}
                      onChange={(event, value) => {
                        handleAutoCompleteChange(event, value, field.onChange)
                      }}
                      onBlur={field.onBlur}
                      renderInput={(params) => (
                        <TextField
                          {...params}
                          variant="outlined"
                          label={t("Qc Category")}
                        />
                      )}
                    />
                  )}
                />
            </Grid>
            <Grid item xs={12}>
              <Stack
                direction="row"
                justifyContent="flex-end"
                spacing={2}
                sx={{ mt: 2 }}
              >
                <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>
                <Button
                  variant="outlined"
                  startIcon={<RestartAlt />}
                  onClick={() => reset()}
                >
                  {t("Reset")}
                </Button>
              </Stack>
            </Grid>
            {/* <Grid item xs={6}>
              <InputDataGrid<CreateItemInputs, EntryError>
                _formKey={"type"}
                columns={typeColumns}
                validateRow={validationTest}
              />
            </Grid>
            <Grid item xs={6}>
              <InputDataGrid<CreateItemInputs, EntryError>
                _formKey={"uom"}
                columns={uomColumns}
                validateRow={validationTest}
              />
            </Grid>
            <Grid item xs={12}>
              <InputDataGrid<CreateItemInputs, EntryError>
                _formKey={"weightUnit"}
                columns={weightUnitColumns}
                validateRow={validationTest}
              />
            </Grid>*/}
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};
export default ProductDetails;
