FPSMS-frontend/src/components/CreateItem/ProductDetails.tsx

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

import { 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";
type Props = {
  //   isEditMode: boolean;
  //   type: TypeEnum;
  isEditMode: boolean;
  // type: TypeEnum;
  defaultValues: Partial<CreateItemInputs> | undefined;
  qcChecks: ItemQc[]
};

const ProductDetails: React.FC<Props> = ({isEditMode}) => {
  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`);
  };
  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={0}>
            <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;