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

import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount } from './avatar';

const meta = {
  title: 'Components/Avatar',
  component: Avatar,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'User or entity image with a text fallback. The fallback appears only once the image fails or is still loading, so initials never flash over a photo that loaded fine.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] },
    variant: { control: 'inline-radio', options: ['solid', 'subtle', 'outline'] },
    shape: { control: 'inline-radio', options: ['circle', 'square'] },
    colorPalette: {
      control: 'select',
      options: ['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'],
    },
  },
} satisfies Meta<typeof Avatar>;

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

export const Default: Story = {
  render: (args) => (
    <Avatar {...args}>
      <AvatarFallback>JS</AvatarFallback>
    </Avatar>
  ),
};

export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-3">
      {(['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <Avatar key={size} size={size}>
          <AvatarFallback>{size}</AvatarFallback>
        </Avatar>
      ))}
    </div>
  ),
};

/** Three treatments, each available in any palette. */
export const Variants: Story = {
  render: () => (
    <div className="flex flex-col gap-3">
      {(['solid', 'subtle', 'outline'] as const).map((variant) => (
        <div key={variant} className="flex items-center gap-3">
          {(['primary', 'secondary', 'tertiary', 'black', 'red', 'green'] as const).map((palette) => (
            <Avatar key={palette} variant={variant} colorPalette={palette}>
              <AvatarFallback>{palette.slice(0, 2)}</AvatarFallback>
            </Avatar>
          ))}
        </div>
      ))}
    </div>
  ),
};

/** CBAR draws avatars round by default, with a squared-off alternative. */
export const Shapes: Story = {
  render: () => (
    <div className="flex items-center gap-3">
      <Avatar shape="circle" variant="solid" colorPalette="primary">
        <AvatarFallback>CI</AvatarFallback>
      </Avatar>
      <Avatar shape="square" variant="solid" colorPalette="primary">
        <AvatarFallback>SQ</AvatarFallback>
      </Avatar>
    </div>
  ),
};

/** A presence dot pinned to the corner. It scales with the avatar size. */
export const WithBadge: Story = {
  render: () => (
    <Avatar size="lg">
      <AvatarFallback>JS</AvatarFallback>
      <AvatarBadge className="bg-success" />
    </Avatar>
  ),
};

export const Group: Story = {
  render: () => (
    <AvatarGroup>
      {['AB', 'CD', 'EF'].map((initials) => (
        <Avatar key={initials}>
          <AvatarFallback>{initials}</AvatarFallback>
        </Avatar>
      ))}
      <AvatarGroupCount>+7</AvatarGroupCount>
    </AvatarGroup>
  ),
};