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';
import '../textfield/index.js';
const { events, args, argTypes } = getStorybookHelpers('w-combobox');
const meta = {
    title: 'Forms/Combobox',
    component: 'w-combobox',
    render(args) {
        return html ` <w-combobox ${spread(prespread(args))} .options="${sampleOptions}"></w-combobox> `;
    },
    parameters: {
        docs: {
            description: {
                component: 'A combobox element for text input with selectable options.',
            },
        },
        actions: {
            handles: events,
        },
    },
    args,
    argTypes,
};
export default meta;
const sampleOptions = [
    { value: 'Apple', label: 'Apple' },
    { value: 'Banana', label: 'Banana' },
    { value: 'Orange', label: 'Orange' },
    { value: 'Grape', label: 'Grape' },
    { value: 'Strawberry', label: 'Strawberry' },
    { value: 'Pineapple', label: 'Pineapple' },
    { value: 'Mango', label: 'Mango' },
];
export const Default = {
    args: {},
    render: () => html ` <w-combobox label="Select a fruit" placeholder="Type to search..." .options="${sampleOptions}"></w-combobox> `,
};
export const WithValue = {
    args: {
        options: sampleOptions,
        label: 'Select a fruit',
        placeholder: 'Type to search...',
        value: 'Apple',
    },
};
export const OpenOnFocus = {
    args: {
        options: sampleOptions,
        label: 'Select a fruit',
        placeholder: 'Type to search...',
        openOnFocus: true,
    },
};
export const WithTextMatching = {
    args: {
        options: sampleOptions,
        label: 'Select a fruit',
        placeholder: 'Type to search...',
        matchTextSegments: true,
    },
};
export const Invalid = {
    args: {
        options: sampleOptions,
        label: 'Select a fruit',
        placeholder: 'Type to search...',
        value: 'Invalid fruit',
        helpText: 'Please select a valid fruit from the list',
        invalid: true,
    },
};
export const Disabled = {
    args: {
        options: sampleOptions,
        label: 'Select a fruit',
        placeholder: 'Type to search...',
        value: 'Apple',
        disabled: true,
    },
};
export const Optional = {
    args: {
        options: sampleOptions,
        label: 'Select a fruit',
        placeholder: 'Type to search...',
        optional: true,
    },
};
export const DisableStaticFiltering = {
    render: () => html `
    <w-combobox
      id="combobox-dynamic"
      label="Select a fruit (dynamic)"
      placeholder="Type to search..."
      disable-static-filtering></w-combobox>
    <script type="module">
      const combobox = document.querySelector('#combobox-dynamic');
      const sampleOptions = ${JSON.stringify(sampleOptions)};
      combobox.options = sampleOptions;
      combobox.value = '';

      combobox.addEventListener('change', (e) => {
        combobox.value = e?.detail?.value;
        // Simulate dynamic filtering
        const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e?.detail?.value.toLowerCase()));
        combobox.options = filteredOptions;
      });

      combobox.addEventListener('select', (e) => {
        combobox.value = e?.detail?.value;
      });
    </script>
  `,
};
export const FormSubmission = {
    render: () => 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-combobox
        id="form-submission"
        name="warp-combo-1"
        label="Select a fruit (dynamic)"
        placeholder="Type to search..."
        .options="${sampleOptions}"
      ></w-combobox>
      <br>
      <w-combobox
        id="form-submission"
        name="warp-combo-2"
        label="Select a fruit (dynamic)"
        value="Banana"
        placeholder="Type to search..."
        .options="${sampleOptions}"
      ></w-combobox>
        <button type="reset">Reset</button>
        <button type="submit">Submit</button>
    </form>
  `,
};
