import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { action } from 'storybook/actions';
import './StepperBottomBar.svelte';
const meta = {
    title: 'Structure/Stepper Bottom Bar',
    component: 'm-stepper-bottom-bar',
    tags: ['v2'],
    parameters: {
        layout: 'fullscreen',
        docs: {
            story: { height: '200px' },
        },
    },
    args: {
        step: 0,
        steps: 3,
    },
    argTypes: {
        cancel: {
            control: false,
        },
        change: {
            control: false,
        },
        validate: {
            control: false,
        },
        '--stepper-bottom-bar-z-index': {
            description: 'Customise the z-index of the stepper bottom bar',
            control: false,
            table: {
                category: 'Custom Properties',
                type: { summary: 'number' },
                defaultValue: { summary: '3' },
            },
        },
    },
    render: (args) => {
        const onCancel = action('cancel');
        const onChange = action('change');
        const onValidate = action('validate');
        return html ` <m-stepper-bottom-bar
      step="${ifDefined(args.step)}"
      steps="${ifDefined(args.steps)}"
      ?cancel="${args.cancel}"
      cancellabel="${ifDefined(args.cancellabel)}"
      previouslabel="${ifDefined(args.previouslabel)}"
      nextlabel="${ifDefined(args.nextlabel)}"
      validatelabel="${ifDefined(args.validatelabel)}"
      @cancel=${(event) => {
            onCancel(event);
        }}
      @change=${(event) => {
            onChange(event.detail);
        }}
      @validate=${(event) => {
            onValidate(event);
        }}
    ></m-stepper-bottom-bar>`;
    },
};
export default meta;
export const First = {};
export const Middle = {
    args: {
        step: 2,
    },
};
export const Last = {
    args: {
        step: 3,
    },
};
