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";
import ImgIcon from "@icons/questionsPage/imgIcon";

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

export default function ButtonsOptionsAndPict ({SSHC, switchState}:Props) {

    const theme = useTheme();
    return (
        <Box sx={{
            display: 'flex',
            justifyContent: 'space-between',
            width: '100%',
            background: '#f2f3f7'
        }}>
            <Box
                sx={{
                    padding: '20px',
                    display: 'flex',
                    gap: '10px'
                }}
            >
                <MiniButtonSetting
                        onClick={()=>{SSHC('setting')}}
                        sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent',
                            color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main,
                        }}
                >
                    <SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>
                    Настройки
                </MiniButtonSetting>
                <MiniButtonSetting
                    onClick={()=>{SSHC('help')}}
                    sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent',
                        color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main,
                    }}
                >
                    <Clue color={switchState === 'help' ? '#ffffff' : theme.palette.grey3.main}/>
                    Помощь
                </MiniButtonSetting>
                <MiniButtonSetting
                    onClick={()=>{SSHC('branching')}}
                    sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent',
                        color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main,
                    }}
                >
                    <Branching color={switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main}/>
                    Ветвление
                </MiniButtonSetting>
                <MiniButtonSetting
                    onClick={()=>{SSHC('image')}}
                    sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent',
                        color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main,
                    }}
                >
                    <ImgIcon color={switchState === 'image' ? '#ffffff' : theme.palette.grey3.main}/>
                    Изображение
                </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>
    )
}