import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftScreenReaderOnly, SoftKeyboardAccessible, } from '../Accessibility';
import { SoftI18n, } from '../I18n';
import { STATUS, SoftStepNumber, } from './SoftStepNumber';
export const SoftStepHorizontal = ({ className, step, title, isSelected, isComplete, onClick, disabled, status, ...rest }) => {
    const classes = classNames('softStepHorizontal', className, {
        'softStepHorizontal-isSelected': isSelected,
        'softStepHorizontal-isComplete': isComplete,
        'softStepHorizontal-isIncomplete': !isSelected && !isComplete,
        'softStepHorizontal-isDisabled': disabled,
    });
    if (disabled) {
        status = 'disabled';
    }
    else if (isComplete) {
        status = 'complete';
    }
    else if (isSelected) {
        status = status;
    }
    else if (!isComplete && !status) {
        status = 'incomplete';
    }
    const onStepClick = e => {
        if (disabled) {
            return;
        }
        onClick(e);
    };
    return (React.createElement(SoftI18n, { token: "softStepHorizontal.buttonTitle", default: ({ step, title, disabled, isComplete }) => {
            let titleAppendix = '';
            if (disabled) {
                titleAppendix = ' is disabled';
            }
            else if (isComplete) {
                titleAppendix = ' is complete';
            }
            return `Step ${step}: ${title}${titleAppendix}`;
        }, values: { step, title, disabled, isComplete } }, buttonTitle => (React.createElement(SoftKeyboardAccessible, null,
        React.createElement("div", Object.assign({ role: "tab", "aria-selected": !!isSelected, "aria-disabled": !!disabled, className: classes, onClick: onStepClick, tabIndex: disabled ? -1 : 0, title: buttonTitle }, rest),
            React.createElement(SoftScreenReaderOnly, null,
                React.createElement("div", null,
                    React.createElement(SoftI18n, { token: "softStepHorizontal.step", default: "Step" }))),
            React.createElement(SoftStepNumber, { className: "softStepHorizontal__number", status: status, number: step }),
            React.createElement("div", { className: "softStepHorizontal__title" }, title))))));
};
// @ts-ignore
SoftStepHorizontal.propTypes = {
    isSelected: PropTypes.bool,
    isComplete: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    step: PropTypes.number.isRequired,
    title: PropTypes.node,
    className: PropTypes.string,
    disabled: PropTypes.bool,
    /**
     * Will replace the number provided in props.step with alternate styling.
     * Options: `complete`, `incomplete`, `warning`, `danger`, `disabled`.
     * The `isSelected`, `isComplete`, and `disabled` props will override these.
     */
    status: PropTypes.oneOf(STATUS),
};
// @ts-ignore
SoftStepHorizontal.defaultProps = {
    isSelected: false,
    isComplete: false,
    disabled: false,
};
//# sourceMappingURL=SoftStepHorizontal.js.map