import { html } from 'lit';
import './Combobox.svelte';
import { ifDefined } from 'lit-html/directives/if-defined.js';
const defaultOptions = Array.from({ length: 12 }).map((_el, index) => {
    return {
        id: (index + 1).toString(),
        label: `Option ${index + 1}`,
        value: `option${index + 1}`,
    };
});
let optionCount = 0;
const optionsWithSections = Array.from({ length: 12 }).map((_el, index) => {
    const isSection = index % 3 === 0;
    if (!isSection) {
        optionCount++;
    }
    return {
        label: `${isSection ? 'Section' : 'Option'} ${isSection ? index / 3 + 1 : optionCount}`,
        value: !isSection ? `option${optionCount}` : undefined,
        type: isSection ? 'section' : 'option',
    };
});
const meta = {
    title: 'Form elements/Combobox',
    component: 'm-combobox',
    tags: ['v2'],
    parameters: {
        docs: {
            story: {
                height: '300px',
            },
        },
    },
    args: {
        search: false,
        actions: true,
        value: null,
        checkablesections: true,
        options: defaultOptions,
    },
    render: (args) => html `
    <m-combobox
      .value="${args.value}"
      ?multiple="${args.multiple}"
      ?compact="${args.compact}"
      size="${ifDefined(args.size)}"
      ?disabled="${args.disabled}"
      ?readonly="${args.readonly}"
      ?invalid="${args.invalid}"
      ?clearable="${args.clearable}"
      ?search="${args.search}"
      ?actions="${args.actions}"
      ?checkablesections="${args.checkablesections}"
      placeholder="${ifDefined(args.placeholder)}"
      counterlabel="${ifDefined(args.counterlabel)}"
      searchplaceholder="${ifDefined(args.searchplaceholder)}"
      selectlabel="${ifDefined(args.selectlabel)}"
      clearlabel="${ifDefined(args.clearlabel)}"
      showlabel="${ifDefined(args.showlabel)}"
      .options="${args.options}"
    ></m-combobox>
  `,
};
export default meta;
export const Standard = {};
export const Multiple = {
    args: {
        multiple: true,
        value: [],
    },
};
export const SearchInput = {
    args: {
        search: true,
        value: [],
        multiple: true,
    },
};
export const ActionButtons = {
    args: {
        value: [],
        multiple: true,
        actions: true,
    },
};
export const WithSections = {
    args: {
        options: optionsWithSections,
    },
};
export const SelectableSections = {
    args: {
        value: [],
        multiple: true,
        options: optionsWithSections,
        checkablesections: true,
    },
};
export const Clearable = {
    args: {
        clearable: true,
    },
};
export const Disabled = {
    args: {
        disabled: true,
    },
};
export const Readonly = {
    args: {
        readonly: true,
    },
};
export const Invalid = {
    args: {
        invalid: true,
    },
};
export const AdditionalInformation = {
    args: {
        options: defaultOptions.map((option) => ({
            ...option,
            content: 'Additional information',
        })),
    },
};
