import React from 'react';
import PropTypes from 'prop-types';
import {Popup} from './popups/Popup';
import {Button} from './Button';
import {Block} from './Block';
import {WizardNavbar} from './WizardNavbar';
import {translate} from '../../utils';
import classnames from 'classnames';

export class WizardStep extends React.Component {
    static contextTypes = {
        wizard: PropTypes.object.isRequired
    };

    static propTypes = {
        children: PropTypes.node,
        id: PropTypes.string.isRequired,
        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
        bsSize: PropTypes.string,
        header: PropTypes.node,
        footer: PropTypes.node,
        backText: PropTypes.string,
        cancelText: PropTypes.string,
        nextText: PropTypes.string,
        tabText: PropTypes.string,
        footerConfig: PropTypes.shape({rightBtnDisabled: PropTypes.bool}),
        validation: PropTypes.func,
        noPadding: PropTypes.bool,
        noBottomPadding: PropTypes.bool,
        testAutomationId: PropTypes.string,
        className: PropTypes.string,
        noTitlePadding: PropTypes.bool,
        skipNavbarItem: PropTypes.bool,
        onStepLeave: PropTypes.func,
        onClose: PropTypes.func,
        closeButton: PropTypes.bool
    };

    static defaultProps = {
        children: null,
        bsSize: 'large',
        testAutomationId: 'wizardstep',
        header: null,
        footer: null,
        footerConfig: null,
        tabText: '',
        backText: 'TRANSLATE:BACK',
        cancelText: 'TRANSLATE:CANCEL',
        nextText: 'TRANSLATE:NEXT',
        className: null,
        noTitlePadding: false,
        skipNavbarItem: false,
        noPadding: false,
        noBottomPadding: false,
        validation: null,
        onStepLeave: null,
        onClose: null,
        closeButton: true
    };

    constructor(props, context) {
        super(props, context);
        this.context.wizard.addStepOnLeaveHandler(this.props.id, this.onStepLeave.bind(this));
    }

    getDefaultButtons(footerConfig = {}) {
        let left;
        let right;
        footerConfig = {
            ...this.props.footerConfig,
            ...footerConfig
        };

        if (!this.context.wizard.isFirstStep(this.props.id)) {
            left = (
                <Button
                    onClick={this.context.wizard.goBack}
                    testAutomationId="backButton"
                    key="backButton">
                    {translate(this.props.backText)}
                </Button>
            );
        } else {
            left = (
                <Button onClick={Popup.close} testAutomationId="cancelButton" key="cancelButton">
                    {translate(this.props.cancelText)}
                </Button>
            );
        }

        right = (
            <Button
                onClick={this.context.wizard.goNext}
                disabled={footerConfig.rightBtnDisabled}
                bsStyle="primary"
                testAutomationId="nextButton"
                key="nextButton">
                {translate(this.props.nextText)}
            </Button>
        );

        return [left, right];
    }

    getDefaultNavbar() {
        return <WizardNavbar />;
    }

    getFooter() {
        return this.props.footer || this.getDefaultButtons();
    }

    getHeader() {
        return this.props.header || this.getDefaultNavbar();
    }

    /**
     * @abstract
     * @returns {Promise.<T>}
     */
    onStepLeave() {
        return (this.props.onStepLeave && this.props.onStepLeave()) || Promise.resolve();
    }

    isAnimated() {
        return this.context.wizard.getMaxVisitedStepIndex() === 0;
    }

    render() {
        let {noTitlePadding, title} = this.props;

        let popupTitle = noTitlePadding ? title : <Block>{title}</Block>;

        return (
            <Popup
                className={classnames(this.props.className)}
                animation={this.isAnimated()}
                noPadding={this.props.noPadding}
                noBottomPadding={this.props.noBottomPadding}
                onClose={this.props.onClose}
                closeButton={this.props.closeButton}
                bsSize={this.props.bsSize}
                title={popupTitle}
                header={this.getHeader()}
                testAutomationId={this.props.testAutomationId}
                footer={this.getFooter()}>
                {this.props.children}
            </Popup>
        );
    }
}
