import {
  // Divider,
  // Paper,
  Table,
  TableBody,
  TableCell,
  TableRow,
  TextField,
  Typography,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment/moment";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { provinceGetCaseStatusService } from "../../services/province-get-case-status";

export const ProvinceCaseStatusComponent = () => {
  const dispatch = useDispatch();
  const { provinceGetCaseStatus } = useSelector((state) => state.provinceSlice);

  const [selectedDate, setSelectedDate] = useState(
    moment(new Date()).format("YYYY-MM-DD")
  );

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  useEffect(() => {
    dispatch(provinceGetCaseStatusService(selectedDate));
  }, [selectedDate]);

  return (
    <Grid
      container
      direction="column"
      alignItems="start"
      width="1300px"
      overflowX="scroll"
      style={{ overflowX: "scroll" }}
    >
      <Grid>
        <DatePicker
          label="تاریخ"
          id="date"
          renderInput={(params) => <TextField {...params} />}
          value={selectedDate}
          onChange={(e) => {
            handleDateChange(moment(e).format("YYYY-MM-DD"));
          }}
        />
      </Grid>
      <Grid>
        <Grid>
          {provinceGetCaseStatus?.map((item, i) => {
            // city state color
            let cityStateColor;
            if (item?.cityState?.state === "pending") {
              cityStateColor = "#ff7410";
            }
            if (item?.cityState?.state === "accept") {
              cityStateColor = "green";
            }
            if (item?.cityState?.state === "reject") {
              cityStateColor = "red";
            }

            // province state color
            let provinceStateColor;
            if (item?.provinceState?.state === "pending") {
              provinceStateColor = "#ff7410";
            }
            if (item?.provinceState?.state === "accept") {
              provinceStateColor = "green";
            }
            if (item?.provinceState?.state === "reject") {
              provinceStateColor = "red";
            }

            return (
              <Table
                className="my-table"
                key={i}
                style={{ borderTop: "1px solid", marginTop: "10px" }}
              >
                <TableBody>
                  <TableRow
                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                  >
                    <TableCell
                      component="th"
                      scope="row"
                      className="no-border-flex-table"
                    >
                      <Grid style={{ marginBottom: "2px" }}>
                        <Typography
                          variant="button"
                          textAlign="center"
                          style={{
                            borderBottom: "1px solid gray",
                            paddingBottom: "2px",
                          }}
                        >
                          مرغدار
                        </Typography>
                      </Grid>
                      <Grid container direction="column">
                        <Typography variant="caption">
                          {item?.poultry?.poultryName} (
                          {item?.poultry?.userFullname})
                        </Typography>
                        <Typography variant="caption">
                          تلفن: {item?.poultry?.userMobile}
                        </Typography>
                        <Typography variant="caption">
                          {item?.poultry?.poultryRequestQuantity.toLocaleString()}{" "}
                          قطعه
                        </Typography>
                        <Typography variant="caption" color="blue">
                          دامپزشک فارم: {item?.poultry?.vetFarmName}
                        </Typography>
                        <Typography variant="caption" color="blue">
                          تلفن دامپزشک: {item?.poultry?.vetFarmMobile}
                        </Typography>
                      </Grid>
                    </TableCell>
                    <TableCell
                      component="th"
                      scope="row"
                      className="no-border-flex-table"
                    >
                      <Grid style={{ marginBottom: "2px" }}>
                        <Typography
                          variant="button"
                          textAlign="center"
                          style={{
                            borderBottom: "1px solid gray",
                            paddingBottom: "2px",
                          }}
                        >
                          شهرستان
                        </Typography>
                      </Grid>
                      <Grid container direction="column">
                        <Typography variant="caption" color={cityStateColor}>
                          {item?.cityState?.operatorCity} (
                          {item?.cityState?.operatorName})
                        </Typography>
                        <Typography variant="caption" color={cityStateColor}>
                          تلفن: {item?.cityState?.operatorMobile}
                        </Typography>
                      </Grid>
                    </TableCell>
                    <TableCell
                      component="th"
                      scope="row"
                      className="no-border-flex-table"
                    >
                      <Grid style={{ marginBottom: "2px" }}>
                        <Typography
                          variant="button"
                          textAlign="center"
                          style={{
                            borderBottom: "1px solid gray",
                            paddingBottom: "2px",
                          }}
                        >
                          استان
                        </Typography>
                      </Grid>
                      <Grid container direction="column">
                        <Typography
                          variant="caption"
                          color={provinceStateColor}
                        >
                          {item?.provinceState?.provinceOperatorProvinc} (
                          {item?.provinceState?.provinceOperatorName})
                        </Typography>
                        <Typography
                          variant="caption"
                          color={provinceStateColor}
                        >
                          تلفن: {item?.provinceState?.provinceOperatorMobile}
                        </Typography>
                      </Grid>
                    </TableCell>
                    <TableCell
                      component="th"
                      scope="row"
                      className="loop-kill-request no-border-flex-table"
                    >
                      {item?.provinceKillRequests?.map((killRequest, i) => {
                        // killhouse state color
                        let killHouseStateColor;
                        if (killRequest?.state === "pending") {
                          killHouseStateColor = "#ff7410";
                        }
                        if (killRequest?.state === "accepted") {
                          killHouseStateColor = "green";
                        }
                        if (killRequest?.state === "rejected") {
                          killHouseStateColor = "red";
                        }
                        return (
                          <TableRow
                            className="row-kill-request"
                            key={i}
                            sx={{
                              "&:last-child td, &:last-child th": { border: 0 },
                            }}
                          >
                            <TableCell component="th" scope="row">
                              <Grid style={{ marginBottom: "2px" }}>
                                <Typography
                                  variant="button"
                                  textAlign="center"
                                  style={{
                                    borderBottom: "1px solid gray",
                                    paddingBottom: "2px",
                                  }}
                                >
                                  خریدار
                                </Typography>
                              </Grid>
                              <Grid container direction="column">
                                <Typography
                                  variant="caption"
                                  color={killHouseStateColor}
                                >
                                  {killRequest?.buyerName}
                                </Typography>
                                <Typography
                                  variant="caption"
                                  color={killHouseStateColor}
                                >
                                  {killRequest?.quantity} قطعه
                                </Typography>
                                <Typography
                                  variant="caption"
                                  color={killHouseStateColor}
                                >
                                  تلفن: {killRequest?.buyerMobile}
                                </Typography>
                              </Grid>
                            </TableCell>
                            <TableCell component="th" scope="row">
                              <Grid style={{ marginBottom: "2px" }}>
                                <Typography
                                  variant="button"
                                  textAlign="center"
                                  style={{
                                    borderBottom: "1px solid gray",
                                    paddingBottom: "2px",
                                  }}
                                >
                                  راننده
                                </Typography>
                              </Grid>
                              {killRequest?.killHouseRequests?.map((car, i) => {
                                let carStateColor = "";
                                if (car?.clearanceCode) {
                                  carStateColor = "green";
                                } else {
                                  carStateColor = "red";
                                }
                                return (
                                  <Grid
                                    container
                                    direction="column"
                                    key={i}
                                    style={{ whiteSpace: "nowrap" }}
                                  >
                                    <Typography
                                      variant="caption"
                                      color={carStateColor}
                                    >
                                      {car?.driverName} / تعداد{" "}
                                      {car?.quantity.toLocaleString()} /
                                      کدبهداشتی {car?.trafficCode} / کدترخیص{" "}
                                      {car?.clearanceCode
                                        ? car?.clearanceCode
                                        : "در انتظار"}
                                    </Typography>
                                  </Grid>
                                );
                              })}
                            </TableCell>
                            <TableCell component="th" scope="row">
                              <Grid style={{ marginBottom: "2px" }}>
                                <Typography
                                  variant="button"
                                  textAlign="center"
                                  style={{
                                    borderBottom: "1px solid gray",
                                    paddingBottom: "2px",
                                  }}
                                >
                                  دامپزشک کشتارگاه
                                </Typography>
                              </Grid>
                              {killRequest?.killHouseRequests?.map((car, i) => {
                                let vetStateColor = "";
                                if (car?.vetState === "pending") {
                                  vetStateColor = "#ff7410";
                                } else if (car?.vetState === "accepted") {
                                  vetStateColor = "green";
                                } else {
                                  vetStateColor = "red";
                                }
                                return (
                                  <Grid
                                    container
                                    direction="column"
                                    key={i}
                                    style={{ whiteSpace: "nowrap" }}
                                  >
                                    <Typography
                                      variant="caption"
                                      color={vetStateColor}
                                    >
                                      {car?.killHouseVetName
                                        ? car?.killHouseVetName
                                        : "ندارد"}{" "}
                                      /{" "}
                                      {car?.killHouseVetMobile
                                        ? car.killHouseVetMobile
                                        : "ندارد"}
                                    </Typography>
                                  </Grid>
                                );
                              })}
                            </TableCell>
                            <TableCell component="th" scope="row">
                              <Grid style={{ marginBottom: "2px" }}>
                                <Typography
                                  variant="button"
                                  textAlign="center"
                                  style={{
                                    borderBottom: "1px solid gray",
                                    paddingBottom: "2px",
                                  }}
                                >
                                  اطلاعات بار
                                </Typography>
                              </Grid>
                              {killRequest?.killHouseRequests
                                ?.filter((car) => car.bar)
                                ?.map((car, i) => {
                                  // city state color
                                  let barStateColor;
                                  if (car?.bar?.state === "pending") {
                                    barStateColor = "#ff7410";
                                  }
                                  if (car?.bar?.state === "accepted") {
                                    barStateColor = "green";
                                  }
                                  if (car?.bar?.state === "rejected") {
                                    barStateColor = "red";
                                  }
                                  return (
                                    <Grid
                                      container
                                      direction="column"
                                      key={i}
                                      style={{ whiteSpace: "nowrap" }}
                                    >
                                      <Typography
                                        variant="caption"
                                        color={barStateColor}
                                      >
                                        <Grid
                                          container
                                          gap={1}
                                          style={{ flexFlow: "nowrap" }}
                                        >
                                          <a
                                            href={
                                              car?.bar?.carWeightWithLoadImage
                                            }
                                          >
                                            <img
                                              src={
                                                car?.bar?.carWeightWithLoadImage
                                              }
                                              width="20"
                                              height="20"
                                              alt=""
                                              style={{ borderRadius: "4px" }}
                                            />
                                          </a>
                                          وزن با بار:{" "}
                                          {car?.bar?.carWeightWithLoad?.toLocaleString()}{" "}
                                          /
                                          <a
                                            href={
                                              car?.bar
                                                ?.carWeightWithoutLoadImage
                                            }
                                          >
                                            <img
                                              src={
                                                car?.bar
                                                  ?.carWeightWithoutLoadImage
                                              }
                                              width="20"
                                              height="20"
                                              alt=""
                                              style={{ borderRadius: "4px" }}
                                            />
                                          </a>
                                          وزن بدون بار:{" "}
                                          {car?.bar?.carWeightWithoutLoad?.toLocaleString()}{" "}
                                          / وزن خالص:
                                          {car?.bar?.netWeight.toLocaleString()}{" "}
                                          / تعداد واقعی:
                                          {car?.bar?.realQuantity.toLocaleString()}
                                        </Grid>
                                      </Typography>
                                    </Grid>
                                  );
                                })}
                            </TableCell>
                            <TableCell component="th" scope="row">
                              <Grid style={{ marginBottom: "2px" }}>
                                <Typography
                                  variant="button"
                                  textAlign="center"
                                  style={{
                                    borderBottom: "1px solid gray",
                                    paddingBottom: "2px",
                                  }}
                                >
                                  فاکتور استان
                                </Typography>
                              </Grid>
                              {killRequest?.killHouseRequests
                                ?.filter((car) => car.provinceFactor)
                                ?.map((car, i) => {
                                  // city state color
                                  let provinceFactorStateColor;
                                  if (
                                    car?.killHouseFactor?.state === "pending"
                                  ) {
                                    provinceFactorStateColor = "#ff7410";
                                  }
                                  if (
                                    car?.killHouseFactor?.state === "accepted"
                                  ) {
                                    provinceFactorStateColor = "green";
                                  }
                                  if (
                                    car?.killHouseFactor?.state === "rejected"
                                  ) {
                                    provinceFactorStateColor = "red";
                                  }
                                  return (
                                    <Grid
                                      container
                                      direction="column"
                                      key={i}
                                      style={{ whiteSpace: "nowrap" }}
                                    >
                                      <Typography
                                        variant="caption"
                                        color={provinceFactorStateColor}
                                      >
                                        فی:{" "}
                                        {car?.provinceFactor?.factorFee.toLocaleString()}
                                        {" / "}
                                        وزن:{" "}
                                        {car?.provinceFactor?.totalWeight.toLocaleString()}
                                        {" / "}
                                        مبلغ کل:{" "}
                                        {car?.provinceFactor?.totalPrice.toLocaleString()}
                                        <a
                                          href={
                                            car?.killHouseFactor?.factorImage
                                          }
                                        >
                                          <img
                                            src={
                                              car?.killHouseFactor?.factorImage
                                            }
                                            width="20"
                                            height="20"
                                            alt=""
                                            style={{ borderRadius: "4px" }}
                                          />
                                        </a>
                                        شناسه پرداخت:
                                        {car?.killHouseFactor?.paymentCode}
                                      </Typography>
                                    </Grid>
                                  );
                                })}
                            </TableCell>
                          </TableRow>
                        );
                      })}
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            );
          })}
        </Grid>
      </Grid>
    </Grid>
  );
};
