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

import { IconName } from '../Icon/IconName';
import { H5 } from '../Typography/H5/H5';

import { StatusIndicator } from './StatusIndicator';

const meta: Meta<typeof StatusIndicator> = {
  title: 'UI kit/StatusIndicator',
  component: StatusIndicator,
  tags: ['autodocs'],
  args: {
    state: 'critical',
    label: 'Critical',
  },
  argTypes: {
    emphasis: { control: 'inline-radio', options: ['low', 'medium'] },
  },
};

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

export const Critical: Story = {
  args: { state: 'critical', label: 'Critical', labelHidden: true },
};

export const Warning: Story = {
  args: { state: 'warning', label: 'Warning', labelHidden: true },
};

export const Positive: Story = {
  args: { state: 'positive', label: 'Positive', labelHidden: true },
};

export const Informative: Story = {
  args: { state: 'informative', label: 'Informative', labelHidden: true },
};

export const Notice: Story = {
  args: { state: 'notice', label: 'Notice', labelHidden: true },
};

export const Neutral: Story = {
  args: { state: 'neutral', label: 'Neutral', labelHidden: true },
};

export const Medium: Story = {
  args: { state: 'critical', size: 'medium', label: 'Critical', labelHidden: true },
};

export const Small: Story = {
  args: { state: 'critical', size: 'small', label: 'Critical', labelHidden: true },
};

export const MediumEmphasis: Story = {
  name: 'Medium emphasis (filled)',
  args: { state: 'positive', emphasis: 'medium', label: 'Positive', labelHidden: true },
};

export const LowEmphasis: Story = {
  name: 'Low emphasis (outlined)',
  args: { state: 'positive', emphasis: 'low', label: 'Positive', labelHidden: true },
};

export const SymbolOff: Story = {
  name: 'Symbol off (shape only)',
  args: { state: 'neutral', symbol: false, label: 'Neutral', labelHidden: true },
};

export const SymbolCustom: Story = {
  name: 'Symbol custom',
  args: { state: 'informative', symbol: IconName.SHP_AI, label: 'Informative', labelHidden: true },
};

export const WithLabel: Story = {
  args: { state: 'positive', label: 'Paid' },
};

export const WithHeadingLabel: Story = {
  name: 'With heading label (H5)',
  args: { state: 'positive', label: <H5>Paid</H5> },
};

export const WithTooltip: Story = {
  args: { state: 'critical', tooltip: 'Payment failed', label: 'Critical', labelHidden: true },
};

export const ShapeOnly: Story = {
  name: 'Shape only (no symbol, no label)',
  args: { state: 'warning', symbol: false, label: 'Warning', labelHidden: true },
};