import * as React from "react";
import { styled, SxProps } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";

export interface ExplainTableProps {}

// export default function ExplainTable(props: ExplainTableProps) {
//   return <>

//   </>;
// }
const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    // backgroundColor: theme.palette.common.black,
    backgroundColor: "transparent",
    // color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    backgroundColor: "transparent",
    fontSize: 14,
  },
  whiteSpace: "pre",
  border: "none",
  padding: "0 4px",
  fontFamily: "monospace",
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  // "&:nth-of-type(odd)": {
  //   backgroundColor: theme.palette.action.hover,
  // },
  backgroundColor: "transparent",
  border: "none",
  // // hide last border
  // "&:last-child td, &:last-child th": {
  //   border: 0,
  // },
}));

export default function ExplainTable(props: {
  data: { [x: string]: string }[];
  highlightWords?: string[];
  TableSx?: SxProps;
}) {
  const { data, highlightWords, TableSx } = props;

  const [fieldsMemo, rowsMemo] = React.useMemo(() => {
    if (data.length === 0) {
      return [[], []];
    }
    const fields = Object.keys(data[0]).map((name) => ({ name }));
    const rows = data.map((row) => {
      const id = row.id;
      return { id, ...row };
    });
    return [fields, rows];
  }, [data]);

  const shouldHighlight = React.useCallback(
    (text: string) => {
      const defaultWords: string[] = [];
      if (!highlightWords) {
        return defaultWords.some((word) => text.includes(word));
      }
      return highlightWords.some((word) => text.includes(word));
    },
    [highlightWords]
  );

  return (
    <>
      <TableContainer component="div">
        <Table sx={{ minWidth: 700, ...TableSx }}>
          <TableHead>
            <StyledTableRow>
              {fieldsMemo.map((item) => (
                <StyledTableCell key={item.name}>{item.name}</StyledTableCell>
              ))}
            </StyledTableRow>
          </TableHead>
          <TableBody>
            {rowsMemo.map((row) => (
              <StyledTableRow key={row.id}>
                {fieldsMemo.map((item) => (
                  <StyledTableCell
                    key={row.id + item.name}
                    sx={{
                      color: shouldHighlight(row[item.name as keyof typeof row])
                        ? "primary.main"
                        : "inherit",
                    }}
                  >
                    {row[item.name as keyof typeof row]}
                  </StyledTableCell>
                ))}
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}