import {Box, Link, Typography, useTheme} from "@mui/material";
import React from "react";
import EnterIcon from "@icons/questionsPage/enterIcon";
import AddImage from "@icons/questionsPage/addImage";
import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptionsPict from "./switchOptionsPict";

export default function OptionsPicture() {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    // const [addInput, setAddInput] = React.useState([
    //     0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
    // ]);
    const SSHC = (data: string) => {
        setSwitchState(data)
    }

    // const createCondition = (name) => {
    //     addInput([...state, {name: name}])
    // }
    //
    // const deleteCondition = (index) => {
    //
    // }
    return (
        <>
            <Box sx={{ padding: '20px'}}>
                <Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
                    <AddImage/>
                    <Typography
                        sx={{
                            padding: '0 0 0 20px',
                            fontWeight: 400,
                            fontSize: '18px',
                            lineHeight: '21.33px',
                            color: theme.palette.grey2.main
                        }}
                    >
                        Добавьте ответ
                    </Typography>
                </Box>

                <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
                    <Link
                        component="button"
                        variant="body2"
                        sx={{color: theme.palette.brightPurple.main}}
                        // onClick={() => {
                        //     console.info("I'm a button.");
                        // }}
                    >
                        Добавьте ответ
                    </Link>
                    <Typography
                        sx={{
                            fontWeight: 400,
                            fontSize: '18px',
                            lineHeight: '21.33px',
                            color: theme.palette.grey2.main
                        }}
                    >или нажмите Enter</Typography>
                    <EnterIcon/>
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
            <SwitchAnswerOptionsPict switchState={switchState}/>
        </>
    )
}