import { create, tsx } from '@dojo/framework/core/vdom';
import theme from '../middleware/theme';
import Icon from '../icon';
import * as css from '../theme/default/wizard.m.css';
import * as avatarCss from '../theme/default/avatar.m.css';
import Avatar from '../avatar';
const stepFactory = create({ theme })
    .properties()
    .children();
export const Step = stepFactory(({ children, middleware: { theme } }) => {
    const [{ title, subTitle, description } = {
        description: undefined,
        title: undefined,
        subTitle: undefined
    }] = children();
    const themedCss = theme.classes(css);
    return (tsx("div", { classes: [theme.variant(), themedCss.stepContent] },
        tsx("div", { classes: [
                themedCss.stepTitle,
                !title && themedCss.noTitle,
                !description && themedCss.noDescription
            ] },
            title,
            tsx("div", { classes: themedCss.stepSubTitle }, subTitle)),
        tsx("div", { classes: themedCss.stepDescription }, description)));
});
const factory = create({ theme })
    .children()
    .properties();
export default factory(function Wizard({ properties, children, middleware: { theme } }) {
    const themedCss = theme.classes(css);
    const { activeStep, direction = 'horizontal', onStep, clickable = false, classes, variant, theme: themeProp } = properties();
    const stepNodes = children();
    const stepWrappers = stepNodes.map((step, index) => {
        let content;
        let defaultStatus;
        if (activeStep === undefined) {
            defaultStatus = undefined;
        }
        else if (activeStep > index) {
            defaultStatus = 'complete';
        }
        else if (activeStep < index) {
            defaultStatus = 'pending';
        }
        else {
            defaultStatus = 'inProgress';
        }
        const { status = defaultStatus } = step.properties;
        switch (status) {
            case 'complete':
                content = (tsx(Icon, { type: "checkIcon", theme: themeProp, classes: classes, variant: variant }));
                break;
            case 'error':
                content = (tsx(Icon, { type: "closeIcon", theme: themeProp, classes: classes, variant: variant }));
                break;
            default:
                content = String(index + 1);
        }
        return {
            content: (tsx("virtual", null,
                tsx("div", { classes: themedCss.stepIcon },
                    tsx(Avatar, { theme: theme.compose(avatarCss, css, 'avatar'), classes: classes, variant: variant, outline: Boolean(status !== 'inProgress') }, content)),
                step)),
            status
        };
    });
    return (tsx("div", { key: "root", classes: [
            theme.variant(),
            themedCss.root,
            direction === 'horizontal' ? themedCss.horizontal : themedCss.vertical,
            clickable && themedCss.clickable
        ] }, stepWrappers.map(({ content, status }, index) => (tsx("div", { key: `step${index + 1}`, classes: [
            themedCss.step,
            status === 'complete' && themedCss.complete,
            status === 'pending' && themedCss.pending,
            status === 'error' && themedCss.error
        ], onclick: () => {
            if (clickable && onStep) {
                onStep(index);
            }
        } },
        tsx("div", { classes: themedCss.tail }),
        content)))));
});

/*# sourceMappingURL=index.mjs.map*/