import {
  Modal,
  Option,
  Select,
  Sheet,
  ModalClose,
  FormControl,
  FormLabel,
  Input,
  Button,
  Grid,
} from "@mui/joy";
import React, { useState } from "react";
import { api } from "~/utils/api";

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

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

  const addCategory = (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 category = {
              name: e.target[0].value,
              description: e.target[1].value,
            };
            addCategory(category);
          }}
        >
          <Grid
            container
            direction='column'
            justifyContent='center'
            alignItems='stretch'
            spacing={2}
            mt={4}
          >
            <Grid>
              <FormControl>
                <FormLabel>Nome</FormLabel>
                <Input type='text' name='name' error={nameError} />
              </FormControl>
            </Grid>
            <Grid>
              <FormControl>
                <FormLabel>Descrição</FormLabel>
                <Input type='text' name='description' />
              </FormControl>
            </Grid>
            <Grid>
              <Button type='submit'>Cadastrar</Button>
            </Grid>
          </Grid>
        </form>
      </Sheet>
    </Modal>
  );
}