import {
  Modal,
  Option,
  Select,
  Sheet,
  ModalClose,
  FormControl,
  FormLabel,
  Input,
  Button,
  Grid,
} from "@mui/joy";
import { Box } from "@mui/system";
import type { Product, Category } from "@prisma/client";
import React, { useState } from "react";
import { api } from "~/utils/api";

export default function EditCategoryForm({
  open,
  setOpen,
  categoriesQuery,
  category,
}) {
  const [nameError, setNameError] = useState(false);

  const categoryMutation = api.category.updateCategory.useMutation({
    onSuccess: () => {
      categoriesQuery.refetch();
    },
  });

  const updateCategory = (category: any) => {
    categoryMutation.mutate(category);
    setOpen(false);
  };

  return (
    <Modal
      open={open}
      onClose={() => setOpen(false)}
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Sheet
        variant='outlined'
        sx={{
          minWidth: 500,
          borderRadius: "md",
          p: 3,
        }}
      >
        <ModalClose variant='outlined' />
        <form
          onSubmit={(e: React.SyntheticEvent) => {
            e.preventDefault();
            if (e.target[0].value.length < 1) {
              setNameError(true);
              return;
            }
            const updatedCategory = {
              id: category.id,
              name: e.target[0].value,
              description: e.target[1].value,
            };
            updateCategory(updatedCategory);
            setOpen(false);
          }}
        >
          <Grid
            container
            direction='column'
            justifyContent='center'
            alignItems='stretch'
            spacing={2}
            mt={4}
          >
            <Grid>
              <FormControl>
                <FormLabel>Nome</FormLabel>
                <Input type='text' name='name' defaultValue={category.name} />
              </FormControl>
            </Grid>
            <Grid>
              <FormControl>
                <FormLabel>Descrição</FormLabel>
                <Input
                  type='text'
                  name='description'
                  error={nameError}
                  defaultValue={category.description}
                />
              </FormControl>
            </Grid>
            <Grid>
              <Button type='submit'>Salvar</Button>
            </Grid>
          </Grid>
        </form>
      </Sheet>
    </Modal>
  );
}