frontPanel/src/pages/startPage/StartPageSettings.tsx

import {
    Box,
    Button,
    ButtonBase,
    Checkbox,
    FormControl, FormControlLabel,
    Link,
    MenuItem,
    Select,
    Typography,
    useTheme
} from "@mui/material";
import { useState } from "react";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import AlignLeftIcon from "../../assets/icons/AlignLeftIcon";
import AlignRightIcon from "../../assets/icons/AlignRightIcon";
import ArrowDown from "../../assets/icons/ArrowDownIcon";
import InfoIcon from "../../assets/icons/InfoIcon";
import LayoutCenteredIcon from "../../assets/icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "../../assets/icons/LayoutExpandedIcon";
import LayoutStandartIcon from "../../assets/icons/LayoutStandartIcon";
import MobilePhoneIcon from "../../assets/icons/MobilePhoneIcon";
import UploadIcon from "../../assets/icons/UploadIcon";
import SelectableButton from "@ui_kit/SelectableButton";
import SelectableIconButton from "./SelectableIconButton";
import UploadBox from "@ui_kit/UploadBox";
import CustomTextField from "@ui_kit/CustomTextField";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
import * as React from "react";


const designTypes = [
    ["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
    ["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
    ["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"]
] as const;
// type DesignType = typeof designTypes[number][0];

type BackgroundType = "image" | "video";
type AlignType = "left" | "right";

export default function StartPageSettings() {
    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
    const params = Number(useParams().quizId);
    const theme = useTheme();
    const designType = listQuizes[params].startpage
    const StartPageClone = listQuizes[params]
    console.log(StartPageClone)
    const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
    const [alignType, setAlignType] = useState<AlignType>("left");
    //дропзона
    //для Изображения
    const imgHC = (imgInp:any) => {
        const [file] = imgInp.files
        setImg(URL.createObjectURL(file))
    }
    const [img, setImg] = React.useState("");

    const dropZone = React.useRef<any>(null);
    const [ready, setReady] = React.useState(false);

    const dragenterHC = () => {
        console.log("a")
        setReady(true)
    }

    React.useEffect(() => {

        if (dropZone.current) {
            dropZone.current.addEventListener("dragenter", dragenterHC)
            console.log(dropZone.current)
        }
        return () => {dropZone.current.removeEventListener("dragenter", dragenterHC)}
    },)

    //для Логотипа
    const logoHC = (imgInp:any) => {
        const [file] = imgInp.files
        setLogo(URL.createObjectURL(file))
    }
    const [logo, setLogo] = React.useState("");

    const dropZoneLogo = React.useRef<any>(null);
    const [readyLogo, setReadyLogo] = React.useState(false);

    const dragenterLogoHC = () => {
        console.log("b")
        setReadyLogo(true)
    }

    React.useEffect(() => {

        if (dropZoneLogo.current) {
            dropZoneLogo.current.addEventListener("dragenter", dragenterLogoHC)
            console.log(dropZoneLogo.current)
        }
        return () => {dropZoneLogo.current.removeEventListener("dragenter", dragenterLogoHC)}
    },)

    // для фавиконки
    const favHC = (imgInp:any) => {
        const [file] = imgInp.files
        setFav(URL.createObjectURL(file))
    }
    const [fav, setFav] = React.useState("");

    const dropZoneFav = React.useRef<any>(null);
    const [readyFav, setReadyFav] = React.useState(false);

    const dragenterFavHC = () => {
        console.log("c")
        setReadyFav(true)
    }

    React.useEffect(() => {

        if (dropZoneFav.current) {
            dropZoneFav.current.addEventListener("dragenter", dragenterFavHC)
            console.log(dropZoneFav.current)
        }
        return () => {dropZoneFav.current.removeEventListener("dragenter", dragenterFavHC)}
    },)

    //изображение для мобильной версии
    const mobileImgHC = (imgInp:any) => {
        const [file] = imgInp.files
        setMobileImg(URL.createObjectURL(file))
    }
    const [mobileImg, setMobileImg] = React.useState("");

    const dropZoneMobile = React.useRef<any>(null);
    const [readyMobile, setReadyMobile] = React.useState(false);

    const dragenterMobileHC = () => {
        console.log("d")
        setReadyMobile(true)
    }

    React.useEffect(() => {

        if (dropZoneMobile.current) {
            dropZoneMobile.current.addEventListener("dragenter", dragenterMobileHC)
            console.log(dropZoneMobile.current)
        }
        return () => {dropZoneMobile.current.removeEventListener("dragenter", dragenterMobileHC)}
    },)

    // для видео
    const videoHC = (videoInp:any) => {
        const [file] = videoInp.files
        setVideo(URL.createObjectURL(file))
    }
    const [video, setVideo] = React.useState("");

    const mutationHC = (e: any) => {
        let SPageClone = listQuizes[params].config1
        SPageClone.startpage.description = e.target.value
        updateQuizesList(params, {config1: SPageClone })
    }

    const mutationButtonHC = (e: any) => {
        let SPageClone = listQuizes[params].config1
        SPageClone.startpage.button = e.target.value
        updateQuizesList(params, {config1: SPageClone })
    }

    const mutationPhoneHC = (e: any) => {
        let SPageClone = listQuizes[params].config1
        SPageClone.info.phonenumber = e.target.value
        updateQuizesList(params, {config1: SPageClone })
    }

    const mutationSiteHC = (e: any) => {
        let SPageClone = listQuizes[params].config1
        SPageClone.info.site = e.target.value
        updateQuizesList(params, {config1: SPageClone })
    }

    const mutationLawHC = (e: any) => {
        let SPageClone = listQuizes[params].config1
        SPageClone.info.law = e.target.value
        updateQuizesList(params, {config1: SPageClone })
    }

    const mutationOrgNameHC = (e: any) => {
        let SPageClone = listQuizes[params].config1
        SPageClone.info.orgname = e.target.value
        updateQuizesList(params, {config1: SPageClone })
    }

    const mutationOrgMetaHC = (e: any) => {
        let SPageClone = listQuizes[params].config1
        SPageClone.meta = e.target.value
        updateQuizesList(params, {config1: SPageClone })
    }

    return (
        <>
            <Typography variant="h5" sx={{marginTop: "60px"}}>Стартовая страница</Typography>
            <Box sx={{
                backgroundColor: "white",
                borderRadius: "12px",
                p: "20px",
                display: "flex",
                gap: "20px",
                marginTop: "40px",
                maxWidth: "1160px",
                width: "100%",
                boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                        0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                        0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                        0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                        0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                        0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
            }}>
                <Box sx={{
                    pr: "20px",
                    borderRight: `1px solid ${theme.palette.grey2.main}`,
                    display: "flex",
                    flexDirection: "column",
                    flex: `1 1 342px`,
                }}>
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
                    <FormControl
                        fullWidth
                        size="small"
                        sx={{
                            width: "100%",
                            minWidth: "200px",
                            height: "48px",
                        }}
                    >
                        <Select
                            id="category-select"
                            variant="outlined"
                            value={designType}
                            displayEmpty
                            onChange={e => updateQuizesList(params, {startpage: e.target.value})}
                            sx={{
                                height: "48px",
                                borderRadius: "8px",
                                "& .MuiOutlinedInput-notchedOutline": {
                                    border: `1px solid ${theme.palette.brightPurple.main} !important`,
                                },
                            }}
                            MenuProps={{
                                PaperProps: {
                                    sx: {
                                        mt: "8px",
                                        p: "4px",
                                        borderRadius: "8px",
                                        border: "1px solid #EEE4FC",
                                        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                                    },
                                },
                                MenuListProps: {
                                    sx: {
                                        py: 0,
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: "8px",
                                        "& .Mui-selected": {
                                            backgroundColor: theme.palette.background.default,
                                            color: theme.palette.brightPurple.main,
                                        }
                                    },
                                },
                            }}
                            inputProps={{
                                sx: {
                                    color: theme.palette.brightPurple.main,
                                    display: "flex",
                                    alignItems: "center",
                                    px: "9px",
                                    gap: "20px",
                                }
                            }}
                            IconComponent={props => <ArrowDown {...props} />}
                        >
                            {designTypes.map(type =>
                                <MenuItem
                                    key={type[0]}
                                    value={type[0]}

                                    sx={{
                                        display: "flex",
                                        alignItems: "center",
                                        gap: "20px",
                                        p: "4px",
                                        borderRadius: "5px",
                                        color: theme.palette.grey2.main,
                                    }}
                                >
                                    {type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
                                    {type[2]}
                                </MenuItem>
                            )}
                        </Select>
                    </FormControl>
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
                    <Box sx={{
                        display: "flex",
                        gap: "10px",
                    }}>
                        <SelectableButton isSelected={backgroundType === "image"} onClick={() => {
                            setBackgroundType("image")
                            let SPageClone = listQuizes[params].config1
                            SPageClone.startpage.background.type = "image"
                            updateQuizesList(params, {config1: SPageClone })
                        }}>
                            Изображение
                        </SelectableButton>
                        <SelectableButton isSelected={backgroundType === "video"} onClick={() => {
                            setBackgroundType("video")
                            let SPageClone = listQuizes[params].config1
                            SPageClone.startpage.background.type = "video"
                            updateQuizesList(params, {config1: SPageClone })
                        }}>
                            Видео
                        </SelectableButton>
                    </Box>

                        <Box sx={{
                            display: backgroundType === "image" ? "flex" : "none",
                            flexDirection: "column"
                        }}>
                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
                                <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
                                {/*<UploadBox icon={<UploadIcon />} text="5 MB максимум" ref={dropZone} />*/}
                                <Box
                                    ref={dropZone}
                                    sx={{
                                        width: "100%",
                                        height: "120px",
                                        position: "relative",
                                        display: "flex",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        backgroundColor: theme.palette.background.default,
                                        border: `1px solid ${ready? "red" : theme.palette.grey2.main}`,
                                        borderRadius: "8px",
                                        opacity: img ? "0.5" : 1
                                    }}

                                >
                                    <UploadIcon />
                                    <Typography sx={{
                                        position: "absolute",
                                        right: "10px",
                                        bottom: "10px",
                                        color: theme.palette.orange.main,
                                        fontSize: "16px",
                                        lineHeight: "19px",
                                        textDecoration: "underline",
                                    }}>5 MB максимум</Typography>
                                    {img ?
                                        <img height="110" src={img}
                                             style={{
                                                 position: "absolute", zIndex: "-1",
                                            objectFit: "revert-layer",
                                        }}/>
                                        :
                                        null
                                    }
                                </Box>
                            </ButtonBase>

                            <Link sx={{
                                mt: "20px",
                                fontSize: "16px",
                                lineHeight: "19px",
                                color: theme.palette.orange.main,
                                textDecorationColor: theme.palette.orange.main
                            }}>Размер картинок</Link>
                            <Box sx={{
                                mt: "20px",
                                display: "flex",
                                gap: "10px",
                                alignItems: "center",

                            }}>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            icon={<IconCheck/>}
                                            checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"}/>}
                                        />}
                                    label= "мобильная версия"
                                    sx={{
                                        color: theme.palette.brightPurple.main,
                                        textDecorationLine: "underline",
                                        textDecorationColor: theme.palette.brightPurple.main,
                                        ml: "-9px",
                                        userSelect: "none",
                                    }}

                                />
                            </Box>
                        </Box>

                        <Box sx={{
                            display: backgroundType === "image" ? "none" : "flex",
                            flexDirection: "column"
                        }}>
                            <Box sx={{
                                display: "flex",
                                alignItems: "center",
                                gap: "7px",
                                mt: "20px",
                                mb: "14px",
                            }}>
                                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
                                <InfoIcon />
                            </Box>
                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
                                <input onChange={event => videoHC(event.target) } hidden accept=".mp4" multiple type="file" />
                                <UploadBox
                                icon={<UploadIcon />}
                                sx={{
                                    height: "48px",
                                    width: "48px",
                                    marginBottom: "20px"
                                }}
                                />
                            </ButtonBase>
                            {video ?
                                <video src={video} width="400" controls/>
                                :
                                null
                            }
                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
                            <CustomCheckbox
                                label="Зацикливать видео"
                                checked={listQuizes[params].config1.startpage.background.cycle}
                                handleChange={(e) => {
                                    let SPageClone = listQuizes[params].config1
                                    SPageClone.startpage.background.cycle = e.target.checked
                                    updateQuizesList(params, {config1: SPageClone })}}
                            />
                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
                                <input onChange={event => mobileImgHC(event.target)} hidden accept="image/*" multiple type="file" />
                                <Box
                                    ref={dropZoneMobile}
                                    sx={{
                                        width: "100%",
                                        height: "120px",
                                        position: "relative",
                                        display: "flex",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        backgroundColor: theme.palette.background.default,
                                        border: `1px solid ${readyMobile? "red" : theme.palette.grey2.main}`,
                                        borderRadius: "8px",
                                        opacity: mobileImg ? "0.5" : 1
                                    }}

                                >
                                    <UploadIcon />
                                    <Typography sx={{
                                        position: "absolute",
                                        right: "10px",
                                        bottom: "10px",
                                        color: theme.palette.orange.main,
                                        fontSize: "16px",
                                        lineHeight: "19px",
                                        textDecoration: "underline",
                                    }}>5 MB максимум</Typography>
                                    {mobileImg ?
                                        <img height="110" src={mobileImg}
                                             style={{
                                                 position: "absolute", zIndex: "-1",
                                                 objectFit: "revert-layer",
                                             }}/>
                                        :
                                        null
                                    }
                                </Box>
                            </ButtonBase>
                        </Box>

                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
                    <Box sx={{
                        display: "flex",
                        gap: "10px",
                    }}>
                        <SelectableIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
                        <SelectableIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
                    </Box>

                        <Box
                           sx={{
                                display: backgroundType === "image" ? "flex" : "none",
                                flexDirection: "column"
                            }}
                        >
                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, margin: "20px 0" }}>
                                Логотип</Typography>
                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
                                <input onChange={event => logoHC(event.target) } hidden accept="image/*" multiple type="file" />
                                <Box
                                    ref={dropZoneLogo}
                                    sx={{
                                        width: "100%",
                                        height: "120px",
                                        position: "relative",
                                        display: "flex",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        backgroundColor: theme.palette.background.default,
                                        border: `1px solid ${readyLogo? "red" : theme.palette.grey2.main}`,
                                        borderRadius: "8px",
                                        opacity: logo ? "0.5" : 1
                                    }}

                                >
                                    <UploadIcon />
                                    <Typography sx={{
                                        position: "absolute",
                                        right: "10px",
                                        bottom: "10px",
                                        color: theme.palette.orange.main,
                                        fontSize: "16px",
                                        lineHeight: "19px",
                                        textDecoration: "underline",
                                    }}>5 MB максимум</Typography>
                                    {logo ?
                                        <img height="110" src={logo}
                                             style={{
                                                 position: "absolute", zIndex: "-1",
                                                 objectFit: "revert-layer",
                                             }}/>
                                        :
                                        null
                                    }
                                </Box>
                            </ButtonBase>
                        </Box>

                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
                        Favicon</Typography>
                    <Box sx={{
                        display: "flex",
                        alignItems: "end",
                        gap: "10px",
                    }}>
                        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
                            <input onChange={event => favHC(event.target)} hidden accept="image/*" multiple type="file" />
                            <Box
                                ref={dropZoneFav}
                                sx={{
                                    height: "48px",
                                    width: "48px",
                                    position: "relative",
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    backgroundColor: theme.palette.background.default,
                                    border: `1px solid ${readyFav? "red" : theme.palette.grey2.main}`,
                                    borderRadius: "8px",
                                    opacity: fav ? "0.5" : 1
                                }}

                            >
                                <UploadIcon />
                                {fav ?
                                    <img height="48px" width="48px" src={fav}
                                         style={{
                                             position: "absolute", zIndex: "-1",
                                             objectFit: "revert-layer",
                                         }}/>
                                    :
                                    null
                                }
                            </Box>
                        </ButtonBase>
                        <Typography sx={{
                            color: theme.palette.orange.main,
                            fontSize: "16px",
                            lineHeight: "19px",
                            textDecoration: "underline",
                        }}>5 MB максимум</Typography>
                    </Box>
                </Box>
                {/*Правая сторона*/}
                <Box sx={{
                    display: "flex",
                    flexDirection: "column",
                    flex: `1 1 795px`,
                }}>
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который"
                        text={listQuizes[params].name}
                        onChange={e => updateQuizesList(params, {name: e.target.value})}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который "
                        text={listQuizes[params].config1.startpage.description}
                        onChange={mutationHC}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
                    <CustomTextField
                        placeholder="Начать"
                        text={listQuizes[params].config1.startpage.button}
                        onChange={mutationButtonHC}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
                    <CustomTextField
                        placeholder="+7 900 000 00 00"
                        text={listQuizes[params].config1.info.phonenumber}
                        onChange={mutationPhoneHC}
                    />
                    <CustomCheckbox label="Кликабельный"
                                    checked={listQuizes[params].config1.info.clickable}
                                    handleChange={(e) => {console.log(e.target.checked)
                                        let SPageClone = listQuizes[params].config1
                                        SPageClone.info.clickable = e.target.checked
                                        updateQuizesList(params, {config1: SPageClone })}
                                    }/>
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который "
                        text={listQuizes[params].config1.info.orgname}
                        onChange={mutationOrgNameHC}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который "
                        text={listQuizes[params].config1.info.site}
                        onChange={mutationSiteHC}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который "
                        text={listQuizes[params].config1.info.law}
                        onChange={mutationLawHC}
                    />
                    <Link sx={{
                        mt: "20px",
                        fontSize: "16px",
                        lineHeight: "19px",
                        color: theme.palette.brightPurple.main,
                        textDecorationColor: theme.palette.brightPurple.main
                    }}>Дополнительно</Link>
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={listQuizes[params].config1.meta} onChange={mutationOrgMetaHC} />
                    <Typography sx={{
                        mt: "20px",
                        fontSize: "16px",
                        lineHeight: "19px",
                        maxWidth: "80%",
                        color: theme.palette.grey3.main,
                    }}>
                        Текст-заполнитель —
                        это текст, который имеет Текст-заполнитель —
                        это текст, который имеет Текст-заполнитель —
                        это текст, который имеет Текст-заполнитель —
                        это текст, который имеет Текст-заполнитель
                    </Typography>
                </Box>
            </Box>
            <Box
                sx={{
                    display: "flex",
                    gap: "20px",
                    justifyContent: "flex-end",
                    marginTop: "20px",
                    maxWidth: "1200px"
                }}
            >
                <Button variant="outlined" sx={{backgroundColor: "transparent", color: theme.palette.brightPurple.main}}>Отключить стартовую страницу</Button>
                <Button
                    variant="contained"
                    onClick={() => {
                        let SPageClone = listQuizes[params].config1
                        SPageClone.startpage.background.desktop = "https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg"
                        SPageClone.startpage.background.mobile = "https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png"
                        SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ"
                        updateQuizesList(params, {config1: SPageClone })
                    }}
                >Настроить вопросы</Button>
            </Box>
        </>

    );
}

function IconCheck() {
        return (
        <Box sx={{
            height: "36px",
            width: "36px",
            borderRadius: "8px",
            backgroundColor: "#EEE4FC",
        }} />
    );
}