import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Tree } from './tree';

const treeData = [
  {
    key: 'src',
    title: 'src',
    children: [
      {
        key: 'components',
        title: 'components',
        children: [
          { key: 'button', title: 'button.tsx' },
          { key: 'input', title: 'input.tsx' },
          { key: 'table', title: 'data-table.tsx' },
        ],
      },
      {
        key: 'styles',
        title: 'styles',
        children: [
          { key: 'tokens', title: 'tokens.css' },
          { key: 'theme', title: 'theme.css' },
        ],
      },
      { key: 'index', title: 'index.ts' },
    ],
  },
  {
    key: 'docs',
    title: 'docs',
    children: [
      { key: 'intro', title: 'Introduction.mdx' },
      { key: 'tokensdoc', title: 'DesignTokens.mdx', disabled: true },
    ],
  },
];

const meta = {
  title: 'Components/Tree',
  component: Tree,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Hierarchical list with expand, select and optional checkboxes. The keyboard contract is the demanding part and is implemented in full — arrow keys that move *and* expand, Home/End, `*` to open a whole level, type-ahead, and a single tab stop. Checkbox state propagates both ways: checking a branch checks everything under it, and a branch reads as indeterminate when only some descendants are checked.',
      },
    },
  },
  tags: ['autodocs'],
  args: { treeData, defaultExpandAll: true },
  decorators: [(Story) => <div className="w-72 rounded-lg border p-2"><Story /></div>],
} satisfies Meta<typeof Tree>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const Checkable: Story = {
  args: { checkable: true },
};

/** Checking a branch checks its children, and half-checked parents go mixed. */
export const CheckableControlled: Story = {
  render: function CheckableControlledStory(args) {
    const [checked, setChecked] = React.useState<React.Key[]>(['button', 'input']);

    return (
      <div className="grid gap-3">
        <Tree
          {...args}
          checkable
          checkedKeys={checked}
          onCheck={(keys) => setChecked(keys)}
        />
        <p className="text-xs text-muted-foreground">
          Checked: {checked.length ? checked.join(', ') : '—'}
        </p>
      </div>
    );
  },
};

export const Collapsed: Story = {
  args: { defaultExpandAll: false, defaultExpandedKeys: ['src'] },
};

/**
 * `virtual` with a `height` windows the rows, the same technique `VirtualList`
 * uses — necessary once a tree runs to thousands of nodes.
 */
export const Virtualised: Story = {
  args: {
    virtual: true,
    height: 260,
    itemHeight: 28,
    defaultExpandAll: true,
    treeData: [
      {
        key: 'root',
        title: 'root',
        children: Array.from({ length: 2000 }, (_, i) => ({
          key: `node-${i}`,
          title: `node-${i}`,
        })),
      },
    ],
  },
};