import React from "react";
import Stepper from "@ui_kit/Stepper";
import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "../../assets/icons/questionsPage/OneIcon";
import PointsIcon from "../../assets/icons/questionsPage/PointsIcon";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import TypeQuestions from "./TypeQuestions";
import AnswerOptions from "./answerOptions/AnswerOptions";
import OptionsPicture from "./OptionsPicture/OptionsPicture";
import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
import Emoji from "./Emoji/Emoji";
import OwnTextField from "./OwnTextField/OwnTextField";
import DropDown from "./DropDown/DropDown";
import DataOptions from "./DataOptions/DataOptions";
import SliderOptions from "./SliderOptions/SliderOptions";
import UploadFile from "./UploadFile/UploadFile";
import PageOptions from "./PageOptions/PageOptions";
import RatingOptions from "./RatingOptions/RatingOptions";
import SwitchQuestionsPage from "./SwitchQuestionsPage";

export default function QuestionsPage() {
  const [activeStep, setActiveStep] = React.useState(1);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

    const [switchState, setSwitchState] = React.useState('');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }

  const theme = useTheme();
  return (
    <>
      <Stepper activeStep={activeStep} desc={"Задайте вопросы"} />
      <Box sx={{ maxWidth: "796px", width: "100%", display: "flex", justifyContent: "space-between", margin: "60px 0 40px 0",}}>
          <Typography variant={"h5"}>Заголовок квиза</Typography>
          <Link sx={{
              fontSize: "16px",
              lineHeight: "19px",
              color: theme.palette.brightPurple.main,
              textDecorationColor: theme.palette.brightPurple.main
          }}>Свернуть всё</Link>
      </Box>

      <Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0" }}>
        <Box
          sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
        >
          <CustomTextField placeholder="Заголовок вопроса" text={""} />
          <IconButton>
            {" "}
            <ExpandMoreIcon />{" "}
          </IconButton>
          <OneIcon />
          <PointsIcon />
        </Box>

        <Box sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
            {switchState.length === 0 ?
            <TypeQuestions switchState={switchState} SSHC={SSHC}/>
                :
          <SwitchQuestionsPage switchState={switchState}/>}
        </Box>
      </Paper>
        {/*<Paper sx={{maxWidth: "796px", width: "100%", display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px", marginBottom: "20px" }}>*/}
        {/*    */}
        {/*</Paper>*/}

      <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
        <IconButton>
          <AddPlus />
        </IconButton>
        <Box sx={{ display: "flex", gap: "8px" }}>
          <Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
            <ArrowLeft />
          </Button>
          <Button
            variant="contained"
            sx={{
              padding: "10px 20px",
              borderRadius: "8px",
              background: theme.palette.brightPurple.main,
              fontSize: "18px",
            }}
          >
            Следующий шаг
          </Button>
        </Box>
      </Box>
    </>
  );
}