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 RegisterTable from "~/components/register/RegisterTable";
import OpenRegisterForm from "~/components/register/OpenRegisterForm";

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)}
    >
      Abrir Caixa
    </Button>
  );
  const registersQuery = api.register.getRegisters.useQuery(undefined, {
    refetchOnWindowFocus: false,
  });

  return (
    <>
      <TopSection
        pageName={"Caixas"}
        topSectionButton={<TopSectionButton setAddOpen={setAddOpen} />}
      />
      <OpenRegisterForm
        open={addOpen}
        setOpen={setAddOpen}
        registersQuery={registersQuery}
      />
      <RegisterTable registersQuery={registersQuery} />
    </>
  );
}