import { type NextPage } from "next";

import { api } from "~/utils/api";

import * as React from "react";
import Button from "@mui/joy/Button";
import { useState } from "react";
import ProductTable from "~/components/product/ProductTable";
import TopSection from "~/components/TopSection";

import AddProductForm from "~/components/product/AddProductForm";
import * as Icon from "react-feather";

export default function Index() {
  const [addOpen, setAddOpen] = useState(false);
  const TopSectionButton = ({
    setAddOpen,
  }: {
    setAddOpen: React.Dispatch<React.SetStateAction<boolean>>;
  }) => (
    <Button
      variant='outlined'
      color='neutral'
      startDecorator={<Icon.Plus />}
      onClick={() => setAddOpen(true)}
    >
      Cadastrar Produto
    </Button>
  );
  const productsQuery = api.product.getProducts.useQuery(undefined, {
    refetchOnWindowFocus: false,
  });
  const categoriesQuery = api.category.getCategories.useQuery(undefined, {
    refetchOnWindowFocus: false,
  });

  return (
    <>
      <TopSection
        pageName={"Produtos"}
        topSectionButton={<TopSectionButton setAddOpen={setAddOpen} />}
      />
      <AddProductForm
        open={addOpen}
        setOpen={setAddOpen}
        productsQuery={productsQuery}
        categoriesQuery={categoriesQuery}
      />
      {productsQuery.data?.products && (
        <ProductTable
          products={productsQuery.data?.products}
          productsQuery={productsQuery}
          categoriesQuery={categoriesQuery}
        />
      )}
    </>
  );
}