import {Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React, {useState} from "react";
import InfoIcon from "../../../assets/icons/InfoIcon";
import ArrowDown from "../../../assets/icons/ArrowDownIcon";
import SwitchUpload from "./switchUpload";

export default function UploadFile() {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }

    const designTypes = [
        ["Все типы файлов"],
        ["Изображения"],
        ["Видео"],
        ["Аудио"],
        ["Документ"]
    ]
    const [designType, setDesignType] = useState(designTypes[0][0]);
    const handleChange = (event: SelectChangeEvent) => {
        setDesignType(event.target.value);
    }

    return (
        <>
            <Box
                sx={{
                    width: '100%',
                    maxWidth: '640px',
                    display: 'flex',
                    padding: '20px',
                    flexDirection: 'column',
                    gap: '20px'}}
            >

                <Box sx={{gap: '10px', display: 'flex'}}>
                    <FormControl
                        fullWidth
                        size="small"
                        sx={{
                            width: "100%",
                            minWidth: "200px",
                            height: "48px",
                        }}
                    >
                        <Select
                            id="category-select"
                            variant="outlined"
                            value={designType}
                            displayEmpty
                            onChange={handleChange}
                            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[0]}
                                </MenuItem>
                            )}
                        </Select>
                    </FormControl>
                </Box>
                <Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
                    <Typography sx={{
                        fontWeight: 400,
                        fontSize: '16px',
                        lineHeight: '18.96px',
                        color: theme.palette.grey2.main
                    }}>Пользователь может загрузить любой собственный файл</Typography>
                    <InfoIcon/>
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
            <SwitchUpload switchState={switchState}/>
        </>
    )
}