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

interface Props {
    switchState: string
    SSHC: (data:string) => void
}

export default function ButtonsOptions ({SSHC, switchState}:Props) {
    const theme = useTheme();
    const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
        {icon: <SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Настройки', value: 'setting'},
        {icon: <Clue color={switchState === 'help' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Подсказка', value: 'help'},
        {icon: <Branching color={switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Ветвление', value: 'branching'},
    ]

    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={()=>{SSHC(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>
                ))}
            </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>
    )
}