import { Box, FormControl, Link, MenuItem, Select, TextField, Typography, useTheme } from "@mui/material";
import { useState } from "react";
import CustomCheckbox from "../CustomCheckbox";
import AlignLeftIcon from "../icons/AlignLeftIcon";
import AlignRightIcon from "../icons/AlignRightIcon";
import ArrowDown from "../icons/ArrowDownIcon";
import InfoIcon from "../icons/InfoIcon";
import LayoutCenteredIcon from "../icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "../icons/LayoutExpandedIcon";
import LayoutStandartIcon from "../icons/LayoutStandartIcon";
import MobilePhoneIcon from "../icons/MobilePhoneIcon";
import UploadIcon from "../icons/UploadIcon";
import SelectableButton from "./SelectableButton";
import SelectableIconButton from "./SelectableIconButton";
import UploadBox from "./UploadBox";


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

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

export default function StartPageSettings() {
    const theme = useTheme();
    const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
    const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
    const [alignType, setAlignType] = useState<AlignType>("left");

    return (
        <Box sx={{
            backgroundColor: "white",
            borderRadius: "12px",
            p: "20px",
            display: "flex",
            gap: "20px",
            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 365px`,
            }}>
                <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 => setDesignType(e.target.value as DesignType)}
                        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[0]}
                            </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")}>
                        Изображение
                    </SelectableButton>
                    <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
                        Видео
                    </SelectableButton>
                </Box>
                {backgroundType === "image" ?
                    <>
                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
                        <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
                        <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",

                        }}>
                            <MobilePhoneIcon bgcolor="#EEE4FC" />
                            <Link sx={{
                                fontSize: "16px",
                                lineHeight: "19px",
                                color: theme.palette.brightPurple.main,
                                textDecorationColor: theme.palette.brightPurple.main
                            }}>мобильная версия</Link>
                        </Box>
                    </>
                    :
                    <>
                        <Box sx={{
                            display: "flex",
                            alignItems: "center",
                            gap: "7px",
                            mt: "20px",
                            mb: "14px",
                        }}>
                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
                            <InfoIcon />
                        </Box>
                        <UploadBox
                            icon={<UploadIcon />}
                            sx={{
                                height: "48px",
                                width: "48px",
                            }}
                        />
                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
                        <CustomCheckbox label="Зацикливать видео" />
                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
                        <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
                    </>
                }
                <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>
                {backgroundType === "image" &&
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px" }}>Логотип</Typography>
                }
                <UploadBox sx={{ mt: "20px" }} icon={<UploadIcon />} text="5 MB максимум" />
                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Favicon</Typography>
                <Box sx={{
                    display: "flex",
                    alignItems: "end",
                    gap: "10px",
                }}>
                    <UploadBox
                        icon={<UploadIcon />}
                        sx={{
                            height: "48px",
                            width: "48px",
                        }}
                    />
                    <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={""} />
                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
                <CustomTextField placeholder="Начать" text={""} />
                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
                <CustomTextField placeholder="+7 900 000 00 00" text={""} />
                <CustomCheckbox label="Кликабельный" />
                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
                <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={""} />
                <Typography sx={{
                    mt: "20px",
                    fontSize: "16px",
                    lineHeight: "19px",
                    maxWidth: "80%",
                    color: theme.palette.grey3.main,
                }}>
                    Текст-заполнитель —
                    это текст, который имеет Текст-заполнитель —
                    это текст, который имеет Текст-заполнитель —
                    это текст, который имеет Текст-заполнитель —
                    это текст, который имеет Текст-заполнитель
                </Typography>
            </Box>
        </Box>
    );
}

interface CustomTextFieldProps {
    placeholder: string;
    text: string;
}

function CustomTextField({ placeholder, text }: CustomTextFieldProps) {
    const theme = useTheme();

    return (
        <FormControl
            fullWidth
            variant="standard"
            sx={{ p: 0 }}
        >
            <TextField
                // value={text}
                fullWidth
                placeholder={placeholder}
                sx={{
                    backgroundColor: theme.palette.background.default,
                    "& .MuiInputBase-root": {
                        height: "48px",
                        borderRadius: "10px",
                    }
                }}
                inputProps={{
                    sx: {
                        borderRadius: "10px",
                        fontSize: "18px",
                        lineHeight: "21px",
                        py: 0,
                    }
                }}
            />
        </FormControl>
    );
}