import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {TabPanel} from './TabPanel';
import {TabItem} from './TabItem';
import {Icon} from './Icon';
import {Block} from './Block';

export class WizardNavbar extends React.Component<any> {
    static contextTypes = {
        wizard: PropTypes.object.isRequired
    };

    render() {
        let currentStepIndex = this.context.wizard.getCurrentStepIndex();
        let maxVisitedStepIndex = this.context.wizard.getMaxVisitedStepIndex();

        return (
            <Block cancelBottomOffset>
                <TabPanel centered noBorder>
                    {this.context.wizard
                        .getSteps()
                        .filter(step => {
                            return !step.props.skipNavbarItem;
                        })
                        .map((step, index) => {
                            let isPassed = index < currentStepIndex;
                            let isCurrent = index === currentStepIndex;

                            let isBlocked = step.props.disabled || index > maxVisitedStepIndex;

                            return (
                                <TabItem
                                    key={'wizardStep-' + step.props.id}
                                    testAutomationId={step.props.id}
                                    active={isCurrent}
                                    disabled={isBlocked}
                                    className={classnames({success: isPassed})}
                                    onSelect={() => this.context.wizard.goToStep(step.props.id)}>
                                    {isPassed ? (
                                        <Icon name="checkbox-selected-readonly" />
                                    ) : (
                                        <strong>{index + 1}</strong>
                                    )}
                                    {step.props.tabText || step.props.title}
                                </TabItem>
                            );
                        })}
                </TabPanel>
            </Block>
        );
    }
}
