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

import { Sentiment } from '../common';
import SentimentSurface from '../sentimentSurface';

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

const sentiments = [
  Sentiment.POSITIVE,
  Sentiment.NEGATIVE,
  Sentiment.WARNING,
  Sentiment.NEUTRAL,
  Sentiment.PENDING,
] as const;

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

const label: Record<string, string> = {
  positive: 'Positive',
  negative: 'Negative',
  warning: 'Warning',
  neutral: 'Neutral',
  pending: 'Pending',
};

export default {
  component: StatusIcon,
  title: 'Other/StatusIcon',
} satisfies Meta<typeof StatusIcon>;

type Story = StoryObj<typeof StatusIcon>;

export const Playground: Story = {
  args: {
    size: 40,
  },
};

/**
 * All available sentiments at the selected size.
 */
export const Sentiments: Story = {
  argTypes: {
    sentiment: { table: { disable: true } },
  },
  render: ({ size }) => (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      {sentiments.map((sentiment) => (
        <div
          key={sentiment}
          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
        >
          <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
          <span style={{ fontSize: '11px' }}>{label[sentiment]}</span>
        </div>
      ))}
    </div>
  ),
};

/**
 * All available sizes at the selected sentiment.
 */
export const Sizes: Story = {
  argTypes: {
    size: { table: { disable: true } },
  },
  render: ({ sentiment }) => (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      {sizes.map((size) => (
        <div
          key={size}
          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
        >
          <StatusIcon sentiment={sentiment} size={size} />
          <span style={{ fontSize: '11px' }}>{size}</span>
        </div>
      ))}
    </div>
  ),
};

/**
 * `StatusIcon` is sentiment-aware and will automatically adjust its colours when placed inside
 * a [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component — no extra
 * props needed. Each row below is a `SentimentSurface` at either `base` or `elevated` emphasis (and a last row with no sentiment for reference).
 */
export const SentimentAwareness: Story = {
  argTypes: {
    sentiment: { table: { disable: true } },
  },
  render: ({ size }) => {
    const surfaceSentiments = ['success', 'warning', 'negative', 'neutral'] as const;

    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {surfaceSentiments.flatMap((sentiment) => [
          <SentimentSurface
            key={`${sentiment}-base`}
            sentiment={sentiment}
            emphasis="base"
            style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}
          >
            <div
              style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}
            >
              {sentiment} (base)
            </div>
            <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
          </SentimentSurface>,
          <SentimentSurface
            key={`${sentiment}-elevated`}
            sentiment={sentiment}
            emphasis="elevated"
            style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}
          >
            <div
              style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}
            >
              {sentiment} (elevated)
            </div>
            <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
          </SentimentSurface>,
        ])}

        {/* Row without a SentimentSurface wrapper */}
        <div style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}>
          <div style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}>
            none
          </div>
          <StatusIcon sentiment="pending" size={size} />
        </div>
      </div>
    );
  },
  parameters: {
    docs: {
      source: { type: 'dynamic' },
      canvas: { sourceState: 'hidden' },
    },
  },
};