import { Meta, StoryObj } from '@storybook/react-webpack5';
import { Menu, Plus, Settings, Star, Travel } from '@transferwise/icons';
import { action } from 'storybook/actions';
import IconButton from './IconButton';
import SentimentSurface from '../sentimentSurface';
import { allModes } from '../../.storybook/modes';

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

type Story = StoryObj<typeof IconButton>;

/**
 * IconButton displayed across all themes and sentiments for visual regression testing.
 */
export const AllThemesAndSentiments: Story = {
  render: () => {
    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
    const sentiments = ['negative', 'warning', 'neutral', 'success', 'proposition'] as const;
    const icons = [Plus, Settings, Star, Travel];

    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {/* Header row with priority labels */}
        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '4px', gap: '8px' }}>
          <div style={{ width: '82px', paddingLeft: '8px' }} />
          {priorities.map((priority) => (
            <div
              key={priority}
              style={{
                width: '32px',
                textAlign: 'center',
                fontSize: '11px',
                fontWeight: 'bold',
                writingMode: 'vertical-rl',
                transform: 'rotate(180deg)',
                height: '60px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {priority}
            </div>
          ))}
        </div>

        {/* Rows for each sentiment with base and elevated emphasis */}
        {sentiments.flatMap((sentiment) => [
          <SentimentSurface
            key={`${sentiment}-base`}
            sentiment={sentiment}
            emphasis="base"
            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
          >
            <div
              style={{
                width: '82px',
                fontSize: '11px',
                fontWeight: 'bold',
                textAlign: 'left',
                paddingLeft: '8px',
              }}
            >
              {sentiment} (base)
            </div>
            <IconButton
              size={32}
              aria-label="Primary action"
              priority="primary"
              type="default"
              onClick={action('button click')}
            >
              <Plus />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Secondary action"
              priority="secondary"
              type="default"
              onClick={action('button click')}
            >
              <Settings />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Tertiary action"
              priority="tertiary"
              type="default"
              onClick={action('button click')}
            >
              <Star />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Minimal action"
              priority="minimal"
              type="default"
              onClick={action('button click')}
            >
              <Travel />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Disabled action"
              priority="primary"
              type="default"
              disabled
              onClick={action('button click')}
            >
              <Menu />
            </IconButton>
          </SentimentSurface>,
          <SentimentSurface
            key={`${sentiment}-elevated`}
            sentiment={sentiment}
            emphasis="elevated"
            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
          >
            <div
              style={{
                width: '82px',
                fontSize: '11px',
                fontWeight: 'bold',
                textAlign: 'left',
                paddingLeft: '8px',
              }}
            >
              {sentiment} (elevated)
            </div>
            <IconButton
              size={32}
              aria-label="Primary action"
              priority="primary"
              type="default"
              onClick={action('button click')}
            >
              <Plus />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Secondary action"
              priority="secondary"
              type="default"
              onClick={action('button click')}
            >
              <Settings />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Tertiary action"
              priority="tertiary"
              type="default"
              onClick={action('button click')}
            >
              <Star />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Minimal action"
              priority="minimal"
              type="default"
              onClick={action('button click')}
            >
              <Travel />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Disabled action"
              priority="primary"
              type="default"
              disabled
              onClick={action('button click')}
            >
              <Menu />
            </IconButton>
          </SentimentSurface>,
        ])}
      </div>
    );
  },
  parameters: {
    padding: '16px',
    variants: ['default', 'dark', 'bright-green', 'forest-green'],
    chromatic: {
      dark: allModes.dark,
      brightGreen: allModes.brightGreen,
      forestGreen: allModes.forestGreen,
    },
  },
};
