"use client";

import PoWorkbenchDetailsGridQtyUnitBlock, {
  DETAILS_GRID_QTY_VALUE_FONT_SIZE,
  DETAILS_GRID_QTY_VALUE_ROW_MIN_HEIGHT,
} from "@/components/PoWorkbench/detailsGrid/PoWorkbenchDetailsGridQtyUnitBlock";
import { getPoWorkbenchReceivedQtyTone } from "@/components/PoWorkbench/detailsGrid/poWorkbenchReceivedQtyTone";
import type { PoWorkbenchDetailsGridLineRow } from "@/components/PoWorkbench/types";
import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";

const QTY_ARROW_SLOT_SX = {
  flexShrink: 0,
  minHeight: DETAILS_GRID_QTY_VALUE_ROW_MIN_HEIGHT,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
} as const;

interface PoWorkbenchDetailsGridReceivedQtyCellProps {
  row: PoWorkbenchDetailsGridLineRow;
}

/** Received qty: purchase unit (left) ↔ inventory unit (right). */
export default function PoWorkbenchDetailsGridReceivedQtyCell({
  row,
}: PoWorkbenchDetailsGridReceivedQtyCellProps) {
  const purchaseQtyTone = getPoWorkbenchReceivedQtyTone(
    row.receivedQtyPurchase,
    row.expectedQty,
  );

  return (
    <Stack
      direction="row"
      alignItems="flex-start"
      justifyContent="center"
      spacing={0.75}
      sx={{ width: "100%", minWidth: 0 }}
    >
      <Box sx={{ flex: 1, minWidth: 0 }}>
        <PoWorkbenchDetailsGridQtyUnitBlock
          qty={row.receivedQtyPurchase}
          unitLabel={row.purchaseUnitLabel}
          purchaseQtyTone={purchaseQtyTone}
        />
      </Box>
      <Box sx={QTY_ARROW_SLOT_SX} aria-hidden>
        <CompareArrowsIcon
          sx={{
            fontSize: DETAILS_GRID_QTY_VALUE_FONT_SIZE,
            color: "text.disabled",
          }}
        />
      </Box>
      <Box sx={{ flex: 1, minWidth: 0 }}>
        <PoWorkbenchDetailsGridQtyUnitBlock
          qty={row.receivedQtyInventory}
          unitLabel={row.inventoryUnitLabel}
        />
      </Box>
    </Stack>
  );
}
