import * as React from "react";
import { styled } 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";

import type { FieldInfo as FieldInfoType } from "@/pages/api/sql/run";

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    // backgroundColor: theme.palette.common.black,
    backgroundColor: "transparent !important",
    borderTop: "none !important",
    borderLeft: "none !important",
    borderRight: "none !important",
    borderBottom: "none !important",
    // color: theme.palette.common.white,
    fontWeight: "bold",
    fontSize: 12,
  },
  [`&.${tableCellClasses.body}`]: {
    backgroundColor: "transparent !important",
    fontSize: 14,
    border: "none !important",
  },
  whiteSpace: "nowrap",
  padding: "0 4px",
  fontFamily: "inherit",
}));

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

export default function SQLResultTable(props: {
  fields: FieldInfoType[];
  rows: { [x: string]: any }[];
}) {
  const { fields, rows } = props;

  return (
    <TableContainer
      component={Paper}
      sx={{
        backgroundColor: "transparent",
        border: "none",
        boxShadow: "none",
        maxHeight: "300px",
      }}
    >
      <Table aria-label="simple table">
        <TableHead>
          <StyledTableRow>
            {fields.map((field) => (
              <StyledTableCell key={field.name}>{field.name}</StyledTableCell>
            ))}
          </StyledTableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <StyledTableRow
              key={row.repo_id}
              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
            >
              {fields.map((field) => (
                <StyledTableCell key={field.name}>
                  {row[field.name as keyof typeof row]}
                </StyledTableCell>
              ))}
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}