import IconPlus from "@icons/IconPlus";
import Info from "@icons/Info";
import Plus from "@icons/Plus";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import { Box, Button, Typography, Paper, FormControl, TextField } from "@mui/material";
import { incrementCurrentStep } from "@root/quizes/actions";
import CustomWrapper from "@ui_kit/CustomWrapper";
import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
import { ResultListForm } from "./ResultListForm";
import { SettingForm } from "./SettingForm";
import { useState } from "react";
import { WhenCard } from "./cards/WhenCard";
import { ResultCard } from "./cards/ResultCard";
import { EmailSettingsCard } from "./cards/EmailSettingsCard";
import { useCurrentQuiz } from "@root/quizes/hooks"

export const ResultSettings = () => {
  const quiz = useCurrentQuiz()
  const [quizExpand, setQuizExpand] = useState(true)
  const [resultContract, setResultContract] = useState(true)

  return (
    <Box sx={{ maxWidth: "796px" }}>
      <Box sx={{
        display: "flex",
        alignItems: "center",
        margin: "60px 0 40px 0",
      }}>
        <Typography 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"
          onClick={() => setQuizExpand(!quizExpand)}
        >
          Свернуть
        </Button>
      </Box>


      <WhenCard quizExpand={quizExpand} />
      {quiz.config.resultInfo.when === "email" && <EmailSettingsCard quizExpand={quizExpand} />}


      <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"
          onClick={() => setResultContract(!resultContract)}
        >
          Развернуть все
        </Button>
      </Box>


      <ResultCard resultContract={resultContract} />
    </Box>
  );
};