import { useEffect, useState } from "react";
import { useApiRequest } from "../../../utils/useApiRequest";
import { formatJustDate, formatJustTime } from "../../../utils/formatTime";
import { Grid } from "../../../components/Grid/Grid";
import Table from "../../../components/Table/Table";
import { ShowWeight } from "../../../components/ShowWeight/ShowWeight";
import { Tooltip } from "../../../components/Tooltip/Tooltip";
import Button from "../../../components/Button/Button";
import { BarsArrowUpIcon } from "@heroicons/react/24/outline";
import { QuotaAllocateToStakeHolders } from "../quota/QuotaAllocateToStakeHolders";
import { Popover } from "../../../components/PopOver/PopOver";
import { useModalStore } from "../../../context/zustand-store/appStore";
import { DeleteButtonForPopOver } from "../../../components/PopOverButtons/PopOverButtons";

export const InventoryStakeHolderAllocations = () => {
  const { openModal } = useModalStore();
  const [params, setParams] = useState({ page: 1, page_size: 10 });
  const [tableData, setTableData] = useState([]);

  const { data: apiData, refetch } = useApiRequest({
    api: `/pos_device/web/v1/pos/holders_share/my_sharing_distributes`,
    method: "get",
    params: { ...params },
    queryKey: ["my_sharing_distributes", params],
  });

  useEffect(() => {
    if (apiData?.results) {
      const formattedData = apiData.results.map((item: any, i: number) => {
        return [
          params.page === 1
            ? i + 1
            : i + params.page_size * (params.page - 1) + 1,
          item?.quota_distribution?.distribution_id,
          item?.quota_distribution?.quota?.quota_id,
          `${formatJustDate(item?.create_date)} (${formatJustTime(
            item?.quota_distribution?.create_date,
          )})`,
          item?.quota_distribution?.assigner_organization?.organization,
          item?.quota_distribution?.assigned_organization?.organization,
          <ShowWeight
            key={i}
            weight={item?.quota_distribution?.weight}
            type={item?.quota_distribution?.quota?.sale_unit?.unit}
          />,
          item?.share_amount?.toLocaleString(),
          item?.quota_distribution?.description,
          <Popover key={i}>
            <Tooltip title="تخصیص به زیر مجموعه" position="right">
              <Button
                size="small"
                page="inventory"
                access="Stakeholder-Allocation"
                icon={
                  <BarsArrowUpIcon className="w-6 h-6 text-purple-400 dark:text-white" />
                }
                onClick={() => {
                  openModal({
                    title: "تخصیص به زیر مجموعه",
                    content: (
                      <QuotaAllocateToStakeHolders
                        getData={refetch}
                        item={item}
                      />
                    ),
                  });
                }}
              />
            </Tooltip>
            <DeleteButtonForPopOver
              api={`pos_device/web/v1/pos/holders_share/${item?.id}/`}
              getData={refetch}
            />
          </Popover>,
        ];
      });
      setTableData(formattedData);
    }
  }, [apiData, params]);
  return (
    <Grid container column className="items-center gap-2">
      <Grid className="w-full">
        <Table
          showDates
          className="mt-2"
          // excelInfo={{
          //   link: "product/excel/my_distributions_excel/?param=assigner",
          // }}
          onChange={(e) => {
            setParams(e);
          }}
          title="توزیع به زیر مجموعه"
          isPaginated
          count={apiData?.count || 10}
          columns={[
            "ردیف",
            "شناسه توزیع",
            "شناسه سهمیه",
            "تاریخ توزیع",
            "توزیع کننده",
            "دریافت کننده",
            "وزن",
            "سهم از تعرفه",
            "توضیحات",
            "عملیات",
          ]}
          rows={tableData}
        />
      </Grid>
    </Grid>
  );
};