import type { Meta, StoryObj } from '@storybook/html';
import { NestedSelect, type NestedSelectOptions } from '@42/core/nested-select';
import '@42/styles/nested-select.css';

const GROUPS = [
  { label: 'Fruits', options: [['apple', 'Apple'], ['banana', 'Banana'], ['cherry', 'Cherry']] },
  { label: 'Veggies', options: [['carrot', 'Carrot'], ['potato', 'Potato']] },
];

const meta: Meta<NestedSelectOptions> = {
  title: 'Core/Inputs & Forms/NestedSelect',
  tags: ['autodocs'],
  argTypes: {
    filter: { control: 'boolean' },
    placeholder: { control: 'text' },
  },
  args: { filter: true, placeholder: 'Select items' },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42NestedSelect = '';
    const groups = GROUPS.map(
      (g) => `
      <li data-c42-nested-select-group>
        <button data-c42-nested-select-parent>${g.label}</button>
        <ul>
          ${g.options
            .map(
              ([value, label]) =>
                `<li data-c42-nested-select-option data-value="${value}" data-search="${label.toLowerCase()}">${label}</li>`,
            )
            .join('')}
        </ul>
      </li>`,
    ).join('');
    root.innerHTML = `
      <button data-c42-nested-select-trigger><span data-c42-nested-select-value></span></button>
      <div data-c42-nested-select-panel>
        <input data-c42-nested-select-search placeholder="Search..." />
        <ul data-c42-nested-select-list>${groups}</ul>
      </div>`;
    new NestedSelect(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<NestedSelectOptions>;

export const Default: Story = {};
export const WithSelection: Story = { args: { defaultValue: ['apple', 'carrot'] } };