import React from 'react'
import PropTypes from 'prop-types'
import { autobind } from 'core-decorators'
import Touch from 'react-icons/lib/md/touch-app'
import './Guide-Style.scss';

const propTypes = {
    guideCloseCondition: PropTypes.number,
    guideData: PropTypes.array,
};

const defaultProps = {
    guideCloseCondition: 1,
    guideData: [],
};

@autobind
class Guide extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            current: 0,
            visible: true,
            left: 0,
            top: 0,
            float: 'left',
        };
    }

    componentDidMount() {
        this.setState({
            visible: true
        });
    }

    getDomPosition(selector) {
        let dom = document.querySelector(selector);
        let t = 0, l = 0;
        if (!dom) {
            return {
                t,
                l,
            };
        }
        //从目标元素开始向外遍历，累加top和left值
        for (t = dom.offsetTop, l = dom.offsetLeft; dom = dom.offsetParent;) {
            // 组件开发模式下，计算位置有问题
            if (dom.className !== 'fb-content') {
                t += dom.offsetTop;
                l += dom.offsetLeft;
            }
        }
        document.querySelector(selector).scrollIntoView({
            block: 'start',
            behavior: 'smooth'
        });
        return {
            t,
            l,
        };
    }

    triggerStep() {
        const {
            guideData = [],
        } = this.props;
        const next = this.state.current + 1;
        if (next === guideData.length) {
            try {
                localStorage.closeStepGuide = (+localStorage.closeStepGuide || 0) + 1;
                this.setState({
                    visible: false
                });
            } catch (ex) {
                throw ex;
            }
        } else {
            const pos = this.getDomPosition(guideData[next].selector);
            this.setState({
                current: next,
                left: pos.l,
                top: pos.t,
                float: pos.l > 300 ? 'right' : 'left',
                visible: next < guideData.length
            });
        }
    }

    render() {
        const {
            guideData = [],
            guideCloseCondition = 1,
        } = this.props;
        const {
            current = 0,
            visible = true,
            float = 'left',
        } = this.state;
        let {
            left = 0,
            top = 0,
        } = this.state;
        let closeStepGuideValue = 0;
        try {
            closeStepGuideValue = localStorage.closeStepGuide;
        } catch (ex) {
            throw ex;
        }
        if (!visible || `${closeStepGuideValue}` === `${guideCloseCondition}` || !guideData || !guideData.length) {
            return null;
        }
        if (current === 0) {
            const pos = this.getDomPosition(guideData[current].selector);
            left = pos.l;
            top = pos.t;
        }
        return (
            <div className="rui-step-content">
                <div className="rui-step-guide" style={{
                    left: `${left}px`,
                    top: `${top}px`
                }} onClick={this.triggerStep}>
                    <div>
                        <span className="clickLogo">
                            <Touch size={30} />
                        </span>
                    </div>
                    <div className="guide-item" style={{
                        float: float
                    }}>
                        <span className="step-num">{current + 1}</span>
                        <span className="step-content" dangerouslySetInnerHTML={{__html: guideData[current].guideContent}}></span>
                    </div>
                </div>
                {/* <div id="rui-mask" className="rui-mask" onClick={this.triggerStep}></div> */}
            </div>
        );
    }
}

Guide.propTypes = propTypes;
Guide.defaultProps = defaultProps;

export { Guide as PureGuide }
export default Guide