import Stack from '@mui/material/Stack/Stack';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconInfoCircle } from '@tabler/icons-react';

import { TagColorVariant } from './types';
import Tag from '.';

const meta: Meta<typeof Tag> = {
  component: Tag,
  title: 'Composed Components/Tag',
  tags: ['autodocs'],
  args: {
    label: 'Marketing',
    variant: TagColorVariant.BRAND,
    maxWidth: 200,
  },
  argTypes: {
    variant: {
      control: { type: 'radio' },
      options: [
        TagColorVariant.BRAND,
        TagColorVariant.PURPLE,
        TagColorVariant.MULBERRY,
        TagColorVariant.PINK,
        TagColorVariant.SALMON,
        TagColorVariant.ERROR,
        TagColorVariant.TAN,
        TagColorVariant.FLAMINGO,
        TagColorVariant.SUNSHINE,
        TagColorVariant.LIME,
        TagColorVariant.GREEN,
        TagColorVariant.LIGHT_BLUE,
        TagColorVariant.INK,
      ],
      table: {
        defaultValue: { summary: 'BRAND' },
      },
    },
    label: {
      control: 'text',
    },
    maxWidth: {
      control: { type: 'number' },
    },
    Icon: {
      control: false,
      table: {
        type: { summary: 'TablerIcon' },
      },
    },
    onDelete: { control: false },
    onClick: { control: false },
  },
};

export default meta;

type Story = StoryObj<typeof Tag>;

export const Default: Story = {
  args: {},
};

export const WithIcon: Story = {
  args: {
    Icon: IconInfoCircle,
  },
};

export const Deletable: Story = {
  args: {
    onDelete: () => {
      alert('Tag deleted');
    },
  },
};

export const Clickable: Story = {
  args: {
    onClick: () => {
      alert('Tag clicked');
    },
  },
};

export const MaxWidth: Story = {
  render: () => (
    <Stack
      direction="row"
      gap={1}
      useFlexGap
      flexWrap="wrap"
    >
      <Tag
        label="Very long tag label that will be truncated with ellipsis"
        maxWidth={140}
      />
      <Tag
        label="Same long label but with a larger maxWidth to compare"
        maxWidth={220}
        variant={TagColorVariant.LIGHT_BLUE}
      />
    </Stack>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Demonstrates how `maxWidth` constrains the tag label and ' +
          'truncates overflow.',
      },
    },
  },
};

export const AllVariants: Story = {
  render: () => (
    <Stack
      direction="row"
      gap={1}
      useFlexGap
      flexWrap="wrap"
    >
      {[
        TagColorVariant.BRAND,
        TagColorVariant.PURPLE,
        TagColorVariant.MULBERRY,
        TagColorVariant.PINK,
        TagColorVariant.SALMON,
        TagColorVariant.ERROR,
        TagColorVariant.TAN,
        TagColorVariant.FLAMINGO,
        TagColorVariant.SUNSHINE,
        TagColorVariant.LIME,
        TagColorVariant.GREEN,
        TagColorVariant.LIGHT_BLUE,
        TagColorVariant.INK,
      ].map(variant => (
        <Tag
          key={variant}
          label={variant}
          variant={variant}
          onClick={() => {
            alert(`Tag ${variant} clicked`);
          }}
        />
      ))}
    </Stack>
  ),
  parameters: {
    docs: {
      description: {
        story: 'Displays all available color variants.',
      },
    },
  },
};
