import { Grid } from "../components/Grid/Grid";
import { useState } from "react";
import Tabs from "../components/Tab/Tab";
import { QuotaActives } from "../partials/quota/QuotaActives";
import { QuotaClosed } from "../partials/quota/QuotaClosed";
import { useParams } from "@tanstack/react-router";
import { QuotaDistributions } from "../partials/quota/QuotaDistributions";
import { QuotaAllDistributions } from "../partials/quota/QuotaAllDistributions";

export default function Quota() {
  const [selectedTab, setSelectedTab] = useState<number>(0);
  const handleTabChange = (index: number) => {
    setSelectedTab(index);
  };

  const tabItems = [
    {
      label: "سهمیه های فعال",
      page: "quota",
      access: "Active-Tab",
    },
    {
      label: "لیست توزیع",
      page: "quota",
      access: "Distribution-Tab",
    },
    {
      label: "بایگانی",
      page: "quota",
      access: "Closed-Tab",
    },
  ];

  const params = useParams({ strict: false });

  return (
    <Grid container column className="gap-2">
      {params?.code ? (
        <QuotaDistributions />
      ) : (
        <>
          <Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
          {selectedTab === 0 ? (
            <QuotaActives />
          ) : selectedTab === 1 ? (
            <QuotaAllDistributions />
          ) : (
            <QuotaClosed />
          )}
        </>
      )}
    </Grid>
  );
}
