import React from 'react';
import PropTypes from 'prop-types';
import './style.scss';
import WizardSubstep from '../Model/WizardSubstep';

const WizardActions = ({
    show, isShowBackButton, isShowNextButton, currentSubstep, backStepCallback, nextStepCallback, disableNextStepButton,
}) => {

    function BackStepButton() {
        if (!isShowBackButton) {
            return null;
        }

        return (
            <button
                className="button button_link"
                onClick={() => backStepCallback()}
            >
                Back
            </button>
        );
    }

    function NextStepButton() {
        if (!isShowNextButton) {
            return null;
        }

        return (
            <button
                className="button button_primary"
                onClick={() => nextStepCallback()}
                disabled={disableNextStepButton}
            >
                {currentSubstep.nextButtonLabel}
            </button>
        );
    }

    if (!show) {
        return null;
    }

    return (
        <div className="WizardActions">
            <BackStepButton />
            <NextStepButton />
        </div>
    );
};

WizardActions.propTypes = {
    show: PropTypes.bool.isRequired,
    isShowBackButton: PropTypes.bool.isRequired,
    isShowNextButton: PropTypes.bool.isRequired,
    currentSubstep: PropTypes.instanceOf(WizardSubstep).isRequired,
    backStepCallback: PropTypes.func.isRequired,
    nextStepCallback: PropTypes.func.isRequired,
    disableNextStepButton: PropTypes.bool.isRequired,
};

export default WizardActions;