"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 { CreateEquipmentInputs } from "@/app/api/settings/equipment/actions";
import { RestartAlt } from "@mui/icons-material";
type Props = {
  //   isEditMode: boolean;
  //   type: TypeEnum;
  isEditMode: boolean;
  // type: TypeEnum;
  defaultValues?: Partial<CreateEquipmentInputs> | undefined;
};

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<CreateEquipmentInputs>();
  // 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/equipment`);
    console.log("cancel");
  };
  return (
    <Card sx={{ display: "block" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Equipment Details")}
          </Typography>
          <Grid item xs={6}>
            <TextField
              label={t("Equipment Type")}
              fullWidth
              {...register("equipmentTypeId")}
            />
          </Grid>
          <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("description")}
                fullWidth
                {...register("description")}
              />
            </Grid>

            <Grid item xs={12}>
              <Stack
                direction="row"
                justifyContent="flex-start"
                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;