import { spread } from '@open-wc/lit-helpers';
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
import { html } from 'lit';
import { prespread } from '../../.storybook/utilities.js';
import './index.js';
const { events, args, argTypes } = getStorybookHelpers('w-select');
const meta = {
    title: 'Forms/Select',
    render(args) {
        return html `
      <w-select ${spread(prespread(args))}>
        <option value="raspberries">Raspberries</option>
        <option value="strawberries" selected>Strawberries</option>
        <option value="cloudberries">Cloudberries</option>
      </w-select>
    `;
    },
    args,
    argTypes,
    parameters: {
        actions: {
            handles: events,
        },
    },
};
export default meta;
export const Default = {
    args: {
        label: 'Berries',
    },
};
export const HelpText = {
    args: {
        label: 'Berries',
        'help-text': 'We assume this is your jam preference',
    },
};
export const Invalid = {
    args: {
        label: 'Berries',
        invalid: true,
        'help-text': 'Wrong choice',
    },
};
export const Disabled = {
    args: {
        label: 'Berries',
        disabled: true,
    },
};
export const ReadOnly = {
    args: {
        label: 'Berries',
        'read-only': true,
    },
};
export const NoLabel = {
    render(args) {
        return html `
      <div style="display: flex; flex-direction: column; gap: 32px;">
        <w-select ${spread(prespread(args))} aria-label="Your selection is berry nice!">
          <option value="raspberries">Raspberries</option>
          <option value="strawberries" selected>Strawberries</option>
          <option value="cloudberries">Cloudberries</option>
        </w-select>

        <label id="select-label" htmlFor="warp-aria-labelledby-example">
          You're berry good at selecting!
        </label>
        <w-select ${spread(prespread(args))} id="warp-aria-labelledby-example">
          <option value="raspberries">Raspberries</option>
          <option value="strawberries" selected>Strawberries</option>
          <option value="cloudberries">Cloudberries</option>
        </w-select>
      </div>
    `;
    },
};
export const Optional = {
    args: {
        label: 'Berries',
        optional: true,
    },
};
export const Placeholder = {
    args: {
        label: 'Berries',
    },
    render(args) {
        return html `
      <w-select ${spread(prespread(args))}>
        <option value="">Select an option</option>
        <option value="raspberries">Raspberries</option>
        <option value="strawberries">Strawberries</option>
        <option value="cloudberries">Cloudberries</option>
      </w-select>
    `;
    },
};
