import { useState } from "react";
import {
  Box,
  Button,
  IconButton,
  SxProps,
  Theme,
  Typography,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import { SwitchSetting } from "./SwichResult";

import Info from "@icons/Info";

import listChecks from "@icons/listChecks.svg";
import ShareNetwork from "@icons/ShareNetwork.svg";
import ArrowCounterClockWise from "@icons/ArrowCounterClockWise.svg";

const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
  {
    sx: {
      backgroundColor: "#7E2AEA",
      color: "white",
      width: "237px",
      height: "44px",
      border: "1px solid #9A9AAF",
    },
    title: "До формы контактов",
    type: "toContactForm",
  },
  {
    sx: {
      backgroundColor: "#F2F3F7",
      color: "#9A9AAF",
      width: "266px",
      height: "44px",
      border: "1px solid #9A9AAF",
    },
    title: "После формы контактов",
    type: "afterСontactForm",
  },
  {
    sx: {
      color: "#9A9AAF",
      backgroundColor: "#F2F3F7",
      width: "233px",
      height: "44px",
      border: "1px solid #9A9AAF",
    },
    title: "Отправить на E-mail",
    type: "e-mail",
  },
];

export const SettingForm = () => {
  const [activeIndex, setActiveIndex] = useState<number>(0);
  const [typeActive, setTypeActive] = useState<string>("toContactForm");
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));

  const active = (index: number, type: string) => {
    setActiveIndex(index);
    setTypeActive(type);
  };

  return (
    <Box component="section" sx={{ maxWidth: "796px" }}>
      <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
        <Typography sx={{ pr: "10px" }} variant="h5">
          Настройки результатов
        </Typography>
        <Info />
      </Box>
      <Box
        sx={{
          height: "100%",
          bgcolor: "#FFFFFF",
          borderRadius: "12px",
          p: "30px 20px",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            mb: "20px",
          }}
        >
          <Typography component="p" 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",
            flexDirection: isSmallMonitor ? "column" : "row",
            justifyContent: "space-between",
            gap: "20px",
            mb: "20px",
          }}
        >
          {buttonSetting.map(({ sx, title, type }, index) => (
            <Button
              disableRipple
              onClick={() => active(index, type)}
              key={title}
              sx={{
                ...sx,
                bgcolor: activeIndex === index ? " #7E2AEA" : "#F2F3F7",
                color: activeIndex === index ? " white" : "#9A9AAF",
                minWidth: isSmallMonitor ? "300px" : "auto",
              }}
            >
              {title}
            </Button>
          ))}
        </Box>
        {typeActive === "e-mail" ? (
          <SwitchSetting
            icon={listChecks}
            text="Показывать несколько результатов"
          />
        ) : (
          <>
            <SwitchSetting
              icon={listChecks}
              text="Показывать несколько результатов"
            />
            <SwitchSetting icon={ShareNetwork} text="Поделиться результатами" />
            <SwitchSetting
              icon={ArrowCounterClockWise}
              text="Кнопка `Пройти тест заново`"
            />
          </>
        )}
      </Box>
      <Box
        sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
      >
        <Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
          Создайте результат
        </Typography>
        <Button
          disableRipple
          sx={{
            ml: "auto",
            height: "19px",
            color: "#7E2AEA",
            textDecoration: "underline",
            fontSize: "16px",

            "&:hover": {
              background: "none",
              textDecoration: "underline",
            },
          }}
          variant="text"
        >
          Свернуть всё
        </Button>
      </Box>
    </Box>
  );
};