import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Icon from '../Icon';
import Countdown from '../Countdown';

class ErrorStatePanel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isInErrorState: this.props.isInErrorState,
        };
        this.interval = null;
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            ...nextProps,
        });
    }

    pageReload() {
        if (this.props.beforeReload) {
            this.props.beforeReload();
        }

        window.location.reload();
    }

    render() {
        if (!this.state.isInErrorState) {
            return null;
        }

        return (
            <div className="data-state">
                {this.state.isInErrorState}
                <div className="data-state__icon">
                    <Icon
                        name="build"
                        color="gray"
                        size="large"
                    />
                </div>
                <div className="data-state__title">
                    Oops something went wrong?
                </div>
                <div className="data-state__content">
                    We are aware of the issue and already<br />
                    working to resolve it. Please wait for&nbsp;
                    <Countdown
                        runCountdown={this.state.isInErrorState}
                        time={30}
                        doneCallback={() => {
                            window.location.reload();
                        }}
                    /> seconds<br />
                    or&nbsp;
                    <span
                        tabIndex="0"
                        onKeyPress={() => {
                        }}
                        role="button"
                        className="link"
                        onClick={() => {
                            this.pageReload();
                        }}
                    >
                        reload page
                    </span>
                </div>
            </div>
        );
    }
}

ErrorStatePanel.propTypes = {
    isInErrorState: PropTypes.bool,
    beforeReload: PropTypes.func,
};

ErrorStatePanel.defaultProps = {
    isInErrorState: false,
    beforeReload: () => {
    },
};

export default ErrorStatePanel;