"use client";
import dayjs from "dayjs";
import arraySupport from "dayjs/plugin/arraySupport";
import StyledDataGrid from "../StyledDataGrid";
import {
  Dispatch,
  SetStateAction,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from "react";
import { GridColDef } from "@mui/x-data-grid";
import { CircularProgress, Grid, Typography } from "@mui/material";
import { ByItemsSummary } from "@/app/api/pickorder";
import { useTranslation } from "react-i18next";

dayjs.extend(arraySupport);

interface Props {
  rows: ByItemsSummary[] | undefined;
  setRows: Dispatch<SetStateAction<ByItemsSummary[] | undefined>>;
}

const ConsolidatePickOrderItemSum: React.FC<Props> = ({ rows, setRows }) => {
  console.log(rows);
  const { t } = useTranslation("pickOrder");

  const columns = useMemo<GridColDef[]>(
    () => [
      {
        field: "name",
        headerName: "name",
        flex: 1,
        renderCell: (params) => {
          console.log(params.row.name);
          return params.row.name;
        },
      },
      {
        field: "requiredQty",
        headerName: "requiredQty",
        flex: 1,
        renderCell: (params) => {
          console.log(params.row.requiredQty);
          const requiredQty = params.row.requiredQty ?? 0;
          return `${requiredQty} ${params.row.uomDesc}`;
        },
      },
      {
        field: "availableQty",
        headerName: "availableQty",
        flex: 1,
        renderCell: (params) => {
          console.log(params.row.availableQty);
          const availableQty = params.row.availableQty ?? 0;
          return `${availableQty} ${params.row.uomDesc}`;
        },
      },
    ],
    []
  );
  return (
    <Grid
      container
      rowGap={1}
      // direction="column"
      alignItems="center"
      justifyContent="center"
    >
      <Grid item xs={12}>
        <Typography variant="h5" marginInlineEnd={2}>
          {t("Items Included")}
        </Typography>
      </Grid>
      <Grid item xs={12}>
        {!rows ? (
          <CircularProgress size={40} />
        ) : (
          <StyledDataGrid
            sx={{ maxHeight: 450 }}
            rows={rows}
            columns={columns}
          />
        )}
      </Grid>
    </Grid>
  );
};

export default ConsolidatePickOrderItemSum;