import type { Meta, StoryObj } from '@storybook/html';
import { Select, type SelectOptions } from '@42/core/select';
import '@42/styles/select.css';

const snippet = `import { Select } from '@42/core/select';
import '@42/styles/select.css';

const select = new Select(document.querySelector('[data-c42-select]')!, {
  placeholder: 'Choose a fruit…',
});
select.on('select:change', (e) => console.log(e.detail.value, e.detail.label));`;

const meta: Meta<SelectOptions> = {
  title: 'Core/Inputs & Forms/Select',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    defaultValue: { control: 'text' },
    placeholder: { control: 'text' },
  },
  args: {
    placeholder: 'Choose a fruit…',
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Select = '';
    root.innerHTML = `
      <button data-c42-select-trigger>
        <span data-c42-select-value>${args.placeholder ?? 'Choose…'}</span>
      </button>
      <div data-c42-select-listbox>
        <div data-c42-select-option data-value="apple">Apple</div>
        <div data-c42-select-option data-value="banana">Banana</div>
        <div data-c42-select-option data-value="cherry">Cherry</div>
        <div data-c42-select-option data-value="durian" aria-disabled="true">Durian</div>
        <div data-c42-select-option data-value="elderberry">Elderberry</div>
      </div>`;
    new Select(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<SelectOptions>;

export const Default: Story = {};

export const WithDefaultValue: Story = {
  args: { defaultValue: 'banana' },
};