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


export default function Header()  {
    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 : 0})
    };

    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>
    );
}