"use client"

import { Box, Card, CardActionArea, CardContent, CardHeader, Grid, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material";
import { useRouter } from "next/navigation";
import { useCallback, useMemo, useState } from "react";
import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";
import { EscalationResult } from "@/app/api/escalation";
import { Column } from "@/components/SearchResults";
import SearchResults from "@/components/SearchResults/SearchResults";
import { arrayToDateString } from "@/app/utils/formatUtil";

export type IQCItems = {
  id: number;
  poId: number;
  polId: number;
  stockInLineId: number;
  poCode: string
  itemName: string
  escalationLevel: string
  reason: string
};

type Props = {
  items: EscalationResult[];
};

const EscalationLogTable: React.FC<Props> = ({
  items
}) => {
  const { t } = useTranslation("dashboard");
  const CARD_HEADER = t("stock in escalation list")

  const pathname = usePathname();
  const router = useRouter();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const navigateTo = useCallback(
    (item: EscalationResult) => {
      setSelectedId(item.id);
      console.log(pathname)
      router.replace(`/po/edit?id=${item.poId}&polId=${item.polId}&stockInLineId=${item.stockInLineId}`);
    },
    [router, pathname]
  );

  const onRowClick = useCallback((item: EscalationResult) => {
    router.push(`/po/edit?id=${item.poId}&selectedIds=${item.poId}&polId=${item.polId}&stockInLineId=${item.stockInLineId}`);
  }, [router])

  // const handleKeyDown = useCallback(
  //   (e: React.KeyboardEvent, item: EscalationResult) => {
  //     if (e.key === 'Enter' || e.key === ' ') {
  //       e.preventDefault();
  //       navigateTo(item);
  //     }
  //   },
  //   [navigateTo]
  // );

  const columns = useMemo<Column<EscalationResult>[]>(
    () => [
      {
        name: "handler",
        label: t("Responsible for handling colleagues")
      },
      {
        name: "acceptedQty",
        label: t("Received Qty"),
        align: "right",
        headerAlign: "right"
      },
      {
        name: "purchaseUomDesc",
        label: t("Purchase UoM")
      },
      {
        name: "dnDate",
        label: t("DN Date"),
        renderCell: (params) => {
          return params.dnDate ? arrayToDateString(params.dnDate) : "N/A"
        }
      },
      {
        name: "qcTotalCount",
        label: t("QC Completed Count"),
        align: "right",
        headerAlign: "right"
      },
      {
        name: "qcFailCount",
        label: t("QC Fail Count"),
        align: "right",
        headerAlign: "right"
      },
      {
        name: "reason",
        label: t("Reason"),
      },
    ], [])

  {/* return (
    <TableContainer component={Paper}>
      <Table aria-label="Two column navigable table" size="small">
        <TableHead>
          <TableRow>
            <TableCell>{t("Purchase Order Code")}</TableCell>
            <TableCell>{t("Item Name")}</TableCell>
            <TableCell>{t("Escalation Level")}</TableCell>
            <TableCell>{t("Reason")}</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {items.map((item) => {
            const selected = selectedId === item.id;
            return (
              <TableRow
                key={item.id}
                hover
                selected={selected}
                onClick={() => navigateTo(item)}
                // onKeyDown={(e) => handleKeyDown(e, item)}
                tabIndex={0}
                sx={{ cursor: 'pointer' }}
                // aria-label={`${item.name}, ${item.detail}`}
              >
                <TableCell component="th" scope="row">
                  {item.poCode}
                </TableCell>
                <TableCell>{item.itemName}</TableCell>
                <TableCell>{item.escalationLevel}</TableCell>
                <TableCell>{item.reason}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
        );*/}
  return (
    <SearchResults
      onRowClick={onRowClick}
      items={items}
      columns={columns}
      isAutoPaging={false}
    />
  )
};

export default EscalationLogTable;