import React from 'react';
import { Combobox } from './react';
export default {
    title: 'Forms/Combobox',
    component: Combobox,
    render(args) {
        return React.createElement(Combobox, { ...args, options: sampleOptions });
    },
};
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: {
        options: sampleOptions,
        label: 'Select a fruit',
        placeholder: 'Type to search...',
    },
};
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: () => {
        const [options, setOptions] = React.useState(sampleOptions);
        const [val, setVal] = React.useState('');
        return (React.createElement(Combobox, { id: "combobox-dynamic", label: "Select a fruit (dynamic)", placeholder: "Type to search...", disableStaticFiltering: true, value: val, options: options, onChange: (e) => {
                setVal(e.detail.value);
                // Simulate dynamic filtering
                const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e.detail.value.toLowerCase()));
                setOptions(filteredOptions);
            }, onSelect: (e) => {
                setVal(e.detail.value);
            } }));
    },
};
