import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { action } from 'storybook/actions';
import './SegmentedControl.svelte';
const meta = {
    title: 'Action/Segmented Control',
    component: 'm-segmented-control',
    tags: ['v2'],
    argTypes: {
        size: {
            control: 'radio',
            options: ['s', 'm'],
        },
        change: {
            control: false,
        },
    },
    args: {
        selected: 'label2',
        segments: [
            {
                id: 'label1',
                label: 'Label',
            },
            {
                id: 'label2',
                label: 'Label',
            },
            {
                id: 'label3',
                label: 'Label',
            },
            {
                id: 'label4',
                label: 'Label',
            },
        ],
    },
    render: (args) => {
        const onChange = action('change');
        return html `
      <m-segmented-control
        selected="${args.selected}"
        ?full=${args.full}
        size=${ifDefined(args.size)}
        .segments=${ifDefined(args.segments)}
        @change=${(event) => {
            onChange(event);
        }}
      ></m-segmented-control>
    `;
    },
};
export default meta;
export const Default = {};
export const Size = {
    args: { size: 'm' },
};
export const Full = {
    args: { full: true },
};
