import React, { useEffect, useState } from 'react'
import EditorComponent from '../../components/RichEditor'
import { Button, Checkbox, Radio, RadioChangeEvent, Space } from 'antd'
import error from '../../assets/error.svg'
import questionSuccess from '../../assets/questionSuccess.svg'
import Icon_Warning from '../../assets/Icon_Warning.svg'
import arrowIcon from '../../assets/arrowIcon.svg'

type QuestionProps = {
    data: any
    report: any
    updateActivity?: (activityId: string, topicConfig: string, topicResult: string, topicStatus: '0' | '1') => Promise<any>
    preActive?: (data: any) => boolean | void
}

const Question: React.FC<QuestionProps> = (props) => {

    const { data = {}, report, updateActivity, preActive } = props

    const { category, title = '', options = [], buttonName = '', auxiliary = [], selected } = data
    
    // 选项校验
    const [tip, setTip] = useState<'' | 'success' | 'error'>('')
    // 校验失败显示提示
    const [showAuxiliary, setShowAuxiliary] = useState(true)
    // 是否提交
    const [submit, setSubmit] = useState(false)
    // 用来判断是否点击过按钮
    const [hasClick, setHasClick] = useState(0)

    // 单选
    const [value, setValue] = useState()
    const onChange = (e: RadioChangeEvent) => {
        setValue(e.target.value)
        reset()
    }

    // 多选
    const [check, setCheck] = useState([])
    const onCheckChange = (checkedValues: any) => {
        setCheck(checkedValues)
        reset()
    }

    // 提交后重新选择需要重置状态
    const reset = () => {
        if (tip) {
            setTip('')
        }
        if (!showAuxiliary) {
            setShowAuxiliary(true)
        }
        if (submit) {
            setSubmit(false)
        }
    }

    // 提交校验
    const verify = () => {
        if (preActive && preActive(data)) return
        setHasClick((pre) => ++pre)
        report()
        // 单选  同时执行数据更改
        if (category === 'radio') {
            setTip(value === selected ? 'success' : 'error')
            updateActivity?.(data.id, JSON.stringify(data), value!, value === selected ? '1' : '0')
        } else {
            setTip(check.join(',') === selected ? 'success' : 'error')
            updateActivity?.(data.id, JSON.stringify(data), check.join(','), check.join(',') === selected ? '1' : '0')
        }
        setSubmit(true)
    }

    useEffect(() => {
        if (data?.topicResult) {
            // 设置成功的状态
            setTip(data?.topicStatus === '1' ? 'success' : 'error')
            setShowAuxiliary(data?.topicStatus === '0')
            setSubmit(true)
            // 设置选项
            if (data?.category === 'radio') {
                setValue(data?.topicResult)
            } else {
                try {
                    const sel = data.topicResult.split(',')
                    setCheck(sel)
                } catch (error) { }
            }
            setHasClick(1)
        } else {
            setTip('')
        }
    }, [data])


    return (
        <div className='question question-active' contentEditable={false} data-hasclick={!!hasClick} data-success={tip === 'success'} data-required={data?.required ?? false} data-requiredcorrect={data?.requiredCorrect ?? false}>
            <div className='question-title'>
                <div className='title'>选择题</div>
                <span>{category === 'radio' ? '单选' : '多选'}</span>
            </div>
            <div className='question-content'>
                <EditorComponent value={title} />
            </div>
            <div className='question-select'>
                {
                    category === 'radio' ? <Radio.Group onChange={onChange} value={value}>
                        <Space direction="vertical">
                            {
                                options.map((item: any) => {
                                    return <Radio value={item?.key} key={item?.key}>{item?.value}</Radio>
                                })
                            }
                        </Space>
                    </Radio.Group> : <Checkbox.Group onChange={onCheckChange} value={check}>
                        <Space direction="vertical">
                            {
                                options.map((item: any) => {
                                    return <Checkbox value={item?.key} key={item?.key}>{item?.value}</Checkbox>
                                })
                            }
                        </Space>
                    </Checkbox.Group>
                }
            </div>

            <div className='question-tip'>
                {
                    tip ? tip === 'success' ? <div className='question-tip-success'>
                        <img height={12} src={questionSuccess} alt="" />
                        <span style={{ marginLeft: '3px' }}>回答正确</span>
                    </div> : <div className='question-tip-error'>
                        <img height={12} src={error} alt="" />
                        <span style={{ marginLeft: '3px' }}>回答错误，请重新作答！</span>
                    </div> : <></>
                }
            </div>
            
            {
                auxiliary?.length > 0 && tip === 'error' && <div className='question-auxiliary'>
                    <div className='question-auxiliary-title'>
                        <img src={Icon_Warning} alt="" />
                        <span>提示</span>
                        <img src={arrowIcon} alt="" onClick={() => {
                            setShowAuxiliary(!showAuxiliary)
                        }} style={{transition: '.3s', transform: showAuxiliary ? '' : 'rotate(180deg)'}}/>
                    </div>
                    {
                        showAuxiliary && <div className='question-auxiliary-content'>
                            <EditorComponent value={auxiliary[0]?.description || ''} />
                        </div>
                    }
                </div>
            }

            <Button disabled={category === 'radio' ? !value : !check?.length } type='primary' style={{ minWidth: '88px', marginTop: '20px' }} onClick={verify}>{submit ? '已提交' : buttonName}</Button>
        </div>
    )
}

export default Question