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-textfield');
const meta = {
    title: 'Forms/Textfield',
    render(args) {
        return html `<w-textfield ${spread(prespread(args))}></w-textfield>`;
    },
    args,
    argTypes,
    parameters: {
        actions: {
            handles: events,
        },
    },
};
export default meta;
export const Default = {
    args: {
        label: 'Email',
        type: 'email',
    },
};
export const WithPlaceholder = {
    args: {
        label: 'Email',
        placeholder: 'user@example.com',
        type: 'email',
    },
};
export const WithHelpText = {
    args: {
        label: 'Password',
        'help-text': 'Must be at least 8 characters',
        type: 'password',
    },
};
export const Invalid = {
    args: {
        label: 'Email',
        invalid: true,
        'help-text': 'Please enter a valid email address',
        value: 'invalid-email',
        type: 'email',
    },
};
export const Disabled = {
    args: {
        label: 'Email',
        disabled: true,
        value: 'user@example.com',
        type: 'email',
    },
};
export const ReadOnly = {
    args: {
        label: 'Email',
        'read-only': true,
        value: 'user@example.com',
        type: 'email',
    },
};
export const Required = {
    args: {
        label: 'Email',
        required: true,
        type: 'email',
    },
};
export const WithAffix = {
    args: {
        label: 'Price',
        placeholder: '1 000 000',
        type: 'text',
    },
    render(args) {
        return html `
      <w-textfield ${spread(prespread(args))}>
        <w-affix slot="suffix" label="kr"></w-affix>
      </w-textfield>
    `;
    },
};
export const Masking = {
    args: {
        label: 'Price',
        placeholder: '1 000 000',
        type: 'text',
        locale: 'nb',
    },
    render({ locale, ...args }) {
        return html `
      <w-textfield ${spread(prespread(args))} data-testid="masking">
        <w-affix slot="suffix" label="kr"></w-affix>
      </w-textfield>
      <script type="module">
        const maskingTextfield = document.querySelector('w-textfield[data-testid="masking"]');
        maskingTextfield.formatter = window.getNumberFormatter('${locale}').format;
      </script>
    `;
    },
};
export const FormParticipation = {
    args: {
        type: 'text',
    },
    render({ locale, ...args }) {
        return html `
      <p>Resetting the form should return values to the initial values</p>
      <p>Submitting the form should result in the values being in the resulting pages query parameters</p>
      <form>
        <w-textfield ${spread(prespread(args))} name="warp-textfield-1" placeholder="type here" label="field 1"></w-textfield>
        <w-textfield ${spread(prespread(args))} name="warp-textfield-2" value="prefilled" label="field 2"></w-textfield>
        <button type="reset">Reset</button>
        <button type="submit">Submit</button>
      </form>
    `;
    },
};
