import Box from "@mui/material/Box";
import Table from "@mui/material/Table";
import Tooltip from "@mui/material/Tooltip";
import { useTheme } from "@mui/material/styles";
import TableBody from "@mui/material/TableBody";
import IconButton from "@mui/material/IconButton";
import TableContainer from "@mui/material/TableContainer";
import { tableCellClasses } from "@mui/material/TableCell";
import { tablePaginationClasses } from "@mui/material/TablePagination";

import Iconify from "@/shared/components/iconify";
import { TableProps, TableSelectedAction } from "@/components/table/index";
import { TableNoData } from "@/components/table/index";
import { TableHeadCustom } from "@/components/table/index";
import { TablePaginationCustom } from "@/components/table/index";
import { Project } from "@/contexts/types/Project";

import ProjectTableRow from "./project-table-row";

import { LoadingScreen } from "@/shared/components/loading-screen";

// ----------------------------------------------------------------------

const TABLE_HEAD = [
  { id: "name", label: "Name", sortable: true },
  { id: "type", label: "Type", width: 120, sortable: true },
  { id: "startDate", label: "Start Date", width: 140, sortable: true },
  { id: "endDate", label: "End Date", width: 140, sortable: true },
  { id: "Participants", label: "Participants", align: "right", width: 140, sortable: false },
  { id: "", width: 88, sortable: false },
];

// ----------------------------------------------------------------------

type Props = {
  table: TableProps;
  notFound: boolean;
  dataFiltered: Project[];
  onOpenConfirm: VoidFunction;
  onOpenConfirm1: VoidFunction;
  projectsLoading: boolean;
  onDeleteRow: (id: number) => void;
  onArchiveRow: (id: number) => void;
};

export default function ProjectTable({
  table,
  notFound,
  onDeleteRow,
  dataFiltered,
  onOpenConfirm,
  onOpenConfirm1,
  onArchiveRow,
  projectsLoading,
}: Props) {
  const theme = useTheme();

  const {
    dense,
    page,
    order,
    orderBy,
    rowsPerPage,
    //
    selected,
    onSelectRow,
    onSelectAllRows,
    //
    onSort,
    onChangeDense,
    onChangePage,
    onChangeRowsPerPage,
  } = table;

  return (
    <>
      {/* {projectsLoading ? */}
      <Box
        sx={{
          position: "relative",
          m: theme.spacing(-2, -3, -3, -3),
        }}
      >
        <TableSelectedAction
          dense={dense}
          numSelected={selected.length}
          rowCount={dataFiltered.length}
          onSelectAllRows={(checked: any) =>
            onSelectAllRows(
              checked,
              dataFiltered.map((row) => row.id.toString())
            )
          }
          action={
            <>
              <Tooltip title="Share">
                <IconButton color="primary" onClick={onOpenConfirm1}>
                  <Iconify icon="clarity:archive-solid" />
                </IconButton>
              </Tooltip>

              <Tooltip title="Delete">
                <IconButton color="primary" onClick={onOpenConfirm}>
                  <Iconify icon="solar:trash-bin-trash-bold" />
                </IconButton>
              </Tooltip>
            </>
          }
          sx={{
            pl: 1,
            pr: 2,
            top: 16,
            left: 24,
            right: 24,
            width: "auto",
            borderRadius: 1.5,
          }}
        />

        <TableContainer
          sx={{
            p: theme.spacing(0, 3, 3, 3),
          }}
        >
          <Table
            size={dense ? "small" : "medium"}
            sx={{
              minWidth: 960,
              borderCollapse: "separate",
              borderSpacing: "0 16px",
            }}
          >
            <TableHeadCustom
              order={order}
              orderBy={orderBy}
              headLabel={TABLE_HEAD}
              rowCount={dataFiltered.length}
              numSelected={selected.length}
              onSort={onSort}
              onSelectAllRows={(checked) =>
                onSelectAllRows(
                  checked,
                  dataFiltered.map((row) => row.id.toString())
                )
              }
              sx={{
                [`& .${tableCellClasses.head}`]: {
                  "&:first-of-type": {
                    borderTopLeftRadius: 12,
                    borderBottomLeftRadius: 12,
                  },
                  "&:last-of-type": {
                    borderTopRightRadius: 12,
                    borderBottomRightRadius: 12,
                  },
                },
              }}
            />

            <TableBody>
              {dataFiltered
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((row) => (
                  <ProjectTableRow
                    key={row.id}
                    row={row}
                    selected={selected.includes(row.id.toString())}
                    onSelectRow={() => onSelectRow(row.id.toString())}
                    onDeleteRow={() => onDeleteRow(row.id)}
                    onArchiveRow={() => onArchiveRow(row.id)}
                  />
                ))}

              <TableNoData
                notFound={notFound}
                sx={{
                  m: -2,
                  borderRadius: 1.5,
                  border: `dashed 1px ${theme.palette.divider}`,
                }}
              />
            </TableBody>
          </Table>
        </TableContainer>
      </Box>
      {/* : <LoadingScreen />}    */}
      <TablePaginationCustom
        count={dataFiltered.length}
        page={page}
        rowsPerPage={rowsPerPage}
        onPageChange={onChangePage}
        onRowsPerPageChange={onChangeRowsPerPage}
        dense={dense}
        onChangeDense={onChangeDense}
        sx={{
          [`& .${tablePaginationClasses.toolbar}`]: {
            borderTopColor: "transparent",
          },
        }}
      />
    </>
  );
}
