import { Box, IconButton, TextField, Typography } from "@mui/material";
import { SelectIconButton } from "../Questions/OptionsPicture/settingOpytionsPict";
import { useState } from "react";

import FormatIcon2 from "@icons/questionsPage/FormatIcon2";
import FormatIcon1 from "@icons/questionsPage/FormatIcon1";
import Info from "@icons/Info";
import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";
import CustomCheckbox from "@ui_kit/CustomCheckbox";

export const ResultListForm = () => {
  const [alignType, setAlignType] = useState<"left" | "right">("left");
  const [proportions, setProportions] = useState<
    "oneOne" | "twoOne" | "oneTwo"
  >("oneOne");
  return (
    <Box sx={{ maxWidth: "796px", mb: "30px" }}>
      <Box
        sx={{
          height: "100%",
          bgcolor: "#FFFFFF",
          borderRadius: "12px",
          p: "30px 20px",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            mb: "20px",
          }}
        >
          <Typography sx={{ color: "#9A9AAF" }}>
            Показывать результат
          </Typography>
          <IconButton>
            <svg
              width="30"
              height="30"
              viewBox="0 0 30 30"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="30" height="30" rx="6" fill="#EEE4FC" />
              <path
                d="M22.5 11.25L15 18.75L7.5 11.25"
                stroke="#7E2AEA"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </IconButton>
        </Box>
        <Box sx={{ display: "flex" }}>
          <Box>
            <Typography sx={{ mb: "14px" }}>Форма</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>
          </Box>

          <Box sx={{ ml: "40px" }}>
            <Typography sx={{ mb: "14px" }}>Пропорции</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>
          </Box>
        </Box>

        <Box sx={{ mb: "20px" }}>
          <Typography sx={{ pb: "14px" }} component="p">
            Заголовок
          </Typography>
          <TextField
            placeholder="Ваши результаты"
            fullWidth
            sx={{
              alignItems: "center",
              "& .MuiInputBase-root": {
                backgroundColor: "#F2F3F7",
                width: "100%",
                height: "48px",
                borderRadius: "10px",
              },
            }}
            inputProps={{
              sx: {
                borderRadius: "10px",
                fontSize: "18px",
                lineHeight: "21px",
                py: 0,
              },
            }}
          />
        </Box>
        <Box sx={{ mb: "20px" }}>
          <Typography sx={{ pb: "14px" }} component="p">
            Текст
          </Typography>
          <TextField
            placeholder="Ваши результаты"
            fullWidth
            sx={{
              alignItems: "center",
              "& .MuiInputBase-root": {
                backgroundColor: "#F2F3F7",
                width: "100%",
                height: "69px",
                borderRadius: "10px",
              },
            }}
            inputProps={{
              sx: {
                borderRadius: "10px",
                fontSize: "18px",
                lineHeight: "21px",
                py: 0,
              },
            }}
          />
        </Box>
        <Box>
          <Typography sx={{ pb: "14px" }} component="p">
            Кнопка на результате
          </Typography>
          <TextField
            placeholder="Ваши результаты"
            fullWidth
            sx={{
              alignItems: "center",
              "& .MuiInputBase-root": {
                backgroundColor: "#F2F3F7",
                width: "100%",
                height: "48px",
                borderRadius: "10px",
              },
            }}
            inputProps={{
              sx: {
                borderRadius: "10px",
                fontSize: "18px",
                lineHeight: "21px",
                py: 0,
              },
            }}
          />
        </Box>
        <Box sx={{ mt: "20px", display: "flex", alignItems: "center" }}>
          <CustomCheckbox label={'Кнопка "Не знаю, что выбрать"'} />
          <Info />
        </Box>
      </Box>
    </Box>
  );
};