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

import { TreeSelect } from './tree-select';
import { Label } from '../label/label';

const treeData = [
  {
    value: 'eng',
    title: 'Engineering',
    children: [
      { value: 'frontend', title: 'Frontend' },
      { value: 'backend', title: 'Backend' },
      { value: 'platform', title: 'Platform' },
    ],
  },
  {
    value: 'design',
    title: 'Design',
    children: [
      { value: 'product-design', title: 'Product design' },
      { value: 'brand', title: 'Brand' },
    ],
  },
  { value: 'ops', title: 'Operations' },
];

const meta = {
  title: 'Components/TreeSelect',
  component: TreeSelect,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Select whose options are a tree — categories, org units, folder paths. Combobox flattens its options, which loses the parent/child relationship that makes a taxonomy navigable. This keeps the hierarchy, and with `treeCheckable` adds branches whose checked state propagates both ways.',
      },
    },
  },
  tags: ['autodocs'],
  args: { treeData, placeholder: 'Pick a team', treeDefaultExpandAll: true },
  decorators: [(Story) => <div className="w-72"><Story /></div>],
} satisfies Meta<typeof TreeSelect>;

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

export const Default: Story = {};

export const WithLabel: Story = {
  render: (args) => (
    <div className="grid gap-2">
      <Label>Team</Label>
      <TreeSelect {...args} />
    </div>
  ),
};

/** Checkable branches select their children; values render as removable chips. */
export const MultipleCheckable: Story = {
  render: function MultipleCheckableStory(args) {
    const [value, setValue] = React.useState<string[]>(['frontend']);

    return (
      <div className="grid gap-3">
        <TreeSelect
          {...args}
          treeCheckable
          multiple
          value={value}
          onChange={(next) => setValue(next as string[])}
          placeholder="Pick teams"
        />
        <p className="text-xs text-muted-foreground">
          Value: {value.length ? value.join(', ') : '—'}
        </p>
      </div>
    );
  },
};

export const Searchable: Story = {
  args: { showSearch: true, placeholder: 'Search teams…' },
};

export const Disabled: Story = {
  args: { disabled: true, value: 'frontend' },
};