import React from "react";
import Stepper from '@ui_kit/Stepper';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import {Box, Button, IconButton, Typography, Paper, useTheme} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "../../components/icons/questionsPage/OneIcon";
import PointsIcon from "../../components/icons/questionsPage/PointsIcon";
import AddPlus from "../../components/icons/questionsPage/addPlus";
import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
import TypeQuestions from "./TypeQuestions";
import AnswerOptions from "./answerOptions/AnswerOptions";

export default function QuestionsPage() {


    const [activeStep, setActiveStep] = React.useState(1);

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

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

    const theme = useTheme();
    return (
        <>
            <Stepper activeStep={activeStep} desc={"Задайте вопросы"}/>
            <Typography>Заголовок квиза</Typography>
            <Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0'}}>
                <Box sx={{display: 'flex', width: '100%'}}>
                    <Box
                        sx={{width: '100%'}}
                    >
                        <CustomTextField placeholder="Заголовок вопроса" text={""}/>
                        <IconButton> <ExpandMoreIcon /> </IconButton>
                    </Box>
                    <Box sx={{display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '20px'}}>
                        <OneIcon/>
                        <PointsIcon/>
                    </Box>
                </Box>
                <Paper sx={{display: 'flex', flexDirection: 'column', padding: 0, borderRadius: '12px'}}>
                    <TypeQuestions/>
                    <AnswerOptions/>
                </Paper>
            </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>
        </>
    )
}