import {
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { Grid } from "../../../../components/grid/Grid";
import { Typography } from "@mui/material";
import React, { useEffect } from "react";
import { PropTypes } from "prop-types";
import TimelineItem from "@mui/lab/TimelineItem";
import { SlaughterEnterBarItem } from "../slaughter-enter-bar-item/SlaughterEnterBarItem";
import { format } from "date-fns-jalali";
import { provincePolicyGetWeightRange } from "../../../province/services/province-policy-get-weight-range";
import { useDispatch, useSelector } from "react-redux";
import { checkPathStartsWith } from "../../../../utils/checkPathStartsWith";

export const SlaughterEnterBarWeight = ({ item, updateTable }) => {
  const dispatch = useDispatch();
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const sum = item?.acceptedRealWeight / item?.acceptedRealQuantity;
  const data = [
    [
      item.barCode,
      `${item.poultryRequest?.poultry?.unitName} (${item.poultryRequest.poultry?.user?.mobile})`,
      item.quantity.toLocaleString(),
      item?.acceptedRealQuantity
        ? item?.acceptedRealQuantity?.toLocaleString()
        : "وارد نشده",
      item?.acceptedRealWeight
        ? item?.acceptedRealWeight?.toLocaleString()
        : "وارد نشده",
      sum ? sum.toFixed(2) : "وارد نشده",
      item?.poultryRequest?.age,
      format(new Date(item?.poultryRequest?.sendDate), "yyyy/MM/dd"),
      item?.killer?.name,
    ],
  ];

  useEffect(() => {
    dispatch(
      provincePolicyGetWeightRange({
        role_key: checkPathStartsWith("slaughter")
          ? selectedSubUser?.key || ""
          : "",
      })
    );
  }, [selectedSubUser?.key]);

  return (
    <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
      <TimelineSeparator>
        <TimelineDot color="secondary" />
        <TimelineConnector />
      </TimelineSeparator>
      <Grid container direction="column" flexWrap="nowrap" flex="1">
        <Grid container>
          <Grid>
            <TimelineOppositeContent
              variant="body1"
              fontWeight="bold"
              color="secondary"
            >
              انجام عملیات
            </TimelineOppositeContent>
          </Grid>
          <Grid>
            <TimelineContent color="textSecondary">
              <Typography variant="body2">
                در این مرحله اطلاعات مربوط به وزن و سند باسکول را وارد نمایید.
              </Typography>
            </TimelineContent>
          </Grid>
        </Grid>
        <Grid container direction={"column"} justifyContent={"space-between"}>
          <Grid>
            <SlaughterEnterBarItem
              data={data}
              realNumber={item.quantity}
              reqKey={item.key}
              isRejected={
                item?.assignmentInfo
                  ? item?.assignmentInfo.state === "rejected"
                  : null
              }
              item={item}
              updateTable={updateTable}
            />
          </Grid>
        </Grid>
      </Grid>
    </TimelineItem>
  );
};

SlaughterEnterBarWeight.propTypes = {
  file: PropTypes.object,
};
