import * as React from 'react';
import SimpleButton from '../../components/SimpleButton';
import { Box } from 'rebass';
export class WizardLegend extends React.Component {
    render() {
        let count = this.props.StepNames.length - 1;
        let activeStepIndex = this.props.StepNames.findIndex((s) => s == this.props.ActiveStepName);
        let stepButtons = this.props.StepNames.map((s, index) => {
            let isActiveStep = index == activeStepIndex;
            let isDisabled = this.props.CanShowAllSteps
                ? false
                : isActiveStep || index > activeStepIndex;
            let style = isActiveStep ? 'primary' : 'default';
            let lastStep = index == count;
            return (React.createElement("div", { className: "ab-WizardLegend__step", "data-name": s, key: index, style: { display: 'inline-block' } },
                React.createElement(SimpleButton, { variant: isActiveStep ? 'raised' : 'outlined', tone: isActiveStep ? 'accent' : 'neutral', disabled: isDisabled, onClick: () => this.onStepButtonClicked(s) }, s),
                lastStep == false && (React.createElement(Box, { mx: 2, "data-name": "separator", className: "ab-WizardLegend__step__separator", style: { display: 'inline-block' } }, "\u2014"))));
        });
        return React.createElement("div", null, stepButtons);
    }
    onStepButtonClicked(stepName) {
        this.props.onStepButtonClicked(stepName);
    }
}
