import { Box, Button, Typography, useTheme } from "@mui/material";
import { SettingForm } from "./SettingForm";
import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
import { ResultListForm } from "./ResultListForm";
import CustomWrapper from "@ui_kit/CustomWrapper";
import Plus from "@icons/Plus";
import Info from "@icons/Info";
import IconPlus from "@icons/IconPlus";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import React from "react";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";

export const Setting = () => {
  const { listQuizes, updateQuizesList } = quizStore();
  const params = Number(useParams().quizId);
  const handleNext = () => {
    updateQuizesList(params, { step: listQuizes[params].step + 1 });
  };
  const theme = useTheme();
  return (
    <Box sx={{ maxWidth: "796px" }}>
      <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
        <Typography sx={{ pr: "10px" }} variant="h5">
          Настройки результатов
        </Typography>
        <Info />
        <Button
          disableRipple
          sx={{
            ml: "auto",
            width: "73px",
            height: "19px",
            color: "#7E2AEA",
            textDecoration: "underline",
            fontSize: "16px",
            "&:hover": {
              background: "none",
              textDecoration: "underline",
            },
          }}
          variant="text"
        >
          Свернуть
        </Button>
      </Box>
      <CustomWrapper sx={{ mt: "30px" }} text="Показывать результат" />
      <CustomWrapper sx={{ mt: "30px" }} text="Настройки почты" />
      <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>
      <CustomWrapper result={true} text="Показывать результат" />
      <Box
        sx={{
          display: "flex",
          width: "100%",
          alignItems: "center",
          columnGap: "10px",
        }}
      >
        <Box
          sx={{
            boxSizing: "border-box",
            width: "100%",
            height: "1px",
            backgroundPosition: "bottom",
            backgroundRepeat: "repeat-x",
            backgroundSize: "20px 1px",
            backgroundImage:
              "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
          }}
        />
        <IconPlus />
      </Box>
      <CustomWrapper result={true} text="Настройки почты" />
      <Box sx={{ pt: "30px", display: "flex", alignItems: "center" }}>
        <Plus />
        <Typography component="div" sx={{ ml: "auto" }}>
          <Button
            variant="outlined"
            sx={{ padding: "10px 20px", borderRadius: "8px" }}
          >
            <ArrowLeft />
          </Button>
          <Button variant="contained" sx={{ ml: "10px" }} onClick={handleNext}>
            Настроить форму
          </Button>
        </Typography>
      </Box>

      <SettingForm />
      <ResultListForm />
      <DescriptionForm />
    </Box>
  );
};