import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import SettingIcon from "../../components/icons/questionsPage/settingIcon";
import Clue from "../../components/icons/questionsPage/clue";
import Branching from "../../components/icons/questionsPage/branching";
import ImgIcon from "../../components/icons/questionsPage/imgIcon";
import {Box, IconButton, useTheme} from "@mui/material";
import HideIcon from "../../components/icons/questionsPage/hideIcon";
import CopyIcon from "../../components/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../components/icons/questionsPage/deleteIcon";


export default function ButtonsOptions () {
    // const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
    //     {icon: <SettingIcon/>, title: 'Настройки', value: 'setting'},
    //     {icon: <Clue/>, title: 'Подсказка', value: 'help'},
    //     {icon: <Branching/>, title: 'Ветвление', value: 'branching'},
    //     {icon: <ImgIcon/>, title: 'Изображение', value: 'image'},
    // ]
   const [switchState, setSwitchState] = React.useState('setting');
    const theme = useTheme();
    return (
        <Box sx={{
            display: 'flex',
            justifyContent: 'space-between',
            width: '100%',
            background: '#f2f3f7'
        }}>
            <Box
                sx={{
                    padding: '20px',
                    display: 'flex',
                    gap: '10px'
                }}
            >
                {/*{buttonSetting.map( (e,i) => (*/}
                {/*    <MiniButtonSetting*/}
                {/*        key={i}*/}
                {/*        onClick={()=>{setSwitchState({e.value})}}*/}
                {/*        sx={{backgroundColor: switchState === {e.value} ? theme.palette.brightPurple.main : 'transparent',*/}
                {/*            color: switchState === {e.value} ? '#ffffff' : theme.palette.grey3.main,*/}
                {/*        }}*/}
                {/*    >*/}
                {/*        {e.icon}*/}
                {/*        {e.title}*/}
                {/*    </MiniButtonSetting>*/}
                {/*))}*/}
                <MiniButtonSetting
                    onClick={()=>{setSwitchState('setting')}}
                    sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent',
                        color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main,
                    }}
                >
                    <SettingIcon/>
                    Настройки
                </MiniButtonSetting>
                <MiniButtonSetting
                    onClick={()=>{setSwitchState('help')}}
                    sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent',
                        color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main,
                    }}
                >
                    <Clue/> Подсказка
                </MiniButtonSetting>
                <MiniButtonSetting
                    onClick={()=>{setSwitchState('branching')}}
                    sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent',
                        color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main,
                    }}
                >
                    <Branching/> Ветвление
                </MiniButtonSetting>
                <MiniButtonSetting
                    onClick={()=>{setSwitchState('image')}}
                    sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent',
                        color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main,
                    }}
                >
                    <ImgIcon/> Изображение
                </MiniButtonSetting>

            </Box>
            <Box
                sx={{
                    padding: '20px',
                }}
            >
                <IconButton sx={{borderRadius: '6px', padding: '2px'}}>
                    <HideIcon/>
                </IconButton>
                <IconButton sx={{borderRadius: '6px', padding: '2px'}}>
                    <CopyIcon/>
                </IconButton>
                <IconButton sx={{borderRadius: '6px', padding: '2px'}}>
                    <DeleteIcon/>
                </IconButton>
            </Box>
        </Box>
    )
}