"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, GridInputRowSelectionModel } from "@mui/x-data-grid";
import { Box, CircularProgress, Grid, Typography } from "@mui/material";
import { PickOrderResult } from "@/app/api/pickOrder";
import { useTranslation } from "react-i18next";

dayjs.extend(arraySupport);

interface Props {
  consoCode: string;
  rows: Omit<PickOrderResult, "items">[] | undefined;
  setRows: Dispatch<
    SetStateAction<Omit<PickOrderResult, "items">[] | undefined>
  >;
  revertIds: GridInputRowSelectionModel;
  setRevertIds: Dispatch<SetStateAction<GridInputRowSelectionModel>>;
}

const ConsolidatePickOrderSum: React.FC<Props> = ({
  consoCode,
  rows,
  setRows,
  revertIds,
  setRevertIds,
}) => {
  const { t } = useTranslation("pickOrder");
  const columns = useMemo<GridColDef[]>(
    () => [
      {
        field: "code",
        headerName: "code",
        flex: 0.6,
      },

      {
        field: "pickOrderLines",
        headerName: "items",
        flex: 1,
        renderCell: (params) => {
          console.log(params);
          const pickOrderLine = params.row.pickOrderLines as any[];
          return (
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                maxHeight: 100,
                overflowY: "scroll",
                scrollbarWidth: "none", // For Firefox
                "&::-webkit-scrollbar": {
                  display: "none", // For Chrome, Safari, and Opera
                },
              }}
            >
              {pickOrderLine.map((item, index) => (
                <Grid
                  sx={{ mt: 1 }}
                  key={index}
                >{`${item.itemName} x ${item.requiredQty} ${item.uomDesc}`}</Grid> // Render each name in a span
              ))}
            </Box>
          );
        },
      },
    ],
    [],
  );

  return (
    <Grid
      container
      rowGap={1}
      // direction="column"
      alignItems="center"
      justifyContent="center"
    >
      <Grid item xs={12}>
        <Typography variant="h5" marginInlineEnd={2}>
          {t("Pick Order Included")}
        </Typography>
      </Grid>
      <Grid item xs={12}>
        {!rows ? (
          <CircularProgress size={40} />
        ) : (
          <StyledDataGrid
            sx={{ maxHeight: 450 }}
            checkboxSelection
            rowSelectionModel={revertIds}
            onRowSelectionModelChange={(newRowSelectionModel) => {
              setRevertIds(newRowSelectionModel);
            }}
            getRowHeight={(params) => {
              return 100;
            }}
            rows={rows}
            columns={columns}
          />
        )}
      </Grid>
    </Grid>
  );
};

export default ConsolidatePickOrderSum;