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;

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

const ViewMore = ({
  compactMode,
  onCompactToggle,
  isFullscreen,
  onFullscreenToggle,
  // groupBy,
  // onGroupByChange,
  tableStates,
  onClose,
}: ViewMoreProps) => {
  const { container: fullscreenContainer } = useFullscreenPopoverContainer();
  const { wrapColumns, setWrapColumns } = tableStates;

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

  return (
    <Box sx={{ p: 3, width: 380 }}>
      {/* Header */}
      <Box
        display="flex"
        justifyContent="space-between"
        alignItems="center"
        mb={3}
      >
        <Typography fontSize="18px" fontWeight={400} color="#0C2033">
          View
        </Typography>
        <IconButton size="small" onClick={onClose}>
          <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> */}

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

export default ViewMore;