import React, { Component }from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import styles from './index.less'
import { ApiServer } from 'api/restful'
import 'lib/gt'
class Geetest extends Component {
    constructor (props) {
        super(props)
        this.state = {
            ins: null,
            error: null
        }
    }

    static propTypes = {
        https: PropTypes.bool,
        product: PropTypes.string,
        lang: PropTypes.string,
        sandbox: PropTypes.bool,
        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        onReady: PropTypes.func,
        onSuccess: PropTypes.func,
        onClose: PropTypes.func,
        onError: PropTypes.func
    }
    static defaultProps = {
        width: '100%',
        https: false,
        product: 'float',
        lang: 'zh-cn', // en zh-cn
        sandbox: false,
        onReady: () => { console.log('onReady') },
        onSuccess: (Validate) => { console.log(`验证结果${!!Validate}`) },
        onClose: () => { console.log('onClose') },
        onError: () => { console.log('onError') }
    }

    componentDidMount = () => {
        this._init()
    }
    componentWillUnmount = () => {
        this._destroy()
    }

    _init = () => {
        if (window.initGeetest) {
            return this._ready()
        }
    }

    _ready = () => {
        const {https, product, lang, sandbox, width} = this.props
        const {
            ins
        } = this.state

        if (!window.initGeetest) {
            return
        }

        if (ins) {
            return this._load(ins)
        }
        ApiServer.getCaptcha().then((res) => {
            const {data} = res.data
            window.initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                success: data.success,
                https,
                product,
                lang,
                sandbox,
                width,
                offline: !data.success
            }, (captchaObj) => {
                this._load(captchaObj)
                this.setState({
                    ins: captchaObj
                })
            })
        }).catch((e) => {
            this.setState({
                error: e
            })
        })
    }

    _load = (ins) => {
        const {
            onReady, onSuccess, onClose, onError
        } = this.props

        ins.appendTo(ReactDOM.findDOMNode(this))
        ins.onReady(onReady)
        ins.onSuccess(() => onSuccess(ins.getValidate()))
        ins.onClose(onClose)
        ins.onError(onError)
    }

    _destroy = () => {
        this.setState({
            ins: null
        })
    }

    render = () => {
        let view = null

        if (this.state.error) {
            view = <p style={{color: 'red'}}>验证码初始化失败,请检查服务是否开启</p>
        } else if (!this.state.ins) {
            view = <p>验证码加载中<span className={styles.dotting} /></p>
        }
        return (
            <div className={styles.VerificationCode}>
                {view}
            </div>
        )
    }
}

export default Geetest