import { Box, Select, Typography, MenuItem } from "@mui/material"
import SimpleArrowDown from "@ui_kit/SimpleArrowDown";
import { useRef, useState } from "react";

interface Props {
    selectedItem: TypePages;
    setSelectedItem: (a: TypePages) => void;
}
export const NavSelect = ({
    selectedItem,
    setSelectedItem,
}: Props) => {
    const ref = useRef<HTMLDivElement | null>(null)
    const [opened, setOpened] = useState<boolean>(false)
    return (
        <Box>
            <Box
                sx={{
                    width: "300px",
                    display: "inline-flex",
                    alignItems: "center",
                    position: "relative",
                    m: "25px",
                }}
                onClick={() => setOpened((isOpened) => !isOpened)}
            >
                <Select
                    ref={ref}
                    value={selectedItem}
                    onChange={({ target }) => setSelectedItem(target.value)}
                    MenuProps={{ disablePortal: true }}
                    open={opened}
                    sx={{
                        width: "300px",
                        "& .MuiOutlinedInput-notchedOutline": {
                            border: "none"
                        },
                        '& .MuiInputBase-input': {
                            fontSize: "18px",
                            fontWeight: 500,
                            lineHeight: "20px",

                            borderRadius: "28px",
                            position: 'relative',
                            backgroundColor: "#EFF0F5",
                            border: "2px solid white",
                            padding: '10px 10px 10px 20px',
                            color: "#7E2AEA",
                            zIndex: 2,
                            "&:forus": {
                                borderRadius: "28px",
                            },
                            "&:focus-visible": {
                                borderRadius: "28px",
                            }
                        },
                        "& .MuiPaper-root.MuiMenu-paper": {
                            paddingTop: "50px",
                            marginTop: "-50px",
                            borderRadius: "28px",
                            border: "2px solid #ffffff",
                        },
                        "& .MuiPopover-root": {
                            zIndex: 1
                        },
                        "& .MuiSvgIcon-root": {
                            display: "none"
                        }
                    }}
                >
                    <MenuItem value="count">Тарифы на время</MenuItem>
                    <MenuItem value="day">Тарифы на объем</MenuItem>
                    <MenuItem value="dop">Доп. услуги</MenuItem>
                    <MenuItem value="hide" sx={{ ml: "15px" }}>Убрать логотип “PenaQuiz”</MenuItem>
                    <MenuItem value="create" sx={{ ml: "15px" }}>Создать квиз на заказ</MenuItem>
                </Select >
                <Box
                    sx={{
                        width: "36px",
                        height: "36px",
                        bgcolor: "white",
                        borderRadius: "30px",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        position: "absolute",
                        right: "10px",
                        zIndex: 2,
                        transform: opened ? "rotate(180deg)" : "none"
                    }}
                >
                    <SimpleArrowDown />
                </Box>
            </Box>
        </Box>
    )
}