import * as React from "react";
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import CheckIcon from "@mui/icons-material/Check";
import Button, { ButtonProps } from "@mui/material/Button";

import SchemaIcon from "@mui/icons-material/Schema";

import TableSchemaDialog from "@/components/Dialog/TableSchemaDialog";
import { fetchTables, fetchColumns } from "@/utils";

import { tablesState, columnsDictState } from "@/recoil/atoms";
import { useRecoilState } from "recoil";

export interface TableSchemaButtonProps {
  show?: boolean;
}

export default function TableSchemaButton(props: TableSchemaButtonProps) {
  const { show } = props;

  const [open, setOpen] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState<string | null>(null);

  const [tables, setTables] = useRecoilState(tablesState);
  const [columnsDict, setColumnsDict] = useRecoilState(columnsDictState);

  React.useEffect(() => {
    const retrieveTables = async () => {
      setErrorMsg(null);
      try {
        const tables = await fetchTables();
        const columns = await fetchColumns(
          tables.map((table) => table.tableName)
        );
        tables && setTables(tables);
        columns && setColumnsDict(columns);
      } catch (error: any) {
        console.error(error);
        setErrorMsg(error.message);
      }
    };

    if (!tables || !columnsDict) {
      retrieveTables();
    }
  }, [tables, columnsDict]);

  const handleClick = () => {
    setOpen(true);
  };

  return (
    <>
      <Button
        variant="outlined"
        aria-label="show table schema"
        onClick={handleClick}
        startIcon={<SchemaIcon fontSize="inherit" />}
        sx={{
          backgroundColor: "#F6F8FC",
          color: "#909eaa",
          borderColor: "#909eaa",
          minWidth: "unset",
          padding: "6px",
          width: "fit-content",
          "& .MuiButton-startIcon": {
            margin: 0,
          },
          "&:hover": {
            backgroundColor: "#F6F8FC",
            borderColor: "#909eaa",
          },
          position: "absolute",
          top: (theme) => theme.spacing(7.6),
          right: (theme) => theme.spacing(1.6),
          opacity: show ? 1 : 0,
          transition: (theme) => theme.transitions.create("opacity"),
        }}
        // {...others}
      ></Button>
      <TableSchemaDialog open={open} setOpen={setOpen} errorMsg={errorMsg} />
    </>
  );
}