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

import { Sentiment, Size, Status } from '../common';

import StatusIcon, { StatusIconSentiment } from './StatusIcon';
import { withVariantConfig } from '../../.storybook/helpers';

export default {
  component: StatusIcon,
  title: 'Other/StatusIcon',

  argTypes: {
    iconLabel: {
      control: 'text',
    },
  },
} satisfies Meta<typeof StatusIcon>;

type Story = StoryObj<typeof StatusIcon>;

export const Basic: Story = {};

/**
 * Ignored by the screen readers. Use with care.
 */
export const Presentational: Story = {
  args: {
    iconLabel: null,
  },
};

export const Variants: Story = {
  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
    parameters: {
      padding: '0',
    },
  }),
  render: () => (
    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
      {[
        Sentiment.POSITIVE,
        Sentiment.NEGATIVE,
        Sentiment.WARNING,
        Sentiment.NEUTRAL,
        Sentiment.PENDING,
        Status.PENDING,
      ].map((sentiment) => {
        return (
          <span
            key={sentiment}
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              flexDirection: 'column',
              minHeight: '150px',
              alignItems: 'center',
            }}
          >
            {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
              return (
                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
              );
            })}
          </span>
        );
      })}
    </span>
  ),
};

export const LegacySizes: Story = {
  render: () => (
    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
      {[
        Sentiment.POSITIVE,
        Sentiment.NEGATIVE,
        Sentiment.NEUTRAL,
        Sentiment.WARNING,
        Status.PENDING,
      ].map((sentiment) => {
        return (
          <span
            key={sentiment}
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              flexDirection: 'column',
              minHeight: '150px',
              alignItems: 'center',
            }}
          >
            {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
              return (
                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
              );
            })}
          </span>
        );
      })}
    </span>
  ),
};
