import { Button, IconButton } from "@mui/material";
import PrintIcon from "@mui/icons-material/Print";
import { Grid } from "../../../../components/grid/Grid";
import { formatJustDate } from "../../../../utils/formatTime";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import { SPACING } from "../../../../data/spacing";

export const ProvinceAutoAllocatedView = ({
  dataTable,
  item,
  setIsSingleView,
}) => {
  const sumOfAllocationQuantity =
    Array.isArray(dataTable) &&
    dataTable?.reduce((total, item) => {
      return (
        total +
        item.allocations?.reduce((allocationTotal, allocation) => {
          return allocationTotal + allocation.allocationQuantity;
        }, 0)
      );
    }, 0);

  const sumAllocationsSum =
    Array.isArray(dataTable) &&
    dataTable?.reduce((total, item) => {
      return total + item.allocationsSum;
    }, 0);

  const sumOfKillRequests =
    Array.isArray(dataTable) &&
    dataTable?.reduce((total, item) => {
      return total + item.poultryQuantity;
    }, 0);

  return (
    <Grid container alignItems="start" my={SPACING.SMALL}>
      <table className="auto-allocation-table">
        <tr>
          <th>
            <Grid>
              <Button
                color="error"
                onClick={() => {
                  setIsSingleView(null);
                }}
              >
                <KeyboardArrowRightIcon />
                بازگشت به بایگانی
              </Button>
            </Grid>
          </th>
          <th>کد تخصیص خودکار {item.allocationOrderCode}</th>
          <th>تاریخ تخصیص {formatJustDate(item.allocationDate)}</th>
        </tr>
      </table>
      <table className="auto-allocation-table">
        <tr>
          <th>ردیف</th>
          <th>نام واحد (مرغدار)</th>
          <th>تلفن مرغدار</th>
          <th>آدرس</th>
          <th>تعداد درخواست کشتار</th>
          <th>مانده قابل تخصیص</th>
          <th>ماهیت خریدار</th>
          <th>نام خریدار</th>
          <th>تلفن خریدار</th>
          <th>آدرس</th>
          <th>محل کشتار</th>
          <th>تعداد تخصیص</th>
          <th>جمع مرغ تخصیصی</th>
          <th>سهم درصد</th>
          <th>حواله مرغدار</th>
          <th>حواله خریدار</th>
        </tr>
        {dataTable?.map((poultryRequestItem, j) => {
          // const sumOfAllocation = poultryRequestItem.allocations?.reduce(
          //   (total, item) => {
          //     return total + item.allocationQuantity;
          //   },
          //   0
          // );
          return poultryRequestItem?.allocations?.map((slaughter, i) => {
            const reaminForAllocation =
              poultryRequestItem?.poultryQuantity -
              poultryRequestItem?.allocationsSum;

            // if (reaminForAllocation < 0) {
            //   reaminForAllocation = (
            //     <Typography color={"red"}>{reaminForAllocation}</Typography>
            //   );
            // }

            return (
              <tr key={i}>
                {!i && (
                  <td rowSpan={poultryRequestItem?.allocations.length}>
                    {j + 1}
                  </td>
                )}

                {!i && (
                  <td rowSpan={poultryRequestItem?.allocations.length}>
                    {poultryRequestItem?.poultryName}
                  </td>
                )}

                {!i && (
                  <td rowSpan={poultryRequestItem?.allocations.length}>
                    {poultryRequestItem?.poultryMobile}
                  </td>
                )}

                {!i && (
                  <td rowSpan={poultryRequestItem?.allocations.length}>
                    {poultryRequestItem?.poultryAddress}
                  </td>
                )}

                {!i && (
                  <td rowSpan={poultryRequestItem?.allocations.length}>
                    {poultryRequestItem?.poultryQuantity?.toLocaleString()}
                  </td>
                )}

                {!i && (
                  <td rowSpan={poultryRequestItem?.allocations.length}>
                    {/* {poultryRequestItem?.poultryRemainQuantity} */}
                    {reaminForAllocation.toLocaleString()}
                  </td>
                )}

                <td>{slaughter?.type ? "کشتارکن" : "کشتارگاه"}</td>

                <td>{slaughter?.buyerName}</td>
                <td>{slaughter?.buyerMobile}</td>
                <td>{slaughter?.buyerAddress}</td>
                <td>{slaughter?.KillingPlace}</td>
                <td>{slaughter?.allocationQuantity}</td>
                {!i && (
                  <td rowSpan={poultryRequestItem?.allocations.length}>
                    {poultryRequestItem?.allocationsSum?.toLocaleString()}
                    {/* {sumOfAllocation} */}
                  </td>
                )}
                <td>
                  %
                  {(
                    (slaughter?.allocationQuantity / sumOfAllocationQuantity) *
                    100
                  ).toFixed(2)}
                </td>
                {!i && (
                  <td rowSpan={poultryRequestItem?.allocations.length}>
                    <IconButton disabled={true} color="primary">
                      <PrintIcon />
                    </IconButton>
                  </td>
                )}
                <td>
                  <IconButton disabled={true} color="primary">
                    <PrintIcon />
                  </IconButton>
                </td>
              </tr>
            );
          });
        })}
        <tr>
          <td colSpan={"11"}>جمع کل</td>
          <td>{sumOfAllocationQuantity.toLocaleString()}</td>
          <td>{sumAllocationsSum.toLocaleString()}</td>
          <td>
            {((sumOfAllocationQuantity / sumOfKillRequests) * 100).toFixed(2)}
          </td>
        </tr>
      </table>
    </Grid>
  );
};
