//@ts-check
import React, { useState } from 'react';
// import QuillToolbarOption from './RichTextEditorOption';
import { Button, Col, Radio, Row } from 'antd';
import { useTranslation } from 'react-i18next';

const OptionsBoolean = ({actualOptionData}) => {
    const {t} = useTranslation();

    const [options, updateOptions] = useState(["option-1", "option-2"]);

    // function addRadio() {
    //     const newId = options.length + 1;
    //     updateOptions(prev => [...prev, `option-${newId}`]);
    // }

    function toSetCorrectAnswer(id) {
        // {target: {value}} actually passes the value of radio that gets selected in UI
        // which is then split to extract the option number and then passed into this function as 'id'
        // we then set the correct answer inside 'actualOptionData' reference.
        actualOptionData.current = actualOptionData.current.map((item, index) => {
            let text;
            if (index === 0) text = "True";
            else text = "False";
            if (index === (id - 1)) {
                return { text, isCorrect: true }
            }
            else return { text, isCorrect: false };
        });
    }

    React.useEffect(() => {
        return () => {
            actualOptionData.current = [{text: "", isCorrect: false}, {text: "", isCorrect: false}];
        }
    }, []);

    return (
        <Radio.Group onChange={ ({ target: { value } }) => {toSetCorrectAnswer(value.split('-')[1])} } >
            {/* <div className="options-box"> */}
                <Row className='w-100' style={{paddingTop: '6px'}}>
                    <Col className='align--center' span={24}><Radio value={options[0]}>{t('true')}</Radio></Col>
                    <Col className='align--center' span={24}><Radio value={options[1]}>{t('false')}</Radio></Col>
                </Row>
            {/* </div> */}
        </Radio.Group>
    );
}

export default OptionsBoolean;
