import { IconButton, Tooltip, Box, Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import VisibilityIcon from "@mui/icons-material/Visibility";
import { useDispatch, useSelector } from "react-redux";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { tradePanelGetDetails } from "../../services/trade-panel-get-details";
import { checkPathStartsWith } from "../../../../utils/checkPathStartsWith";

export const TradepanelDetails = ({ item, details_key }) => {
  const dispatch = useDispatch();
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );

  const handleOpenModal = async () => {
    try {
      const response = await dispatch(
        tradePanelGetDetails({
          hatching_key: details_key,
          role_key: checkPathStartsWith("province")
            ? selectedSubUser?.key || ""
            : "",
        })
      );

      if (response.payload?.data) {
        dispatch(
          OPEN_MODAL({
            title: "جزئیات کشتار",
            content: (
              <Box sx={{ p: 2 }}>
                <Typography variant="body1" gutterBottom>
                  <strong>کمترین سن کشتار:</strong>{" "}
                  {response.payload.data.minAge} روز
                </Typography>
                <Typography variant="body1" gutterBottom>
                  <strong>بیشترین سن کشتار:</strong>{" "}
                  {response.payload.data.maxAge} روز
                </Typography>
                <Typography variant="body1" gutterBottom>
                  <strong>سن فعلی:</strong> {response.payload.data.nowAge} روز
                </Typography>
                <Typography variant="body1" gutterBottom>
                  <strong>میانگین وزن در کشتارهای گذشته:</strong>{" "}
                  {response.payload.data.avgWeight} کیلوگرم
                </Typography>
                <Typography variant="body1" gutterBottom>
                  <strong>میانگین افت:</strong>{" "}
                  {response.payload.data.avgWeightLosse}%
                </Typography>
                <Typography variant="body1" gutterBottom>
                  <strong>عملکرد در تحویل بار به کشتار:</strong>{" "}
                  {response.payload.data.receiveBarsPercent}%
                </Typography>
              </Box>
            ),
          })
        );
      } else {
        dispatch(
          OPEN_MODAL({
            title: "خطا",
            content: <Typography>دیتایی دریافت نشد!</Typography>,
          })
        );
      }
    } catch (error) {
      dispatch(
        OPEN_MODAL({
          title: "خطا",
          content: <Typography>مشکل در دریافت دیتا از سرور</Typography>,
        })
      );
    }
  };

  return (
    <Grid container>
      <Tooltip title="مشاهده جزئیات">
        <IconButton color="primary" onClick={handleOpenModal}>
          <VisibilityIcon />
        </IconButton>
      </Tooltip>
    </Grid>
  );
};
