import { Box, Typography, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
import { useState } from "react";
import FormatIcon2 from "@icons/questionsPage/FormatIcon2";
import FormatIcon1 from "@icons/questionsPage/FormatIcon1";
import CustomButton from "../../../components/CustomButton";
import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";

interface Props {
  Icon: React.ElementType;
  isActive?: boolean;
  onClick: () => void;
}

export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
  const theme = useTheme();
  return (
    <CustomButton
      onClick={onClick}
      variant="outlined"
      startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
      sx={{
        backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
        borderRadius: 0,
        border: "none",
        color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
        p: "7px",
        width: "auto",
        minWidth: 0,
        "& .MuiButton-startIcon": {
          mr: 0,
          ml: 0,
        },
        "&:hover": {
          borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
        },
      }}
    />
  );
}

type Proportions = "oneOne" | "twoOne" | "oneTwo";
type AlignType = "left" | "right";

export default function SettingOpytionsPict() {
  const [proportions, setProportions] = useState<Proportions>("oneOne");
  const [alignType, setAlignType] = useState<AlignType>("left");

  return (
    <>
      <Box sx={{ display: "flex" }}>
        <Box sx={{ padding: "20px" }}>
          <Typography sx={{ marginBottom: "15px" }}>Пропорции</Typography>
          <Box
            sx={{
              display: "flex",
              gap: "10px",
              marginBottom: "20px",
            }}
          >
            <SelectIconButton
              onClick={() => setProportions("oneOne")}
              isActive={proportions === "oneOne"}
              Icon={ProportionsIcon11}
            />
            <SelectIconButton
              onClick={() => setProportions("twoOne")}
              isActive={proportions === "twoOne"}
              Icon={ProportionsIcon21}
            />
            <SelectIconButton
              onClick={() => setProportions("oneTwo")}
              isActive={proportions === "oneTwo"}
              Icon={ProportionsIcon12}
            />
          </Box>
          <Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
          <CustomCheckbox label={"Можно несколько"} />
          <CustomCheckbox label={"Большие картинки"} />
          <CustomCheckbox label={'Вариант "свой ответ"'} />
        </Box>
        <Box sx={{ padding: "20px" }}>
          <Typography sx={{ marginBottom: "15px" }}>Форма</Typography>
          <Box
            sx={{
              display: "flex",
              gap: "10px",
              marginBottom: "20px",
            }}
          >
            <SelectIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={FormatIcon2} />
            <SelectIconButton
              onClick={() => setAlignType("right")}
              isActive={alignType === "right"}
              Icon={FormatIcon1}
            />
          </Box>
          <Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
          <CustomCheckbox label={"Необязательный вопрос"} />
          <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
        </Box>
      </Box>
    </>
  );
}