import { useState } from "react";
import { Grid } from "../components/Grid/Grid";
import Tabs from "../components/Tab/Tab";
import { QuotaReportingProducts } from "../partials/quota/QuotaReportingProducts";
import { useParams } from "@tanstack/react-router";
import { QuotaReportingProductDetails } from "../partials/quota/QuotaReportingProductDetails";
import { QuotaReportingQuotaDistributions } from "../partials/quota/QuotaReportingQuotaDistributions";

const tabItems = [
  { label: "محصول" },
  // { label: "نقش ها", visible: false },
  // { label: "تراکنش ها", visible: false },
];

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

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

  return (
    <Grid container column className="gap-2">
      {params?.type === "quota" ? (
        <QuotaReportingProductDetails />
      ) : params?.type === "distribution" ? (
        <QuotaReportingQuotaDistributions />
      ) : (
        <>
          <Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
          {selectedTab === 0 ? <QuotaReportingProducts /> : <></>}
        </>
      )}
    </Grid>
  );
}
