import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import SettingIcon from "@icons/questionsPage/settingIcon";
import Branching from "@icons/questionsPage/branching";
import {Box, useTheme} from "@mui/material";
import SupplementIcon from "@icons/ContactFormIcon/supplementIcon";

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

export default function ButtonSettingForms ({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: <Branching color={switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Ветвление', value: 'branching'},
        {icon: <SupplementIcon color={switchState === 'supplement' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Добавить шаг формы', value: 'supplement'},
    ]

    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>
    )
}