import React from "react";
import {
  Popover,
  Typography,
  Box,
  MenuItem,
  Select,
  IconButton,
  Switch as MUISwitch,
} from "@mui/material";
import { CloseIcon, ViewMoreIcon } from "../../assets/svg";
import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
import { CraftTableOptionsProps } from "../../types/table-options";

interface ViewMorePopoverProps {
  compactMode: boolean;
  onCompactToggle: (value: string) => void;
  isFullscreen: boolean;
  onFullscreenToggle: () => void;
  groupBy: string;
  onGroupByChange: (value: string) => void;
  tableStates: CraftTableOptionsProps;
}

const ViewMore = ({
  compactMode,
  onCompactToggle,
  isFullscreen,
  onFullscreenToggle,
  // groupBy,
  // onGroupByChange,
  tableStates,
}: ViewMorePopoverProps) => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const open = Boolean(anchorEl);
  const { container: fullscreenContainer } = useFullscreenPopoverContainer();

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const { wrapColumns, setWrapColumns } = tableStates;

  const onWrapCellToggle = () => {
    setWrapColumns((prev: Record<string, boolean>) => ({
      all_wrap: !prev["all_wrap"],
    }));
  };

  return (
    <>
      <div onClick={handleClick}>
        <ViewMoreIcon />
      </div>

      <Popover
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        container={fullscreenContainer}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        transformOrigin={{ vertical: "top", horizontal: "left" }}
        PaperProps={{
          sx: {
            mt: 2,
            padding: 3,
            width: 380,
            borderRadius: 1,
            boxShadow: 4,
          },
        }}
      >
        <Box
          display="flex"
          justifyContent="space-between"
          alignItems="center"
          px={2}
          py={2}
          sx={{
            backgroundColor: "#F9FAFB",
            // borderBottom: "1px solid #E0E0E0",
            // borderTopLeftRadius: 4,
            // borderTopRightRadius: 4,
            margin: "-24px -24px 24px -24px",
          }}
        >
          <Typography fontSize="18px" fontWeight={400} color="#0C2033">
            View
          </Typography>
          <IconButton size="small" onClick={handleClose}>
            <CloseIcon />
          </IconButton>
        </Box>

        {/* Wrap Cell */}
        <Box
          display="flex"
          justifyContent="space-between"
          alignItems="center"
          mb={2}
        >
          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
            Wrap Cell
          </Typography>
          <MUISwitch
            checked={wrapColumns?.all_wrap || false}
            onChange={onWrapCellToggle}
          />
        </Box>

        {/* List View */}
        <Box
          display="flex"
          justifyContent="space-between"
          alignItems="center"
          mb={2}
        >
          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
            List View
          </Typography>
          <Select
            size="small"
            value={compactMode ? "Compact" : "Comfy"}
            onChange={(e) => onCompactToggle(e.target.value)}
            sx={{
              minWidth: 120,
              fontWeight: 400,
              color: "#000",
              fontSize: "13px",
            }}
            MenuProps={{
              container: fullscreenContainer,
              disablePortal: false,
              PaperProps: {
                style: {
                  zIndex: 1500,
                },
              },
            }}
          >
            <MenuItem value="Comfy">Comfy</MenuItem>
            <MenuItem value="Compact">Compact</MenuItem>
          </Select>
        </Box>

        {/* Group By */}
        {/* <Box
          display="flex"
          justifyContent="space-between"
          alignItems="center"
          mb={2}
        >
          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
            Group By
          </Typography>
          <Select
            size="small"
            value={groupBy}
            onChange={(e) => onGroupByChange(e.target.value)}
            sx={{
              minWidth: 120,
              fontWeight: 400,
              color: "#000",
              fontSize: "13px",
            }}
            MenuProps={{
              container: fullscreenContainer,
              disablePortal: false,
              PaperProps: {
                style: {
                  zIndex: 1500,
                },
              },
            }}
          >
            <MenuItem value="None">None</MenuItem>
            <MenuItem value="Status">Status</MenuItem>
            <MenuItem value="Owner">Owner</MenuItem>
          </Select>
        </Box> */}

        {/* Fullscreen */}
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
            Fullscreen
          </Typography>
          <MUISwitch checked={isFullscreen} onChange={onFullscreenToggle} />
        </Box>
      </Popover>
    </>
  );
};

export default ViewMore;