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 EditProductForm({
  open,
  setOpen,
  productsQuery,
  categoriesQuery,
  product,
}) {
  const [nameError, setNameError] = useState(false);

  const productMutation = api.product.updateProduct.useMutation({
    onSuccess: () => {
      productsQuery.refetch();
    },
  });

  const updateProduct = (product: any) => {
    productMutation.mutate(product);
    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[1].value.length < 1) {
              setNameError(true);
              return;
            }
            const updatedProduct = {
              id: product.id,
              barcode: e.target[0].value,
              name: e.target[1].value,
              category_id: parseInt(e.target[3].value),
              cost: parseFloat(e.target[4].value),
              price: parseFloat(e.target[5].value),
            };
            updateProduct(updatedProduct);
          }}
        >
          <Grid
            container
            direction='column'
            justifyContent='center'
            alignItems='stretch'
            spacing={2}
            mt={4}
          >
            <Grid>
              <FormControl>
                <FormLabel>Codigo</FormLabel>
                <Input
                  type='text'
                  name='barcode'
                  defaultValue={product.barcode}
                />
              </FormControl>
            </Grid>
            <Grid>
              <FormControl>
                <FormLabel>Nome/Descrição</FormLabel>
                <Input
                  type='text'
                  name='name'
                  error={nameError}
                  defaultValue={product.name}
                />
              </FormControl>
            </Grid>
            <Grid>
              <FormControl>
                <FormLabel>Categoria</FormLabel>
                <Select name='category' defaultValue={product.category_id}>
                  {categoriesQuery.data?.categories.map((category) => {
                    return (
                      <Option key={category.id} value={category.id}>
                        {category.name}
                      </Option>
                    );
                  })}
                </Select>
              </FormControl>
            </Grid>
            <Grid>
              <FormControl>
                <FormLabel>Preço Custo</FormLabel>
                <Input
                  type='number'
                  name='cost'
                  startDecorator='R$'
                  defaultValue={product.cost}
                  slotProps={{
                    input: {
                      min: 0.0,
                      step: 0.01,
                    },
                  }}
                />
              </FormControl>
            </Grid>
            <Grid>
              <FormControl>
                <FormLabel>Preço Venda</FormLabel>
                <Input
                  type='number'
                  name='price'
                  startDecorator='R$'
                  defaultValue={product.price}
                  slotProps={{
                    input: {
                      min: 0.0,
                      step: 0.01,
                    },
                  }}
                />
              </FormControl>
            </Grid>
            <Grid>
              <Button type='submit'>Salvar</Button>
            </Grid>
          </Grid>
        </form>
      </Sheet>
    </Modal>
  );
}