import {
  BoardIcon,
  CalendarIcon,
  ChartsIcon,
  CloseIcon,
  GalleryIcon,
  ListIcon,
  TableIcon,
  TimeLineIcon,
} from "../assets/svg";
import { Box, Typography, ButtonBase, Grid, IconButton } from "@mui/material";

interface LayoutSelectorProps {
  onSelect: (layout: string) => void;
  selectedLayout?: string;
}

const layoutIcons: Record<string, JSX.Element> = {
  Board: <BoardIcon />,
  Table: <TableIcon />,
  Timeline: <TimeLineIcon />,
  List: <ListIcon />,
  Calendar: <CalendarIcon />,
  Gallery: <GalleryIcon />,
  Charts: <ChartsIcon />,
};

const LayoutSelector = ({ onSelect, selectedLayout }: LayoutSelectorProps) => {
  return (
    <Box
      sx={{
        width: "100%",
        maxWidth: "500px",
        height: "330px",
        // backgroundColor: "#fff",
        // borderRadius: 2,
        // overflow: "hidden",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          px: 3,
          py: 2,
          // borderBottom: "1px solid #eee",
          backgroundColor: "#FBFBFC",
        }}
      >
        <Typography
          variant="h5"
          sx={{ fontWeight: 400, fontSize: 18, color: "#0C2033" }}
        >
          Layouts
        </Typography>
        <IconButton onClick={() => onSelect("close")}>
          <CloseIcon />
        </IconButton>
      </Box>

      {/* Layout Grid */}
      <Grid container spacing={2} sx={{ p: 3 }}>
        {Object.keys(layoutIcons).map((layout) => {
          const isSelected = layout === selectedLayout;
          return (
            <Grid size={3} key={layout}>
              <ButtonBase
                onClick={() => onSelect(layout)}
                sx={{
                  border: isSelected
                    ? "1.5px solid #1E1E1E"
                    : "1.5px solid #E5E7EB",
                  borderRadius: 2,
                  p: 2,
                  width: "100%",
                  height: "100%",
                  flexDirection: "column",
                  backgroundColor: isSelected ? "#fff" : "",
                  transition: "0.3s",
                  boxShadow: isSelected
                    ? "0px 2px 6px rgba(0,0,0,0.06)"
                    : "none",
                }}
              >
                <Box mb={1}>{layoutIcons[layout]}</Box>
                <Typography
                  variant="subtitle1"
                  sx={{
                    color: "#1E1E1E",
                    fontWeight: isSelected ? 400 : 200,
                    opacity: isSelected ? 1 : 0.5,
                  }}
                >
                  {layout}
                </Typography>
              </ButtonBase>
            </Grid>
          );
        })}
      </Grid>
    </Box>
  );
};

export default LayoutSelector;