/**
 * 页面加载动画
 * User: bjyangxiuwu
 * Date: 2018/12/18
 * Time: 10:11
 */

import React from 'react';
import Transition from 'react-transition-group/Transition';
import PropTypes from 'prop-types';

class LoadPageAnimate extends React.Component {
    propTypes = {
        switchPath: PropTypes.objectOf.isRequired,
        children: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired
    }

    constructor(props, context) {
        super(props, context);
        this.duration = 600;
        this.state = {
            show: true,
            nextChildren: React.cloneElement(props.children)
        };
        this.setTitleAndSendStatistics();
    }

    componentWillReceiveProps(nextProps) {
        const { switchPath } = this.props;

        if (switchPath !== nextProps.switchPath) {
            window.scrollTo(0, 0);
            this.setState({
                show: false
            });
            setTimeout(() => {
                this.setState(
                    {
                        show: true,
                        nextChildren: React.cloneElement(nextProps.children)
                    },
                    () => {
                        this.setTitleAndSendStatistics();
                    }
                );
            }, this.duration);
        }
    }

    setTitleAndSendStatistics() {
        const { title } = this.props;
        // const { href } = window.location;
        // 设置title & 发送统计
        document.title = title;

        // 发送统计
    }

    render() {
        const { show, nextChildren } = this.state;
        return (
            <Transition in={show} timeout={this.duration}>
                { status => <div className={`slideUp slideUp-${status}`}>{nextChildren}</div> }
            </Transition>
        );
    }
}

export default LoadPageAnimate;