import {Box, ButtonBase, Slider, Typography, useTheme} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
import React from "react";
import RatingStar from "@icons/questionsPage/ratingStar";
import TropfyIcon from "@icons/questionsPage/tropfyIcon";
import FlagIcon from "@icons/questionsPage/FlagIcon";
import HeartIcon from "@icons/questionsPage/heartIcon";
import LikeIcon from "@icons/questionsPage/likeIcon";
import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
import HashtagIcon from "@icons/questionsPage/hashtagIcon";
import StarIconMini from "@icons/questionsPage/StarIconMini";



export default function SettingSlider() {
    const theme = useTheme();
    const [current, setCurrent] = React.useState(1)
    const buttonRatingForm: {icon: JSX.Element} [] =[
        {icon: <StarIconMini color={theme.palette.grey3.main}/>},
        {icon: <TropfyIcon color={theme.palette.grey3.main}/>},
        {icon: <FlagIcon color={theme.palette.grey3.main}/>},
        {icon: <HeartIcon color={theme.palette.grey3.main}/>},
        {icon: <LikeIcon color={theme.palette.grey3.main}/>},
        {icon: <LightbulbIcon color={theme.palette.grey3.main}/>},
        {icon: <HashtagIcon color={theme.palette.grey3.main}/>},
    ]

    return (
        <Box sx={{display: 'flex'}}>
            <Box sx={{padding: '20px'}}>
                <Typography sx={{marginBottom: '15px'}}>Настройки рейтинга</Typography>
                <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Форма</Typography>
                <Box sx={{display: 'flex', marginBottom: '15px' }}>
                    {buttonRatingForm.map( (e,i) => (
                        <ButtonBase
                            key={i}
                            onClick={()=>{setCurrent(i)}}
                            sx={{backgroundColor: current === i ? theme.palette.brightPurple.main : 'transparent',
                                color: current === i ? '#ffffff' : theme.palette.grey3.main,
                                width: '40px',
                                height: '40px',
                                borderRadius: '4px'
                            }}
                        >
                            {e.icon}
                        </ButtonBase>
                    ))}
                </Box>
                <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Количество</Typography>
                <Slider defaultValue={5} min={1} max={10} aria-label="Default" valueLabelDisplay="auto" sx={{color: theme.palette.brightPurple.main}} />

            </Box>
            <Box sx={{padding: '20px'}}>
                <Typography>Настройки вопросов</Typography>
                <CustomCheckbox label={'Необязательный вопрос'}/>
                <CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
            </Box>
        </Box>
    );
};