import type { Meta, StoryObj } from '@storybook/html';
import { Checkbox, RadioGroup, Switch } from '@42/core/choice';
import '@42/styles/choice.css';

const snippet = `import { Checkbox, Switch, RadioGroup } from '@42/core/choice';

new Checkbox(document.querySelector('[data-c42-checkbox]')!, { checked: true });
new Switch(document.querySelector('[data-c42-switch]')!);
const group = new RadioGroup(document.querySelector('[data-c42-radio-group]')!, {
  defaultValue: 'b',
});
group.on('radio:change', (e) => console.log(e.detail.value));`;

const meta: Meta = {
  title: 'Core/Inputs & Forms/Choice',
  tags: ['autodocs'],
  parameters: {
    docs: { source: { code: snippet, language: 'ts' } },
  },
  render: () => {
    const wrap = document.createElement('div');
    wrap.style.display = 'flex';
    wrap.style.flexDirection = 'column';
    wrap.style.gap = '1rem';
    wrap.innerHTML = `
      <button data-c42-checkbox>Accept terms and conditions</button>
      <button data-c42-checkbox data-demo="indeterminate">Select all</button>
      <button data-c42-switch>Enable notifications</button>
      <div data-c42-radio-group>
        <div data-c42-radio data-value="a">Standard shipping</div>
        <div data-c42-radio data-value="b">Express shipping</div>
        <div data-c42-radio data-value="c">Pickup in store</div>
      </div>`;

    const [checkbox, indeterminate] = Array.from(
      wrap.querySelectorAll<HTMLElement>('[data-c42-checkbox]'),
    );
    new Checkbox(checkbox);
    new Checkbox(indeterminate, { indeterminate: true });
    new Switch(wrap.querySelector<HTMLElement>('[data-c42-switch]')!);
    new RadioGroup(wrap.querySelector<HTMLElement>('[data-c42-radio-group]')!, {
      defaultValue: 'b',
    });

    return wrap;
  },
};

export default meta;

type Story = StoryObj;

export const Default: Story = {};