import Stepper from '@ui_kit/Stepper';
import SwitchStepPages from "./switchStepPages";
import React from "react";
import PenaLogo from "@ui_kit/PenaLogo";
import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material";
import BackArrowIcon from "@icons/BackArrowIcon";
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
import EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "@ui_kit/Header/Avatar";
import Sidebar from "@ui_kit/Sidebar";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";


export default function StartPage() {
    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
    const params = Number(useParams().quizId);
    const activeStep = listQuizes[params].step
    const theme = useTheme();

    const handleNext = () => {
        updateQuizesList(params, {step: listQuizes[params].step + 1})
    }

    const handleBack = () => {
        let result = listQuizes[params].step - 1
        updateQuizesList(params, {step: result ? result : 1})
    };

    return (
        <>
            {/*хедер*/}
            <Container
                component="nav"
                maxWidth={false}
                disableGutters
                sx={{
                    px: "16px",
                    display: "flex",
                    height: "80px",
                    alignItems: "center",
                    bgcolor: "white",
                    borderBottom: "1px solid #E3E3E3",
                    zIndex: theme.zIndex.drawer + 1,
                }}
            >
                <PenaLogo width={124} />
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        ml: "37px",
                    }}
                >
                    <IconButton sx={{ p: "6px" }}
                                onClick={() => handleBack()}
                    >
                        <BackArrowIcon />
                    </IconButton>
                    <FormControl
                        fullWidth
                        variant="standard"
                    >
                        <TextField
                            fullWidth
                            id="project-name"
                            placeholder="Название проекта окно"
                            sx={{
                                width: "270px",
                                "& .MuiInputBase-root": {
                                    height: "34px",
                                    borderRadius: "8px",
                                    p: 0,
                                },
                            }}
                            inputProps={{
                                sx: {
                                    height: "20px",
                                    borderRadius: "8px",
                                    fontSize: "16px",
                                    lineHeight: "20px",
                                    p: "7px",
                                    color: "black",
                                    "&::placeholder": {
                                        opacity: 1,
                                    },
                                }
                            }}
                        />
                    </FormControl>
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        gap: "30px",
                        overflow: "hidden",
                        ml: "20px",
                    }}
                >
                    <NavMenuItem text="Редактировать" isActive />
                    <NavMenuItem text="Заявки" />
                    <NavMenuItem text="Аналитика" />
                    <NavMenuItem text="История" />
                    <NavMenuItem text="Помощь" />
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        ml: "auto",
                        gap: "15px",
                    }}
                >
                    <Button
                        variant="outlined"
                        startIcon={<EyeIcon />}
                        sx={{
                            color: theme.palette.brightPurple.main,
                            fontSize: "14px",
                            lineHeight: "18px",
                            height: "34px",
                            "& .MuiButton-startIcon": {
                                mr: "3px",
                            }
                        }}
                    >Предпросмотр</Button>
                    <Button
                        variant="contained"
                        sx={{
                            fontSize: "14px",
                            lineHeight: "18px",
                            height: "34px",
                        }}
                    >Опубликовать</Button>
                    <CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
                </Box>
            </Container>

            <Box sx={{
                display: 'flex'
            }}
            >
                <Sidebar/>
                <Box
                    sx={{
                        background: theme.palette.background.default,
                        width: '100%',
                        padding: '25px',
                        height: 'calc(100vh - 80px)',
                        overflow: 'auto',
                        boxSizing: "border-box"
                    }}
                >
                    <Stepper activeStep={activeStep} desc={"Настройка стартовой страницы"}/>
                    <SwitchStepPages activeStep={activeStep} handleNext={handleNext}/>
                </Box>
            </Box>
        </>
    )
}