import { CheckCircleFilled } from '@ant-design/icons';
import { MathJax } from 'better-react-mathjax';
import Markdown from 'marked-react';
import React, { useMemo } from 'react';
import SimpleEditorOption from '../createQuestion2test/MDEditorOption';
import { RepeatedData } from '../../RepeatedDataProvider';

const emptyCircleStyle = {
    height: 16,
    aspectRatio: "1",
    border: '1px solid #3b3cea30',
    borderRadius: '100%'
}

const OpRadio = ({options, actualTranslatedData}) => {

    const {data} = React.useContext(RepeatedData);

    actualTranslatedData.current = useMemo(() => (
        options.map(opt => ({text: "", isCorrect: opt.isCorrect}))
    ), options);

    const renderer = {
        paragraph(text) {
            return <MathJax key={"math-fromula"}>{text}</MathJax>
        },
        html(text) {
            return <span key={"title-span"}>{text}</span>;
        }
    }

    // mapping an array of HTML Node from option array. 
    const OptionRender = useMemo(() => (
        options.map((opt, i) => {
            return <div key={`opt-`+i}>
                <span> { opt.isCorrect
                    ? <CheckCircleFilled style={{color: 'limegreen', fontSize: 16}} />
                    : <div style={emptyCircleStyle} />}</span>
                <div className='question-preview-lang'><Markdown renderer={renderer}>{opt.text}</Markdown></div>
                <span></span>
                <SimpleEditorOption
                    placeholder="Translate above option"
                    actualOptionData={actualTranslatedData}
                    idName={i}
                    toolbarContainerLoaded={true}
                    mathJax={data.mathJax}
                />
            </div>
        })
    ), options);

    return (
        <>
            {OptionRender}
        </>
    );
}

export default OpRadio;
