import type { Meta, StoryObj } from '@storybook/html';
import { Tree, type TreeOptions } from '@42/core/tree';
import '@42/styles/tree.css';

const meta: Meta<TreeOptions> = {
  title: 'Core/Data & Collections/Tree',
  tags: ['autodocs'],
  argTypes: {
    expandAll: { control: 'boolean' },
    treeSelection: { control: 'boolean' },
  },
  args: { expandAll: true, treeSelection: true },
  render: (args) => {
    const root = document.createElement('ul');
    root.dataset.c42Tree = '';
    root.innerHTML = `
      <li data-c42-tree-item data-value="lists">
        <div data-c42-tree-row>
          <button data-c42-tree-toggle aria-label="toggle"></button>
          <label><input type="checkbox" data-c42-tree-checkbox /> Lists</label>
        </div>
        <ul data-c42-tree-group>
          <li data-c42-tree-item data-value="newsletter">
            <div data-c42-tree-row><label><input type="checkbox" data-c42-tree-checkbox /> Newsletter</label></div>
          </li>
          <li data-c42-tree-item data-value="promos">
            <div data-c42-tree-row><label><input type="checkbox" data-c42-tree-checkbox /> Promotions</label></div>
          </li>
        </ul>
      </li>`;
    new Tree(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<TreeOptions>;

export const Default: Story = {};
export const IndependentCheckboxes: Story = { args: { treeSelection: false } };