import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Tab, Tabs, ToggleButton, ToggleButtonGroup } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { TabContext, TabPanel } from "@mui/lab";
import { ProvincePaymentByWeightOverviewTable } from "../province-payment-by-weight-overview/ProvincePaymentByWeightOverview";
import { ProvincePaidFees } from "../province-paid-fees/ProvincePaidFees";
import { ProvincePaidFeesChainCompany } from "../province-paid-fees-chain-company/ProvincePaidFeesChainCompany";
import { ProvinceUnpaidFees } from "../province-unpaid-fees/ProvinceUnpaidFees";
import { ProvinceDailyBars } from "../province-daily-bars/ProvinceDailyBars";
import { ProvincePaymentChcikenAlive } from "../province-payment-chicken-alive/ProvincePaymentChickenAlive";
import { ProvincePaymentChains } from "../province-payment-chains/ProvincePaymentChains";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { ProvinceKillhousePaidFee } from "../province-killhouse-paid-fee/ProvinceKillhousePaidFee";
import { ProvinceKillhouseFee } from "../province-killhouse-fee/ProvinceKillhouseFee";
import { ProvinceDailyBarsDetails } from "../province-daily-bars-details/ProvinceDailyBarsDetails";
import { ProvincePaymentLiveChickenDetails } from "../province-payment-live-chicken-detail/ProvincePaymentLiveChickenDetails";
import { ProvincePaymentChainDetails } from "../province-payment-chain-detail/ProvincePaymentChainDetails";
import { ProvinceWagePaymentTransactions } from "../province-wage-payment-transactions/ProvinceWagePaymentTransactions";
import { ProvincePaymentByWeightKillhouses } from "../province-payment-by-weight-killhouses/ProvincePaymentByWeightKillhouses";

export const ProvincePaymentByWeight = () => {
  const { slaughterExclusiveState } = useSelector(
    (item) => item.slaughterSlice
  );

  const [tabValue, setTabValue] = useState("1");

  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
  };
  const [tabValueWages, setTabValueWages] = useState();

  const handleTabWagesChange = (event, newValue) => {
    setTabValueWages(newValue);
  };

  const [tabValuePayments, setTabValuePayments] = useState("1");

  const handleTabPaymentsChange = (event, newValue) => {
    setTabValuePayments(newValue);
  };

  useEffect(() => {
    let role = getRoleFromUrl();
    if (role !== "ChainCompany") {
      setTabValueWages("1");
    }
  }, []);

  return (
    <Grid justifyContent="center" gap={SPACING.SMALL} xs={12}>
      <Grid sx={{ maxWidth: { xs: "100%", md: "90vw" } }} px={{ xs: 2, md: 0 }}>
        <ProvincePaymentByWeightOverviewTable />
      </Grid>

      {getRoleFromUrl() !== "ParentCompany" && (
        <Grid
          container
          alignItems="center"
          justifyContent="center"
          mt={2}
          xs={12}
        >
          <Tabs
            scrollButtons="auto"
            variant="scrollable"
            allowScrollButtonsMobile
            value={tabValue}
            onChange={handleTabChange}
          >
            <Tab label="پرداختی ها" value="1" />
            <Tab label="اطلاعات تعرفه" value="2" />
            {/* {(getRoleFromUrl() === "SuperAdmin" ||
              getRoleFromUrl() === "AdminX") && (
              <Tab label=" پایش تعرفه ها" value="3" />
            )}
            {getRoleFromUrl() === "ProvinceOperator" && (
              <Tab label=" پایش تعرفه ها" value="3" />
            )} */}
          </Tabs>
        </Grid>
      )}

      {getRoleFromUrl() !== "ParentCompany" && (
        <TabContext value={tabValue}>
          <TabPanel value="3">
            <Grid container alignItems="center" justifyContent="center" xs={12}>
              <ProvincePaymentByWeightKillhouses />
            </Grid>
          </TabPanel>
          <TabPanel value="1">
            <Grid
              container
              alignItems="center"
              justifyContent="center"
              mt={2}
              xs={12}
            >
              <Grid
                container
                alignItems="center"
                justifyContent="center"
                xs={12}
              >
                {getRoleFromUrl() === "SuperAdmin" ||
                getRoleFromUrl() === "AdminX" ||
                getRoleFromUrl() === "ProvinceOperator" ? (
                  <>
                    <Grid
                      container
                      alignItems="center"
                      justifyContent="center"
                      xs={12}
                      mb={1}
                    >
                      <ToggleButtonGroup
                        size="small"
                        color="primary"
                        value={tabValuePayments}
                        exclusive
                        onChange={handleTabPaymentsChange}
                        aria-label="Platform"
                      >
                        <ToggleButton value="1">کشتارگاه</ToggleButton>
                        <ToggleButton value="2">شرکت زنجیره</ToggleButton>
                        {(getRoleFromUrl() === "SuperAdmin" ||
                          getRoleFromUrl() === "AdminX" ||
                          getRoleFromUrl() === "ProvinceOperator" ||
                          getRoleFromUrl() === "Guilds") && (
                          <ToggleButton value="3">تراکنش ها</ToggleButton>
                        )}
                      </ToggleButtonGroup>
                    </Grid>
                    <Grid
                      container
                      alignItems="center"
                      justifyContent="center"
                      xs={12}
                    >
                      {tabValuePayments === "1" ? (
                        <ProvincePaidFees />
                      ) : tabValuePayments === "2" ? (
                        <ProvincePaidFeesChainCompany />
                      ) : (
                        <ProvinceWagePaymentTransactions />
                      )}
                    </Grid>
                  </>
                ) : (
                  <>
                    {getRoleFromUrl === "KillHouse" ? (
                      <ProvinceKillhousePaidFee
                        killhouseKey={"killhouse"}
                        type={"kill_house_key"}
                      />
                    ) : (
                      <ProvinceKillhousePaidFee
                        killhouseKey={"chain_company"}
                        type={"chain_company_key"}
                      />
                    )}
                  </>
                )}
              </Grid>
            </Grid>
          </TabPanel>
          <TabPanel value="2">
            <Grid
              container
              alignItems="center"
              justifyContent="center"
              mt={2}
              xs={12}
            >
              <Grid
                container
                alignItems="center"
                justifyContent="center"
                xs={12}
              >
                {(getRoleFromUrl() === "ProvinceOperator" ||
                  getRoleFromUrl() === "SuperAdmin" ||
                  getRoleFromUrl() === "AdminX" ||
                  getRoleFromUrl() === "Commerce" ||
                  getRoleFromUrl() === "KillHouse") && (
                  <Tabs
                    scrollButtons="auto"
                    variant="scrollable"
                    allowScrollButtonsMobile
                    value={tabValueWages}
                    onChange={handleTabWagesChange}
                  >
                    <Tab label="بارهای روزانه" value="1" />
                    {!slaughterExclusiveState && (
                      <Tab disabled label="تخصیص روزانه" value="2" />
                    )}
                    <Tab disabled label="مرغ زنده" value="3" />
                    {(getRoleFromUrl() === "KillHouse" ||
                      getRoleFromUrl() === "SuperAdmin" ||
                      getRoleFromUrl() === "AdminX" ||
                      getRoleFromUrl() === "Commerce") && (
                      <Tab disabled label="لاشه" value="4" />
                    )}
                    {getRoleFromUrl() !== "KillHouse" &&
                      getRoleFromUrl() !== "ChainCompany" && (
                        <Tab disabled label="زنجیره" value="5" />
                      )}
                  </Tabs>
                )}
              </Grid>
              {getRoleFromUrl() === "ChainCompany" && (
                <ProvincePaymentChainDetails killhouseKey={"killhouseKey"} />
              )}
              <TabContext value={tabValueWages}>
                <TabPanel value="1">
                  {getRoleFromUrl() === "SuperAdmin" ||
                  getRoleFromUrl() === "AdminX" ||
                  getRoleFromUrl() === "ProvinceOperator" ||
                  getRoleFromUrl() === "Commerce" ? (
                    <ProvinceDailyBars />
                  ) : (
                    <ProvinceDailyBarsDetails killhouseKey={"killhouse"} />
                  )}
                </TabPanel>
                <TabPanel value="2">
                  {getRoleFromUrl() === "SuperAdmin" ||
                  getRoleFromUrl() === "AdminX" ||
                  getRoleFromUrl() === "ProvinceOperator" ||
                  getRoleFromUrl() === "Commerce" ? (
                    <ProvinceUnpaidFees />
                  ) : (
                    <ProvinceKillhouseFee killhouseKey={"killhouse"} />
                  )}
                </TabPanel>

                <TabPanel value="3">
                  {getRoleFromUrl() === "SuperAdmin" ||
                  getRoleFromUrl() === "AdminX" ||
                  getRoleFromUrl() === "ProvinceOperator" ||
                  getRoleFromUrl() === "Commerce" ? (
                    <ProvincePaymentChcikenAlive type={"live_chicken"} />
                  ) : (
                    <ProvincePaymentLiveChickenDetails
                      killhouseKey={"live_chicken"}
                      type={"live"}
                    />
                  )}
                </TabPanel>
                <TabPanel value="4">
                  {getRoleFromUrl() === "SuperAdmin" ||
                  getRoleFromUrl() === "AdminX" ||
                  getRoleFromUrl() === "ProvinceOperator" ||
                  getRoleFromUrl() === "Commerce" ? (
                    <ProvincePaymentChcikenAlive type={"carcassess"} />
                  ) : (
                    <ProvincePaymentLiveChickenDetails
                      killhouseKey={"carcassess"}
                      type={"carcass"}
                    />
                  )}
                </TabPanel>
                <TabPanel value="5">
                  {getRoleFromUrl() === "SuperAdmin" ||
                  getRoleFromUrl() === "AdminX" ||
                  getRoleFromUrl() === "ProvinceOperator" ||
                  getRoleFromUrl() === "Commerce" ? (
                    <ProvincePaymentChains />
                  ) : (
                    <ProvincePaymentChainDetails
                      killhouseKey={"killhouseKey"}
                    />
                  )}
                </TabPanel>
              </TabContext>
            </Grid>
          </TabPanel>
        </TabContext>
      )}
    </Grid>
  );
};
