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

import { Sentiment, Size } from '../common';
import SentimentSurface from '../sentimentSurface';
import { withVariantConfig } from '../../.storybook/helpers';
import { allModes } from '../../.storybook/modes';

import StatusIcon, { StatusIconSentiment } from './StatusIcon';

export default {
  title: 'Other/StatusIcon/Tests',
  component: StatusIcon,
  tags: ['!autodocs', '!manifest'],
} satisfies Meta<typeof StatusIcon>;

type Story = StoryObj<typeof StatusIcon>;

const sizes = [16, 24, 32, 40, 48, 56, 72] as const;

const surfaceSentiments = ['success', 'warning', 'negative', 'neutral'] as const;

// Cycle through different sentiments per size so each row shows varied icons
const iconSentiments: StatusIconSentiment[] = [
  Sentiment.POSITIVE,
  Sentiment.NEGATIVE,
  Sentiment.WARNING,
  Sentiment.NEUTRAL,
  Sentiment.PENDING,
  Sentiment.POSITIVE,
  Sentiment.NEGATIVE,
];

const rowStyle = {
  display: 'flex',
  alignItems: 'center',
  padding: '8px',
  gap: '8px',
} as const;

const labelStyle = {
  width: '120px',
  fontSize: '11px',
  fontWeight: 'bold',
  paddingLeft: '8px',
  flexShrink: 0,
} as const;

/**
 * All sentiments, emphasis levels, and sizes across all themes for visual regression testing.
 */
export const Variants: Story = {
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      {surfaceSentiments.flatMap((sentiment) => [
        <SentimentSurface
          key={`${sentiment}-base`}
          sentiment={sentiment}
          emphasis="base"
          style={rowStyle}
        >
          <div style={labelStyle}>{sentiment} (base)</div>
          {sizes.map((size, i) => (
            <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
          ))}
        </SentimentSurface>,
        <SentimentSurface
          key={`${sentiment}-elevated`}
          sentiment={sentiment}
          emphasis="elevated"
          style={rowStyle}
        >
          <div style={labelStyle}>{sentiment} (elevated)</div>
          {sizes.map((size, i) => (
            <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
          ))}
        </SentimentSurface>,
      ])}

      {/* Row without a SentimentSurface wrapper — standalone fallback colours */}
      <div style={rowStyle}>
        <div style={labelStyle}>none</div>
        {sizes.map((size, i) => (
          <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
        ))}
      </div>
    </div>
  ),
  parameters: {
    padding: '16px',
    variants: ['default', 'dark', 'bright-green', 'forest-green'],
  },
};

export const RTL: Story = {
  render: Variants.render,
  ...withVariantConfig(['rtl']),
};

/**
 * @deprecated Legacy `Size.SMALL | Size.MEDIUM | Size.LARGE` values still work but
 * consumers should migrate to numeric sizes.
 */
export const LegacySizes: Story = {
  render: () => {
    const legacySizes = [
      { value: Size.SMALL, label: 'Size.SMALL' },
      { value: Size.MEDIUM, label: 'Size.MEDIUM' },
      { value: Size.LARGE, label: 'Size.LARGE' },
    ] as const;

    return (
      <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
        {legacySizes.map(({ value, label }) => (
          <div
            key={label}
            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
          >
            <StatusIcon size={value} />
            <span style={{ fontSize: '11px' }}>{label}</span>
          </div>
        ))}
      </div>
    );
  },
};