import { Box, FormControl, InputAdornment, InputLabel, MenuItem, Select, Tabs, TextField, Typography, useTheme } from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import CustomButton from "./CustomButton";
import LayoutIconOld from "../assets/icons/LayoutIcon";
import SearchIcon from "../assets/icons/SearchIcon";
import SectionWrapper from "./SectionWrapper";
import ArrowDown from "../assets/icons/ArrowDownIcon";
import { useState } from "react";
import { CustomTab } from "./CustomTab";
import QuizTemplateCard from "./QuizTemplateCard";
import quizTemplateImage1 from "../assets/quiz-template-1.png";
import quizTemplateImage2 from "../assets/quiz-template-2.png";
import quizTemplateImage3 from "../assets/quiz-template-3.png";
import quizTemplateImage4 from "../assets/quiz-template-4.png";
import quizTemplateImage5 from "../assets/quiz-template-5.png";
import quizTemplateImage6 from "../assets/quiz-template-6.png";


const categories = ["Категория 1", "Категория 2", "Категория 3", "Категория 4"] as const;
type Category = typeof categories[number];

export default function QuizGallery() {
    const theme = useTheme();
    const [category, setCategory] = useState<Category | "">("");
    const [tabIndex, setTabIndex] = useState<number>(0);

    const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
        setTabIndex(newValue);
    };

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "25px",
                mb: "74px",
            }}
        >
            <ComplexNavText text1="Галерея квизов" />
            <Typography variant="h4" mt="20px" mb="40px">Мои квизы</Typography>
            <Box
                sx={{
                    backgroundColor: theme.palette.brightPurple.main,
                    width: "100%",
                    borderRadius: "8px",
                    p: "20px",
                    display: "flex",
                    alignItems: "center",
                    mb: "40px",
                }}
            >
                <LayoutIconOld bgcolor="#EEE4FC" height="80px" width="80px" color={theme.palette.brightPurple.main} />
                <Box
                    sx={{
                        display: "flex",
                        ml: "25px",
                        gap: "30px",
                        alignItems: "baseline",

                    }}
                >
                    <Typography variant="h4" sx={{ color: "white" }}>Пустой шаблон</Typography>
                    <Typography sx={{ color: "white" }}>Широкий инструментарий создания квизов с нуля</Typography>
                </Box>
                <CustomButton
                    variant="contained"
                    sx={{
                        ml: "auto",
                        backgroundColor: "white",
                        color: "black",
                        px: "30.5px",
                        width: "auto",
                    }}
                >Начать</CustomButton>
            </Box>
            <Box
                sx={{
                    width: "100%",
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        gap: "2%",
                    }}
                >
                    <FormControl
                        fullWidth
                        variant="standard"
                        sx={{
                            width: "71%",
                        }}
                    >
                        <TextField
                            fullWidth
                            id="search"
                            placeholder="Поиск шаблонов"
                            sx={{
                                backgroundColor: theme.palette.background.default,
                                "& .MuiInputBase-root": {
                                    height: "45px",
                                    borderRadius: "10px",
                                    pl: "10px",
                                }
                            }}
                            InputProps={{
                                sx: {
                                    borderRadius: "10px",
                                    fontSize: "16px",
                                    lineHeight: "19px",
                                },
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <SearchIcon />
                                    </InputAdornment>
                                ),
                            }}

                        />
                    </FormControl>
                    <FormControl
                        fullWidth
                        size="small"
                        sx={{
                            width: "27%",
                            minWidth: "200px",
                            height: "45px",
                            "& .MuiInputLabel-outlined": {
                                mt: "4px",
                                ml: "-3px",
                            },
                            "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
                                ml: "3px",
                                mt: "0px",
                            }
                        }}
                    >
                        <InputLabel
                            sx={{
                                color: "black",
                                fontSize: "16px",
                                lineHeight: "19px",
                            }}
                            id="demo-simple-select-label"
                        >Категории</InputLabel>
                        <Select
                            labelId="demo-simple-select-label"
                            id="category-select"
                            label="Категории"
                            variant="outlined"
                            value={category}
                            onChange={e => setCategory(e.target.value as Category)}
                            sx={{
                                height: "45px",
                                borderRadius: "10px",
                            }}
                            inputProps={{ sx: { pt: "12px" } }}
                            IconComponent={props => <ArrowDown {...props} />}
                        >
                            {categories.map(cat =>
                                <MenuItem key={cat} value={cat}>{cat}</MenuItem>
                            )}
                        </Select>
                    </FormControl>
                </Box>
            </Box>
            <Tabs
                TabIndicatorProps={{ sx: { display: "none" } }}
                value={tabIndex}
                onChange={handleTabChange}
                variant="scrollable"
                scrollButtons={false}
                sx={{ mt: "15px" }}
            >
                <CustomTab value={0} label="Квизы" />
                <CustomTab value={1} label="Исследования и опросы" />
                <CustomTab value={2} label="Формы" />
                <CustomTab value={3} label="Тесты" />
                <CustomTab value={4} label="E-commerce" />
            </Tabs>
            <Box
                sx={{
                    display: "flex",
                    alignItems: "baseline",
                    mt: "28px",
                    mb: "40px",
                }}
            >
                <Typography variant="h5">Квизы</Typography>
                <Box
                    sx={{
                        flexGrow: 1,
                        width: "auto",
                        height: "10px",
                        borderBottom: "1px solid #9A9AAF",
                        mx: "5px",
                        mb: "0px",
                    }}
                />
                <Typography sx={{ color: "#4D4D4D" }}>(3)</Typography>
            </Box>
            <Box
                sx={{
                    display: "flex",
                    gap: "3.5%",
                }}
            >
                <QuizTemplateCard image={quizTemplateImage1} />
                <QuizTemplateCard image={quizTemplateImage2} />
                <QuizTemplateCard image={quizTemplateImage3} />
            </Box>
            <Box
                sx={{
                    display: "flex",
                    alignItems: "baseline",
                    mt: "50px",
                    mb: "40px",
                }}
            >
                <Typography variant="h5">Исследования и опросы</Typography>
                <Box
                    sx={{
                        flexGrow: 1,
                        width: "auto",
                        height: "10px",
                        borderBottom: "1px solid #9A9AAF",
                        mx: "5px",
                        mb: "0px",
                    }}
                />
                <Typography sx={{ color: "#4D4D4D" }}>(3)</Typography>
            </Box>
            <Box
                sx={{
                    display: "flex",
                    gap: "3.5%",
                }}
            >
                <QuizTemplateCard image={quizTemplateImage4} />
                <QuizTemplateCard image={quizTemplateImage5} />
                <QuizTemplateCard image={quizTemplateImage6} />
            </Box>
            <Box
                sx={{
                    width: "100%",
                    borderBottom: "1px solid #9A9AAF",
                    mt: "50px",
                }}
            />
            <Typography mt="30px" variant="h4">Нет подходящего шаблона?</Typography>
            <CustomButton
                variant="contained"
                sx={{
                    px: "20px",
                    width: "auto",
                    backgroundColor: theme.palette.brightPurple.main,
                    mt: "30px",
                }}
            >Создать квиз с нуля</CustomButton>
        </SectionWrapper>
    );
}