import type { Meta, StoryObj } from '@storybook/html';
import { Combobox, type ComboboxOptions } from '@42/core/combobox';
import '@42/styles/combobox.css';

const FRUITS = ['Apple', 'Banana', 'Cherry', 'Dragonfruit', 'Elderberry', 'Fig'];

const meta: Meta<ComboboxOptions> = {
  title: 'Core/Inputs & Forms/Combobox',
  tags: ['autodocs'],
  argTypes: {
    multiple: { control: 'boolean' },
    filter: { control: 'boolean' },
  },
  args: { multiple: false, filter: true },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Combobox = '';
    const optionsHtml = FRUITS.map(
      (fruit) => `<li data-c42-combobox-option data-value="${fruit.toLowerCase()}">${fruit}</li>`,
    ).join('');
    root.innerHTML = `
      <input data-c42-combobox-input placeholder="Search fruit..." />
      <ul data-c42-combobox-list>${optionsHtml}</ul>`;
    new Combobox(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<ComboboxOptions>;

export const Single: Story = {};
export const Multiple: Story = { args: { multiple: true } };