import { quizApi } from "@api/quiz";
import { devlog } from "@frontend/kitui";
import BackArrowIcon from "@icons/BackArrowIcon";
import { Burger } from "@icons/Burger";
import EyeIcon from "@icons/EyeIcon";
import { PenaLogoIcon } from "@icons/PenaLogoIcon";
import {
    Box,
    Button,
    Container,
    FormControl,
    IconButton, Switch,
    TextField, Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { decrementCurrentStep, resetEditConfig, setQuizes } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import CustomAvatar from "@ui_kit/Header/Avatar";
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
import PenaLogo from "@ui_kit/PenaLogo";
import Sidebar from "@ui_kit/Sidebar";
import Stepper from "@ui_kit/Stepper";
import SwitchStepPages from "@ui_kit/switchStepPages";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import useSWR from "swr";
import { SidebarMobile } from "./Sidebar/SidebarMobile";
import {cleanQuestions, updateOpenBranchingPanel} from "@root/questions/actions";
import {BranchingPanel} from "../Questions/BranchingPanel";
import {useQuestionsStore} from "@root/questions/store";


export default function StartPage() {
    useSWR("quizes", () => quizApi.getList(), {
        onSuccess: setQuizes,
        onError: error => {
            const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";

            devlog("Error getting quiz list", error);
            enqueueSnackbar(`Не удалось получить квизы. ${message}`);
        },
    });
    const theme = useTheme();
    const navigate = useNavigate();
    const editQuizId = useQuizStore(state => state.editQuizId);
    const quiz = useCurrentQuiz();
    const currentStep = useQuizStore(state => state.currentStep);
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const isMobile = useMediaQuery(theme.breakpoints.down(660));
    const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
    const {openBranchingPanel} = useQuestionsStore.getState()
    const quizConfig = quiz?.config;

    useEffect(() => {
        if (editQuizId === null) navigate("/list");
    }, [navigate, editQuizId]);

    useEffect(() => () => {
        resetEditConfig();
        cleanQuestions();
    }, []);

    return (
        <>
            {/*хедер*/}
            <Container
                component="nav"
                maxWidth={false}
                disableGutters
                sx={{
                    px: "16px",
                    display: "flex",
                    height: isMobile ? "51px" : "80px",
                    alignItems: "center",
                    bgcolor: isMobile ? "#333647" : "white",
                    borderBottom: "1px solid #E3E3E3",
                    zIndex: theme.zIndex.drawer + 1,
                }}
            >
                <Link to="/" style={{ display: "flex" }}>
                    {isMobile ? (
                        <PenaLogoIcon style={{ fontSize: "39px", color: "white" }} />
                    ) : (
                        <PenaLogo width={124} />
                    )}
                </Link>
                <Box
                    sx={{
                        display: isMobile ? "none" : "flex",
                        alignItems: "center",
                        ml: "37px",
                    }}
                >
                    <IconButton sx={{ p: "6px" }} onClick={decrementCurrentStep}>
                        <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>
                {isTablet ? (
                    <Box
                        sx={{
                            display: "flex",
                            ml: "auto",
                        }}
                    >
                        {isMobile ? (
                            <Burger
                                onClick={() => setMobileSidebar(!mobileSidebar)}
                                style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
                            />
                        ) : (
                            <CustomAvatar
                                sx={{
                                    ml: "11px",
                                    backgroundColor: theme.palette.orange.main,
                                    height: "36px",
                                    width: "36px",
                                }}
                            />
                        )}
                    </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",
                            }}
                        >
                            <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
                                <Button
                                    variant="contained"
                                    sx={{
                                        fontSize: "14px",
                                        lineHeight: "18px",
                                        height: "34px",
                                    }}
                                >
                                    Опубликовать
                                </Button>
                            </a>
                            <CustomAvatar
                                sx={{
                                    ml: "11px",
                                    backgroundColor: theme.palette.orange.main,
                                    height: "36px",
                                    width: "36px",
                                }}
                            />
                        </Box>
                    </>
                )}
            </Container>

            <Box
                sx={{
                    display: isMobile ? "block" : "flex",
                }}
            >
                {isMobile ? <SidebarMobile open={mobileSidebar} /> : <Sidebar />}
                <Box
                    sx={{
                        background: theme.palette.background.default,
                        width: "100%",
                        padding: isMobile ? "16px" : "25px",
                        height: "calc(100vh - 80px)",
                        overflow: "auto",
                        boxSizing: "border-box",
                    }}
                >
                    {quizConfig &&
                        <>
                            <Stepper activeStep={currentStep} />
                            <SwitchStepPages
                                activeStep={currentStep}
                                quizType={quizConfig.type}
                                quizResults={quizConfig.results}
                                quizStartPageType={quizConfig.startpageType}
                            />
                        </>
                    }
                </Box>
                {isTablet && [1, 2, 3].includes(currentStep) && (
                    <Box
                        sx={{
                            position: "absolute",
                            left: 0,
                            bottom: 0,
                            width: "100%",
                            padding: "20px 40px",
                            display: "flex",
                            justifyContent: "flex-end",
                            gap: "15px",
                            background: "#FFF",
                        }}
                    >
                        <Box
                            sx={{
                                display: openBranchingPanel ? "none" : "display",
                                alignItems: "center",
                                gap: "15px",
                                padding: "18px",
                                background: "#fff",
                                borderRadius: "12px",
                                boxShadow: "0px 10px 30px #e7e7e7",
                            }}
                        >
                            <Switch
                                value={openBranchingPanel}
                                onChange={(_, value) => {
                                    updateOpenBranchingPanel(value)
                                }}
                                sx={{
                                    width: 50,
                                    height: 30,
                                    padding: 0,
                                    "& .MuiSwitch-switchBase": {
                                        padding: 0,
                                        margin: "2px",
                                        transitionDuration: "300ms",
                                        "&.Mui-checked": {
                                            transform: "translateX(20px)",
                                            color: theme.palette.brightPurple.main,
                                            "& + .MuiSwitch-track": {
                                                backgroundColor: "#E8DCF9",
                                                opacity: 1,
                                                border: 0,
                                            },
                                            "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
                                        },
                                        "&.Mui-disabled .MuiSwitch-thumb": {
                                            color:
                                                theme.palette.mode === "light"
                                                    ? theme.palette.grey[100]
                                                    : theme.palette.grey[600],
                                        },
                                        "&.Mui-disabled + .MuiSwitch-track": {
                                            opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
                                        },
                                    },
                                    "& .MuiSwitch-thumb": {
                                        boxSizing: "border-box",
                                        width: 25,
                                        height: 25,
                                    },
                                    "& .MuiSwitch-track": {
                                        borderRadius: 13,
                                        backgroundColor:
                                            theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
                                        opacity: 1,
                                        transition: theme.transitions.create(["background-color"], {
                                            duration: 500,
                                        }),
                                    },
                                }}
                            />
                            <Box>
                                <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
                                    Логика ветвления
                                </Typography>
                                <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
                                    Настройте связи между вопросами
                                </Typography>
                            </Box>
                        </Box>
                        <Button
                            variant="contained"
                            sx={{
                                fontSize: "14px",
                                lineHeight: "18px",
                                height: "34px",
                            }}
                        >
                            Опубликовать
                        </Button>
                    </Box>
                )}
            </Box>
        </>
    );
}