import React, { useEffect, useState } from 'react';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import {
  Box,
  Button,
  Card,
  Checkbox,
  IconButton,
  Menu,
  MenuItem,
  Paper,
  Stack,
  styled,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableFooter,
  TableHead,
  TablePagination,
  TableRow,
  TableSortLabel,
  Typography,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';

interface ITableColumns {
  title: string;
  width: number;
  isSort: boolean;
  key: string;
}

type ITable = {
  items: { [key: string]: any }[];
  tableColumns: ITableColumns[];
  total: number;
  rowsPerPage: number;
  page: number;
  orderBy: string;
  order: string;
  onPageChange: (event: unknown, newPage: number) => void;
  onRowsPerPageChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  handleSort: (sortField: any, sort: string) => void;
  isSelectable: boolean;
  handleSelected?: (selected: string[]) => void;
  refreshData: boolean;
};

export const CustomTable = (props: ITable) => {
  const {
    items = [],
    tableColumns = [],
    total = items.length,
    rowsPerPage = 10,
    page = 0,
    orderBy = '',
    order = 'desc',
    onPageChange = () => {},
    onRowsPerPageChange = () => {},
    handleSort = (sortField, sort) => {
      return { sortField, sort };
    },
    isSelectable = false,
    handleSelected = (selected) => {
      return selected;
    },
    refreshData = false,
  } = props;
  const [anchorEl, setAnchorEl] = useState<null | any>(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [selected, setSelected] = useState<string[]>([]);

  useEffect(() => {
    if (refreshData) {
      setSelected([]);
      handleSelected([]);
    }
  }, [refreshData]);

  const handleMenuClick = (index: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log(event.currentTarget, 'Current target');
    setAnchorEl(event.currentTarget);
    setCurrentIndex(index);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleRequestSort = (event: React.MouseEvent<unknown>, property: string) => {
    const isAsc = orderBy === property && order === 'asc';
    console.log(isAsc, 'IS ASC');
    // handleSort(event, isAsc ? 'desc' : 'asc')
    handleSort(event, property);
    console.log(event, property, 'EVENT SORT');
  };

  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.checked) {
      const newSelected = items?.map((n) => n._id);
      setSelected(newSelected);
      handleSelected(newSelected);
      return;
    }
    setSelected([]);
    handleSelected([]);
  };

  const isSelected = (id: string) => selected.indexOf(id) !== -1;

  const handleClick = (event: React.MouseEvent<unknown>, id: string) => {
    console.log(id, 'ID');
    const selectedIndex = selected.indexOf(id);
    let newSelected: string[] = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
    }
    setSelected(newSelected);
    handleSelected(newSelected);
  };
  console.log(order, 'ORDER');

  console.log(selected, 'selected');

  return (
    <Card>
      <Box sx={{ minWidth: { lg: 800, md: 800, sm: 500 } }}>
        <TableContainer sx={{ maxHeight: '60vh', minHeight: '60vh' }}>
          <Table stickyHeader aria-label="sticky table" sx={{ minWidth: 650 }}>
            <TableHead>
              <TableRow>
                {isSelectable && (
                  <TableCell padding="checkbox">
                    <Checkbox
                      color="primary"
                      indeterminate={selected.length > 0 && selected.length < items?.length}
                      checked={items?.length > 0 && selected.length === items?.length}
                      onChange={handleSelectAllClick}
                      inputProps={{
                        'aria-label': 'select all items',
                      }}
                    />
                  </TableCell>
                )}
                {tableColumns.map((el, i) => {
                  const action = el.title === 'Actions';
                  return (
                    <TableCell
                      key={i}
                      style={{
                        minWidth: el.width ? el.width + 'px' : '100px',
                        position: action ? 'sticky' : 'sticky',
                        right: action ? 0 : 'initial',
                        boxShadow: action ? '-4px 2px 5px 0px #00000005' : 'initial',
                      }}
                    >
                      {el?.isSort ? (
                        <TableSortLabel
                          active={orderBy === el?.key}
                          direction={orderBy === el.key ? (order as 'desc' | 'asc') : 'asc'}
                          onClick={(e) => handleRequestSort(e, el?.key)}
                          style={{ justifyContent: 'space-between', width: '100%' }}
                        >
                          {el?.title}
                          {orderBy === el?.key ? (
                            <Box component="span" sx={visuallyHidden}>
                              {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                            </Box>
                          ) : null}
                        </TableSortLabel>
                      ) : (
                        el?.title
                      )}
                    </TableCell>
                  );
                })}
              </TableRow>
            </TableHead>
            <TableBody>
              {items.length === 0 ? (
                <TableRow>
                  <Box
                    sx={{
                      width: '100%',
                      position: 'absolute',
                      top: 0,
                      bottom: 0,
                      margin: 'auto',
                      zIndex: 1,
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      maxHeight: '40%',
                      color: 'text.secondary',
                      fontSize: '1rem',
                      fontWeight: 500
                    }}
                  >
                    No Records Found
                  </Box>
                </TableRow>
              ) : (
                items.map((item, index) => {
                  const labelId = `enhanced-table-checkbox-${index}`;
                  const isItemSelected = isSelected(item._id);
                  console.log(item, 'ITEM');
                  return (
                    <TableRow hover key={index}>
                      {isSelectable && (
                        <TableCell padding="checkbox">
                          <Checkbox
                            onClick={(event) => handleClick(event, item._id)}
                            color="primary"
                            checked={isItemSelected}
                            inputProps={{
                              'aria-labelledby': labelId,
                            }}
                          />
                        </TableCell>
                      )}
                      {item?.row?.map((el: any, i: number) => {
                        return (
                          <TableCell key={i}>
                            {
                              // el.length > 30 ? `${el.substring(0, 30)} ...` : el
                              el
                            }
                          </TableCell>
                        );
                      })}
                      {/* {
                                                    item.actions.map((el: any, i: number) => {
                                                        return (
                                                            <TableCell key={i} sx={{ position: 'sticky', right: 0, bgcolor: '#fff', boxShadow: "-4px 2px 5px 0px #00000005" }}>

                                                                <IconButton
                                                                    aria-label="more"
                                                                    id={`long-button-${index}`}
                                                                    aria-controls={Boolean(anchorEl) && currentIndex ? 'long-menu' : undefined}
                                                                    aria-expanded={Boolean(anchorEl) && currentIndex ? 'true' : undefined}
                                                                    aria-haspopup="true"
                                                                    onClick={handleMenuClick(index)}
                                                                    sx={{ width: '100%' }}
                                                                    disableRipple
                                                                    disableFocusRipple
                                                                    disableTouchRipple
                                                                >
                                                                    <MoreVertIcon />
                                                                </IconButton>
                                                                <Menu

                                                                    id={`long-button-${index}`}
                                                                    MenuListProps={{
                                                                        'aria-labelledby': 'long-button',
                                                                    }}
                                                                    anchorEl={anchorEl}
                                                                    open={Boolean(anchorEl) && currentIndex === index}
                                                                    onClose={handleClose}
                                                                    PaperProps={{
                                                                        style: {
                                                                            maxHeight: 150,
                                                                            width: '20ch',
                                                                        },
                                                                    }}
                                                                    anchorOrigin={{
                                                                        vertical: 'top',
                                                                        horizontal: 'left',
                                                                    }}
                                                                    transformOrigin={{
                                                                        vertical: 'top',
                                                                        horizontal: 'left',
                                                                    }}
                                                                >


                                                                    <MenuItem onClick={() => {
                                                                        // console.log("CLICKED")
                                                                        el.func();
                                                                        handleClose()
                                                                    }

                                                                    }>
                                                                        {el.title}
                                                                    </MenuItem>


                                                                </Menu>
                                                            </TableCell>

                                                        )
                                                    })
                                                } */}

                      <TableCell
                        // key={i}
                        sx={{
                          position: 'sticky',
                          right: 0,
                          bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#32383e' : '#fff'),
                          boxShadow: '-4px 2px 5px 0px #00000005',
                          fontSize: '12px',
                          borderBottom: '0px',
                        }}
                      >
                        <IconButton
                          aria-label="more"
                          id={`long-button-${index}`}
                          aria-controls={Boolean(anchorEl) && currentIndex ? 'long-menu' : undefined}
                          aria-expanded={Boolean(anchorEl) && currentIndex ? 'true' : undefined}
                          aria-haspopup="true"
                          onClick={handleMenuClick(index)}
                          sx={{ width: '100%' }}
                          disableRipple
                          disableFocusRipple
                          disableTouchRipple
                        >
                          <MoreVertIcon sx={{ fontSize: '18px' }} />
                        </IconButton>
                        <Menu
                          id={`long-button-${index}`}
                          MenuListProps={{
                            'aria-labelledby': 'long-button',
                          }}
                          anchorEl={anchorEl}
                          open={Boolean(anchorEl) && currentIndex === index}
                          onClose={handleClose}
                          PaperProps={{
                            style: {
                              maxHeight: 150,
                              width: '20ch',
                            },
                          }}
                          anchorOrigin={{
                            vertical: 'top',
                            horizontal: 'left',
                          }}
                          transformOrigin={{
                            vertical: 'top',
                            horizontal: 'left',
                          }}
                        >
                          {item.actions.map((el: any, i: number) => {
                            return (
                              <MenuItem
                                key={i}
                                disabled={el.disabled}
                                onClick={() => {
                                  // console.log("CLICKED")
                                  el.func();
                                  handleClose();
                                }}
                                sx={{ fontSize: '12px' }}
                              >
                                {el.title}
                              </MenuItem>
                            );
                          })}
                        </Menu>
                      </TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </TableContainer>
        <Box display={'flex'} justifyContent={{ lg: 'left', md: 'left', sm: 'left', xs: 'center' }}>
          <TablePagination
            rowsPerPageOptions={[50, 100, 500]}
            colSpan={3}
            count={total}
            rowsPerPage={rowsPerPage}
            page={page}
            component="div"
            onPageChange={onPageChange}
            onRowsPerPageChange={onRowsPerPageChange}
            sx={{
              justifyContent: 'center',
              '.mui-thy5cr-MuiTablePagination-selectLabel': {
                fontSize: { xs: '12px', sm: 'initial' },
              },
              '.mui-uuvyfz-MuiTablePagination-displayedRows': {
                fontSize: { xs: '12px', sm: 'initial' },
              },
              '.mui-78c6dr-MuiToolbar-root-MuiTablePagination-toolbar': {
                paddingLeft: { xs: '8px', sm: 'initial' },
                paddingRight: { xs: '8px', sm: 'initial' },
              },
              '.mui-rkaa8y-MuiInputBase-root-MuiTablePagination-select': {
                marginRight: '16px',
                fontSize: { xs: '12px', sm: 'initial' },
              },
            }}
          />
        </Box>
      </Box>
    </Card>
  );
};