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 TopSection from "~/components/TopSection";

import * as Icon from "react-feather";
import AddCategoryForm from "~/components/category/AddCategoryForm";
import CategoryTable from "~/components/category/CategoryTable";

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 Categoria
    </Button>
  );
  const categoriesQuery = api.category.getCategories.useQuery(undefined, {
    refetchOnWindowFocus: false,
  });

  return (
    <>
      <TopSection
        pageName={"Categorias"}
        topSectionButton={<TopSectionButton setAddOpen={setAddOpen} />}
      />
      <AddCategoryForm
        open={addOpen}
        setOpen={setAddOpen}
        categoriesQuery={categoriesQuery}
      />
      <CategoryTable categoriesQuery={categoriesQuery} />
    </>
  );
}