import type { Meta, StoryObj } from '../../story.types';
import { HlmBadgeIconCell } from './hlm-badge-icon-cell.component';

type Story = StoryObj<HlmBadgeIconCell>;

const sampleTenants = [
  { id: 't1', name: 'Acme HQ' },
  { id: 't2', name: 'Acme Europe' },
  { id: 't3', name: 'Acme Latam' },
];

const sampleTags = ['admin', 'priority'];
const sampleScopes = ['read:users', 'write:posts', 'delete:posts'];

const meta: Meta<HlmBadgeIconCell> = {
  title: '@aurora/components/hlm-badge-icon-cell',
  component: HlmBadgeIconCell,
  tags: ['autodocs'],
  argTypes: {
    items: {
      control: 'object',
      description:
        'Collection to summarize. The number of items is shown as a badge; their names (resolved via `label`) form the tooltip.',
    },
    label: {
      description:
        'Function that extracts a display string from each item. For string arrays use `(s) => s`; for object arrays use `(item) => item.name` or similar.',
    },
    iconName: {
      control: 'text',
      description:
        'Icon registered via `provideIcons()` upstream. The cell is icon-agnostic — the caller decides which icon represents the relation.',
    },
  },
  args: {
    iconName: 'lucideBuilding2',
  },
  parameters: {
    aurora: {
      category: 'data-table',
      when: 'TanStack column cell that represents a small collection of relations (tenants, tags, scopes). Wraps `provideIcons()`-registered icons with a count badge and joined-names tooltip.',
      whenNot:
        'For columns that show a single relation name, use a plain text cell. For columns that need filtering/sorting on the relation itself, use a server-side query — the cell is presentation only.',
    },
  },
};

export default meta;

export const WithTenants: Story = {
  args: {
    items: sampleTenants,
    label: (t: unknown) => (t as { name: string }).name,
    iconName: 'lucideBuilding2',
  },
  name: 'With tenants (object array)',
};

export const WithTags: Story = {
  args: {
    items: sampleTags,
    label: (s: unknown) => String(s),
    iconName: 'lucideTag',
  },
  name: 'With tags (string array)',
};

export const WithScopes: Story = {
  args: {
    items: sampleScopes,
    label: (s: unknown) => String(s),
    iconName: 'lucideTarget',
  },
  name: 'With scopes',
};

export const Empty: Story = {
  args: {
    items: [],
    iconName: 'lucideBuilding2',
  },
  name: 'Empty (no badge, no tooltip)',
};
