import React, { useEffect, useState } from "react";
import { Button, TextField, Tooltip } from "@mui/material";
import axios from "axios";
import { RiFileExcel2Fill, RiSearchLine } from "react-icons/ri";
import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { Grid } from "../../../../components/grid/Grid";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { useDispatch, useSelector } from "react-redux";
import { provinceJahadGetRancherInfoDashboardService } from "../../services/province-jahad-get-rancher-dashbored";
import { ProvinceJahadRancherOperations } from "../province-jahad-rancher-operations/ProvinceJahadRancherOperations";
import { ProvinceJahadEditRancher } from "../province-jahad-edit-rancher/ProvinceJahadEditRancher";

export const ProvinceJahadRanchers = () => {
  const dispatch = useDispatch();
  const handleTextChange = (event) => {
    setTextValue(event.target.value);
  };

  const userKey = useSelector((state) => state.userSlice.userProfile.key);

  const [data, setData] = useState([]);
  const [totalRows, setTotalRows] = useState(0);
  const [perPage, setPerPage] = useState(10);
  const [textValue, setTextValue] = useState("");
  const [page, setPage] = useState(1);
  const [tableData, setTableData] = useState([]);
  const [dashboardData, setDashboardData] = useState([]);

  const fetchApiData = async (page) => {
    let response;
    dispatch(LOADING_START());
    response = await axios.get(
      `/LiveStock/rancher/rancher-view/?search=filter&value=${textValue}&role=${getRoleFromUrl()}&page=${page}&page_size=${perPage}`
    );

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

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

  const handlePerRowsChange = (perRows) => {
    setPerPage(perRows);
    setPage(1);
  };

  const updateTable = () => {
    fetchApiData(page !== 0 ? page : 1);
  };
  const getDashboardData = () => {
    dispatch(
      provinceJahadGetRancherInfoDashboardService({
        search: textValue,
      })
    ).then((r) => {
      setDashboardData(r.payload.data);
    });
  };
  useEffect(() => {
    getDashboardData();
  }, []);

  useEffect(() => {
    const d = data?.map((item, i) => {
      return [
        page === 1 ? i + 1 : i + perPage * (page - 1) + 1,
        item?.type === "rural" ? "روستایی" : "صنعتی",
        item?.name,
        item?.herdCode,
        item?.epidemiologicalCode,
        item?.postalCode,
        item?.unitId,
        item?.herdName,
        item?.nationalId,
        // item?.user?.fullname,
        item?.mobile,
        item?.contractorCode || "-",
        item?.city,
        item?.registeringUser || "-",
        item?.type === "rural" ? "-" : item?.dhiAmount?.toLocaleString(),
        <ProvinceJahadRancherOperations
          key={i}
          item={item}
          updateTable={updateTable}
          getDashboardData={getDashboardData}
        />,
      ];
    });

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

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

  const handleSubmit = async (event) => {
    event.preventDefault();
    dispatch(LOADING_START());

    try {
      const response = await axios.get(
        `/LiveStock/rancher/rancher-view/?search=filter&value=${textValue}&role=${getRoleFromUrl()}&page=${page}&page_size=${perPage}`
      );
      setData(response.data.results);
      setTotalRows(response.data.count);
      dispatch(
        provinceJahadGetRancherInfoDashboardService({
          search: textValue,
        })
      ).then((r) => {
        setDashboardData(r.payload.data);
      });
      dispatch(LOADING_END());
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center" gap={2}>
      <Grid
        container
        xs={12}
        justifyContent="start"
        alignItems="center"
        gap={2}
      >
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            dispatch(
              DRAWER({
                right: true,
                top: false,
                content: <ProvinceJahadEditRancher updateTable={updateTable} />,
                title: "ایجاد دامدار",
              })
            );
          }}
        >
          ایجاد دامدار
        </Button>
        <Grid>
          <form onSubmit={handleSubmit}>
            <TextField
              id="outlined-basic"
              size="small"
              label="جستجو"
              variant="outlined"
              style={{ width: 250 }}
              onChange={handleTextChange}
            />
            <Button
              // disabled={!textValue}
              type="submit"
              onClick={handleSubmit}
              endIcon={<RiSearchLine />}
            >
              جستجو
            </Button>
          </form>
        </Grid>
        <Tooltip title="خروجی اکسل">
          <a
            href={`${
              axios.defaults.baseURL
            }live-stock-ranchers-excel/?role=${getRoleFromUrl()}&key=${userKey}`}
            rel="noreferrer"
          >
            <Button color="success">
              <RiFileExcel2Fill size={32} />
            </Button>
          </a>
        </Tooltip>
      </Grid>
      <Grid container mt={2} mb={4} isDashboard xs={12}>
        <ResponsiveTable
          noPagination
          isDashboard
          columns={[
            "تعداد دامداران",
            "تعداد گوسفندان",
            "تعداد بزها ",
            "تعداد گاوها",
            "تعداد اسب ها ",
            "تعداد شترها",
            "تعداد دام سبک",
            "تعداد دام سنگین",
            "تعداد دام DHI",
            "مجموع دام ها",
          ]}
          data={[
            [
              dashboardData?.rancherCount?.toLocaleString(),
              dashboardData?.sheep?.toLocaleString(),
              dashboardData?.goat?.toLocaleString(),
              dashboardData?.cow?.toLocaleString(),
              dashboardData?.horse?.toLocaleString(),
              dashboardData?.camel?.toLocaleString(),
              dashboardData?.lightLivestock?.toLocaleString(),
              dashboardData?.heavyLivestock?.toLocaleString(),
              dashboardData?.dhiAmount?.toLocaleString(),
              dashboardData?.liveStocksCount?.toLocaleString(),
            ],
          ]}
          title={"خلاصه اطلاعات"}
        />
      </Grid>
      <ResponsiveTable
        data={tableData}
        columns={[
          "ردیف",
          "مجوز فعالیت",
          "نام دامداری",
          "کد گله",
          "کد اپیدمیولوژیک",
          "کد پستی",
          "شناسه یکتا",
          "نام گله",
          "کد ملی دامدار",
          // "نام دامدار",
          "موبایل",
          "کد پیمانکار",
          "شهرستان",
          "کاربر ثبت کننده",
          // "دام سبک",
          // "دام سنگین",
          // "جمع کل گله",
          // "گاو",
          // "گوسفند",
          // "بز",
          // "شتر",
          // "اسب",
          "تعداد دام DHI",
          "جزئیات",
        ]}
        handlePageChange={handlePageChange}
        totalRows={totalRows}
        page={page}
        perPage={perPage}
        handlePerRowsChange={handlePerRowsChange}
        title=" دامداران "
      />
    </Grid>
  );
};