import {
  Button,
  IconButton,
  Tab,
  Tabs,
  TextField,
  Tooltip,
  Typography
} from "@mui/material";
import { format } from "date-fns-jalali";
import { useContext, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
// import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { Grid } from "../../../../components/grid/Grid";
// import { vetFarmGetAllocatedService } from "../../services/vet-farm-get-allocated";
import { DatePicker } from "@mui/x-date-pickers";
import CancelIcon from "@mui/icons-material/Delete";
import moment from "moment/moment";
import { SPACING } from "../../../../data/spacing";
import { AppContext } from "../../../../contexts/AppContext";
import axios from "axios";
import { RiFileExcel2Fill, RiSearchLine } from "react-icons/ri";
import {
  LOADING_END,
  LOADING_START,
  OPEN_MODAL
} from "../../../../lib/redux/slices/appSlice";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
// import { getFaUserRole } from "../../../../utils/getFaUserRole";
import { VetFarmCancelBar } from "../../../vet-farm/components/vet-farm-cancel-bar/VetFarmCancelBar";
import { VetFarmEditTrafficCode } from "../../../vet-farm/components/vet-farm-edit-traffic-code/VetFarmEditTrafficCode";
import { VetFarmDeletedBars } from "../../../vet-farm/components/vet-farm-deleted-bars/VetFarmDeletedBars";
import { ProvinceBarDifference } from "../../../province/components/province-bar-difference/ProvinceBarDifference";
import { CheckCleanceCode } from "../../../../components/check-clearance-code/ChechClearanceCode";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { SlaughterBarDashboardService } from "../../services/slaughter-bar-dashbored";
import { SlaughterEnterNoneReciept } from "../slaughter-enter-none-receipt/SlaughterEnterNoneReciept";
import { checkPathStartsWith } from "../../../../utils/checkPathStartsWith";

export const SlaughterBars = () => {
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);

  useEffect(() => {
    const currentDate = moment(new Date()).format("YYYY-MM-DD");
    setSelectedDate1(currentDate);
    setSelectedDate2(currentDate);
  }, []);
  const userKey = useSelector((state) => state.userSlice.userProfile.key);

  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabChange = (event, newValue) => {
    setSelectedTab(newValue);
  };

  const dispatch = useDispatch();

  const [dataTableM, setDataTableM] = useState([]);

  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [totalRows, setTotalRows] = useState(0);
  const [perPage, setPerPage] = useState(10);
  const [dashboardData, setDashboardData] = useState([]);
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );

  const fetchApiData = async (page) => {
    setLoading(true);
    const response = await axios.get(
      `kill_house_request_bar_management/?check&search=filter&value=${textValue}&role=${getRoleFromUrl()}${
        checkPathStartsWith("slaughter")
          ? `&role_key=${selectedSubUser?.key}`
          : ""
      }&date1=${selectedDate1}&date2=${selectedDate2}&page=${page}&page_size=${perPage}`
    );

    setData(response.data.results);
    setTotalRows(response.data.count);
    setLoading(false);
    dispatch(LOADING_END());
  };

  const [page, setPage] = useState(0);
  const handleChangePageM = (event, newPage) => {
    dispatch(LOADING_START());
    setPage(newPage);
    fetchApiData(newPage + 1, textValue);
  };

  // const handlePageChange = (page) => {
  //   fetchApiData(page);
  // };

  const handlePerRowsChange = async (newPerPage, page) => {
    setLoading(true);
    const response = await axios.get(
      `kill_house_request_bar_management/?check&search=filter&value=${textValue}&role=${getRoleFromUrl()}${
        checkPathStartsWith("slaughter")
          ? `&role_key=${selectedSubUser?.key}`
          : ""
      }&date1=${selectedDate1}&date2=${selectedDate2}&page=${page}&page_size=${newPerPage}`
    );

    setData(response.data.results);
    setTotalRows(response.data.count);
    setPerPage(newPerPage);

    setLoading(false);
  };

  useEffect(() => {
    fetchApiData(1);
  }, []);

  // const updateTable = () => {
  //   fetchApiData(1);
  // };
  const btnDisabled = !(
    getRoleFromUrl() === "ProvinceOperator" || getRoleFromUrl() === "CityVet"
  );

  const columns = [
    {
      name: "کدبار",
      selector: (item) => {
        return item.barCode;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "100px"
    },
    {
      name: "خریدار",
      selector: (item) => {
        return `${item.killhouseUser?.name} (${item.killhouseUser?.killHouseOperator?.user?.mobile})`;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "کشتارکن اختصاصی",
      selector: (item) => {
        return item?.killer
          ? `${item?.killer?.name} (${item?.killer?.killHouseOperator?.user?.mobile})`
          : "-";
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "ماشین",
      selector: (item) => {
        return `${item.addCar.driver.typeCar} ${item.addCar.driver.pelak}`;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "100px"
    },
    {
      name: "راننده",
      selector: (item) => {
        return `${item.addCar.driver.driverName} (${item.addCar.driver.driverMobile})`;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "کد بهداشتی حمل و نقل",
      selector: (item) => {
        return item?.trafficCode;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true
      // width: "80px",
    },
    {
      name: "قیمت مرغ زنده‌ی بار",
      selector: (item) => {
        return item?.amount?.toLocaleString() + " ﷼";
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true
      // width: "80px",
    },
    {
      name: "نژاد",
      selector: (item) => {
        return item.poultryRequest.chickenBreed;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "50px"
    },
    {
      name: "تعداد اولیه",
      selector: (item) => {
        return item.quantity?.toLocaleString();
      },
      sortable: true,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "50px"
    },
    {
      name: "وزن اولیه بار (کیلوگرم)",
      selector: (item) => {
        return item?.weightInfo?.weight?.toLocaleString();
      },
      sortable: true,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "70px"
    },
    {
      name: "میانگین وزن اولیه (کیلوگرم)",
      selector: (item) => {
        return item?.weightInfo?.indexWeight?.toLocaleString();
      },
      sortable: true,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "70px"
    },
    {
      name: "قیمت مرغدار",
      selector: (item) => {
        return item?.poultryRequest?.amount?.toLocaleString() + " ﷼";
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "قیمت کشتارگاه",
      selector: (item) => {
        return item?.weightInfo?.killHousePrice?.toLocaleString() + " ﷼";
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "مرغدار",
      selector: (item) => {
        return `${item.poultryRequest?.poultry?.unitName} (${item.poultryRequest.poultry?.user?.mobile})`;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "دامپزشک فارم",
      selector: (item) => {
        return item?.vetFarm?.vet?.user?.fullname
          ? item?.vetFarm?.vet?.user?.fullname +
              `(${item?.vetFarm?.vet?.user?.mobile})`
          : "فاقد دامپزشک";
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "100px"
    },
    {
      name: "کدرهگیری سامانه قرنطینه",
      selector: (item) => {
        return (
          <>
            {getRoleFromUrl() === "VetFarm" ||
            getRoleFromUrl() === "ProvinceOperator" ||
            getRoleFromUrl() === "CityVet" ||
            getRoleFromUrl() === "VetSupervisor" ? (
              <>
                {item?.registerar?.date
                  ? `${format(
                      new Date(item?.registerar?.date),
                      "yyyy/MM/dd"
                    )} ${item?.registerar?.name}`
                  : ""}
              </>
            ) : item?.clearanceCode ? (
              item?.clearanceCode && (
                <CheckCleanceCode clearanceCode={item?.clearanceCode} />
              )
            ) : (
              "-"
            )}
          </>
        );
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "200px"
    },
    {
      name: "محل کشتار",
      selector: (item) => {
        return `${item.killPlace}`;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "شهر",
      selector: (item) => {
        return item.poultryRequest.poultry.address.city.name;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "تاریخ کشتار",
      selector: (item) => {
        return item?.poultryRequest.sendDate
          ? format(new Date(item?.poultryRequest.sendDate), "yyyy/MM/dd")
          : "-";
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "80px"
    },
    {
      name: "کدسفارش کشتار",
      selector: (item) => {
        return item?.poultryRequest.orderCode;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "70px"
    },
    {
      name: "تعداد نهایی",
      selector: (item) => {
        return item.acceptedRealQuantity?.toLocaleString();
      },
      sortable: true,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "50px"
    },
    {
      name: "وزن نهایی بار (کیلوگرم)",
      selector: (item) => {
        return item?.acceptedRealWeight?.toLocaleString();
      },
      sortable: true,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "70px"
    },
    {
      name: "میانگین وزن نهایی (کیلوگرم)",
      selector: (item) => {
        return item?.weightInfo?.finalIndexWeight?.toLocaleString();
      },
      sortable: true,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "70px"
    },
    {
      name: "وضعیت",
      selector: (item) => {
        let state = "";
        if (item.vetState === "accepted") {
          state = "تایید تخلیه";
        } else if (item.vetState === "pending") {
          state = "در انتظار تخلیه";
        }
        return state;
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "90px"
    },
    {
      name: "عملیات",
      selector: (item) => {
        return (
          <Grid key={item.barCode}>
            <Tooltip title="لغو بار">
              <IconButton
                disabled={btnDisabled}
                color="error"
                onClick={() => {
                  dispatch(
                    OPEN_MODAL({
                      title: "لغو بار",
                      content: (
                        <VetFarmCancelBar
                          updateTable={updateTable}
                          killHouseRequestKey={item.key}
                        />
                      )
                    })
                  );
                }}
              >
                <CancelIcon />
              </IconButton>
            </Tooltip>
          </Grid>
        );
      },
      sortable: false,
      wrap: true,
      allowOverflow: true,
      center: true,
      width: "70px"
    }
  ];

  const handleDateChange1 = (date) => {
    setSelectedDate1(date);
  };

  const handleDateChange2 = (date) => {
    setSelectedDate2(date);
  };

  useEffect(() => {
    fetchApiData(1);
  }, [selectedDate1, selectedDate2, perPage, selectedSubUser?.key]);

  const [textValue, setTextValue] = useState("");

  const handleTextChange = (event) => {
    setTextValue(event.target.value);
  };

  useEffect(() => {
    fetchApiData(1);
    dispatch(
      SlaughterBarDashboardService({
        selectedDate1,
        selectedDate2,
        textValue,
        role_key: checkPathStartsWith("slaughter")
          ? selectedSubUser?.key || ""
          : ""
      })
    ).then((r) => {
      setDashboardData(r.payload.data);
    });
  }, [dispatch, selectedDate1, selectedDate2, selectedSubUser?.key]);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setLoading(true);

    try {
      const response = await axios.get(
        `kill_house_request_bar_management/?check&role=${getRoleFromUrl()}${
          checkPathStartsWith("slaughter")
            ? `&role_key=${selectedSubUser?.key}`
            : ""
        }&search=filter&value=${textValue}&date1=${selectedDate1}&date2=${selectedDate2}&page=${1}&page_size=${perPage}`
      );
      setData(response.data.results);
      setTotalRows(response.data.count);
      dispatch(
        SlaughterBarDashboardService({
          selectedDate1,
          selectedDate2,
          textValue,
          role_key: checkPathStartsWith("slaughter")
            ? selectedSubUser?.key || ""
            : ""
        })
      ).then((r) => {
        setDashboardData(r.payload.data);
      });
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      setLoading(false);
    }
  };

  const updateTable = () => {
    fetchApiData(1);
  };

  const tableTitle = (
    <Grid
      container
      alignItems="start"
      justifyContent="space-between"
      gap={2}
      paddingTop={2}
      mb={1}
    >
      <Grid container alignItems="center" gap={SPACING.SMALL}>
        <Typography>مدیریت بارها</Typography>
        <Grid style={{ width: "150px" }}>
          <DatePicker
            label="از تاریخ"
            id="date"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate1}
            onChange={(e) => {
              handleDateChange1(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Grid style={{ width: "150px" }}>
          <DatePicker
            label="تا تاریخ"
            id="date"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate2}
            onChange={(e) => {
              handleDateChange2(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <form onSubmit={handleSubmit}>
          <TextField
            autoComplete="off"
            size="small"
            label="جستجو"
            variant="outlined"
            style={{ width: 250 }}
            onChange={handleTextChange}
          />
          <Button
            // disabled={!textValue}
            type="submit"
            onClick={handleSubmit}
            endIcon={<RiSearchLine />}
          >
            جستجو
          </Button>
        </form>
        <Tooltip title="خروجی اکسل">
          <a
            href={`${
              axios.defaults.baseURL
            }bar_excel/?start=${selectedDate1}&end=${selectedDate2}&key=${userKey}&role=${getRoleFromUrl()}${
              checkPathStartsWith("slaughter")
                ? `&role_key=${selectedSubUser?.key}`
                : ""
            }`}
            rel="noreferrer"
          >
            <Button disabled={!data[0]?.killhouseUser?.key} color="success">
              <RiFileExcel2Fill size={32} />
            </Button>
          </a>
        </Tooltip>
      </Grid>
    </Grid>
  );

  const getItemState = (item) => {
    let state = "";
    if (item.vetState === "accepted") {
      state = "تایید تخلیه";
    } else if (item.vetState === "pending") {
      state = "در انتظار تخلیه";
    }
    return state;
  };

  const columnNames = columns.map((column) => column.name);
  const isMobile = window.innerWidth <= 600;

  useEffect(() => {
    const d = data?.map((item, i) => {
      return [
        item.barCode,
        `${item.killhouseUser?.name} (${item.killhouseUser?.killHouseOperator?.user?.mobile})`,
        item?.killer
          ? `${item?.killer?.name} (${item?.killer?.killHouseOperator?.user?.mobile})`
          : "-",
        `${item.addCar.driver.typeCar} ${item.addCar.driver.pelak}`,
        `${item.addCar.driver.driverName} (${item.addCar.driver.driverMobile})`,
        <VetFarmEditTrafficCode
          key={i}
          updateTable={updateTable}
          killHouseRequestKey={item.key}
          trafficCode={item?.trafficCode}
          isEditable={
            getRoleFromUrl() === "VetFarm" ||
            getRoleFromUrl() === "ProvinceOperator" ||
            getRoleFromUrl() === "KillHouseVet" ||
            getRoleFromUrl() === "KillHouse" ||
            getRoleFromUrl() === "CityVet" ||
            getRoleFromUrl() === "VetSupervisor"
          }
        />,
        item?.amount !== undefined && item?.amount !== null
          ? item?.amount?.toLocaleString() + " ﷼"
          : "-",
        item.poultryRequest.chickenBreed,
        item.quantity?.toLocaleString(),
        item?.weightInfo?.weight?.toLocaleString(),
        item?.weightInfo?.indexWeight?.toLocaleString(),
        item?.poultryRequest?.amount !== undefined &&
        item?.poultryRequest?.amount !== null
          ? item?.poultryRequest?.amount?.toLocaleString() + " ﷼"
          : "-",
        item?.weightInfo?.killHousePrice !== undefined &&
        item?.weightInfo?.killHousePrice !== null
          ? item?.weightInfo?.killHousePrice?.toLocaleString() + " ﷼"
          : "-",
        `${item.poultryRequest?.poultry?.unitName} (${item.poultryRequest.poultry?.user?.mobile})`,
        item?.vetFarm?.vet?.user?.fullname
          ? item?.vetFarm?.vet?.user?.fullname +
            `(${item?.vetFarm?.vet?.user?.mobile})`
          : "فاقد دامپزشک",
        <>
          {getRoleFromUrl() === "VetFarm" ||
          getRoleFromUrl() === "ProvinceOperator" ||
          getRoleFromUrl() === "CityVet" ||
          getRoleFromUrl() === "VetSupervisor" ? (
            <>
              {item?.registerar?.date
                ? `${format(new Date(item?.registerar?.date), "yyyy/MM/dd")} ${
                    item?.registerar?.name
                  }`
                : ""}
            </>
          ) : item?.clearanceCode ? (
            item?.clearanceCode
          ) : (
            "-"
          )}
        </>,
        `${item.killPlace}`,
        item.poultryRequest.poultry.address.city.name,
        item?.poultryRequest.sendDate
          ? format(new Date(item?.poultryRequest.sendDate), "yyyy/MM/dd")
          : "-",
        item?.poultryRequest.orderCode,
        item.acceptedRealQuantity?.toLocaleString(),
        item?.acceptedRealWeight?.toLocaleString(),
        item?.weightInfo?.finalIndexWeight?.toLocaleString(),
        getItemState(item),
        <Grid key={item.barCode}>
          <Tooltip title="لغو بار">
            <IconButton
              disabled={btnDisabled}
              color="error"
              onClick={() => {
                dispatch(
                  OPEN_MODAL({
                    title: "لغو بار",
                    content: (
                      <VetFarmCancelBar
                        updateTable={updateTable}
                        killHouseRequestKey={item.key}
                      />
                    )
                  })
                );
              }}
            >
              <CancelIcon />
            </IconButton>
          </Tooltip>
        </Grid>
      ];
    });

    setDataTableM(d);
  }, [data]);

  const tabs = (
    <Tabs
      scrollButtons="auto"
      variant="scrollable"
      allowScrollButtonsMobile
      value={selectedTab}
      onChange={handleTabChange}
    >
      <Tab label="اطلاعات بارها" value={0} />
      <Tab label="بارهای حذف شده" value={1} />
      <Tab label="اختلاف کشتار" value={2} />
      <Tab label="عدم وصول" value={3} />
    </Tabs>
  );

  return (
    <Grid container direction="column" flexWrap="nowrap" mt={SPACING.SMALL}>
      <Grid container justifyContent="center" mb={SPACING.MEDIUM}>
        {tabs}
      </Grid>

      {selectedTab === 0 && (
        <Grid
          container
          mt={SPACING.MEDIUM}
          alignItems="center"
          justifyContent="center"
        >
          <Grid container mt={2} mb={4} isDashboard xs={12}>
            <ResponsiveTable
              noPagination
              isDashboard
              columns={[
                "تعداد بار",
                "تعداداولیه بار",
                "وزن اولیه بار",
                "میانگین وزن اولیه",
                "تعداد بار های دارای کد قرنطینه",
                "تعداد نهایی بار",
                "وزن نهایی بار",
                "میانگین وزن نهایی "
              ]}
              data={[
                [
                  dashboardData?.count?.toLocaleString(),
                  dashboardData?.firstQuantity?.toLocaleString(),
                  dashboardData?.firstWeight?.toLocaleString(),
                  dashboardData?.firstIndexWeight?.toLocaleString(),
                  dashboardData?.clearanceCodeCount?.toLocaleString(),
                  dashboardData?.acceptedRealQuantity?.toLocaleString(),
                  dashboardData?.acceptedRealWeight?.toLocaleString(),
                  dashboardData?.finalIndexWeight?.toLocaleString()
                ]
              ]}
              title={"خلاصه اطلاعات"}
            />
          </Grid>
          {isMobile ? (
            <Grid container justifyContent="center" gap={SPACING.SMALL}>
              {tableTitle}
              <ResponsiveTable
                title="مدیریت بارها"
                columns={columnNames}
                data={dataTableM}
                handlePageChange={(p) => {
                  handleChangePageM(null, p - 1);
                }}
                totalRows={totalRows}
                page={page + 1}
                perPage={perPage}
                handlePerRowsChange={(val) => {
                  setPage(0);
                  handlePerRowsChange(parseInt(val, 10), 1);
                }}
              />
            </Grid>
          ) : (
            <>
              {tableTitle}
              <ResponsiveTable
                title="مدیریت بارها"
                columns={columnNames}
                data={dataTableM}
                handlePageChange={(p) => {
                  handleChangePageM(null, p - 1);
                }}
                totalRows={totalRows}
                page={page + 1}
                perPage={perPage}
                handlePerRowsChange={(val) => {
                  setPage(0);
                  handlePerRowsChange(parseInt(val, 10), 1);
                }}
              />
            </>
          )}
          {/* <AdvancedTable
              name={
                <Grid container alignItems="center" gap={SPACING.SMALL}>
                  <Grid>
                    <Typography>مدیریت بارها</Typography>
                  </Grid>
                  <Grid>
                    <DatePicker
                      label="از تاریخ"
                      id="date"
                      renderInput={(params) => (
                        <TextField style={{ width: "160px" }} {...params} />
                      )}
                      value={selectedDate1}
                      onChange={(e) => {
                        setSelectedDate1(moment(e).format("YYYY-MM-DD"));
                      }}
                    />
                  </Grid>
                  <Grid>
                    <DatePicker
                      label="تا تاریخ"
                      id="date"
                      renderInput={(params) => (
                        <TextField style={{ width: "160px" }} {...params} />
                      )}
                      value={selectedDate2}
                      onChange={(e) => {
                        setSelectedDate2(moment(e).format("YYYY-MM-DD"));
                      }}
                    />
                  </Grid>
                  {getRoleFromUrl() === "ProvinceOperator" && (
                    <Tooltip title="خروجی اکسل">
                      <a
                        href={`${axios.defaults.baseURL}bar_excel/?start=${selectedDate1}&end=${selectedDate2}`}
                        rel="noreferrer"
                      >
                        <Button color="success">
                          <RiFileExcel2Fill size={32} />
                        </Button>
                      </a>
                    </Tooltip>
                  )}
                </Grid>
              }
              columns={[
                "ردیف",
                "کدبار",
                "دامپزشک فارم",
                "ماشین",
                "راننده",
                // "کد بهداشتی",
                "خریدار",
                "محل کشتار",
                "مرغدار",
                "شهر",
                "تاریخ کشتار",
                "کدسفارش کشتار",
                "نژاد",
                "تعداد",
                "کد بهداشتی حمل و نقل",
                "کدرهگیری سامانه قرنطینه",
                "وضعیت",
                "عملیات",
              ]}
              data={dataTable}
            /> */}
        </Grid>
      )}
      {selectedTab === 1 && (
        <Grid mt={SPACING.MEDIUM}>
          <VetFarmDeletedBars />
        </Grid>
      )}
      {selectedTab === 2 && (
        <Grid mt={SPACING.MEDIUM}>
          <ProvinceBarDifference />
        </Grid>
      )}
      {selectedTab === 3 && (
        <Grid mt={SPACING.MEDIUM}>
          <SlaughterEnterNoneReciept />
        </Grid>
      )}
    </Grid>
  );
};

// const DisabledWrap = ({ children, checked }) => {
//   return <Grid style={{ opacity: !checked ? 0.5 : 1 }}>{children}</Grid>;
// };
