import { Meta, StoryObj } from '@storybook/react-webpack5';
import { ThemeProvider, type Theming } from '@wise/components-theming';
import Button from '../button';
import SentimentSurface from './SentimentSurface';
import type { Sentiment, Emphasis } from './SentimentSurface.types';

const sentiments: Sentiment[] = ['negative', 'success', 'proposition', 'warning', 'neutral'];
const emphasisLevels: Emphasis[] = ['base', 'elevated'];

// Themes that support light/dark screen modes
const themesWithScreenModes: Theming['theme'][] = ['personal', 'business', 'platform'];
// Themes that don't have light/dark variants
const themesWithoutScreenModes: Theming['theme'][] = [
  'forest-green',
  'bright-green',
  'business--forest-green',
  'business--bright-green',
  'platform--forest-green',
];
const screenModes: Theming['screenMode'][] = ['light', 'dark'];

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

type Story = StoryObj<typeof SentimentSurface>;

export const NestedSentiments: Story = {
  tags: ['!dev'],
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <SentimentSurface sentiment="negative" emphasis="base">
        Outer: Negative, base
        <div style={{ margin: '16px 0 0 16px' }}>
          <SentimentSurface sentiment="success" emphasis="elevated">
            Inner: Success, elevated
            <div style={{ margin: '12px 0 0 12px' }}>
              <SentimentSurface sentiment="warning" emphasis="base">
                Deepest: Warning, base
              </SentimentSurface>
            </div>
          </SentimentSurface>
        </div>
      </SentimentSurface>
      <SentimentSurface sentiment="proposition" emphasis="elevated">
        Outer: Proposition, elevated
        <div style={{ margin: '16px 0 0 16px' }}>
          <SentimentSurface sentiment="neutral" emphasis="base">
            Inner: Neutral, base
          </SentimentSurface>
        </div>
      </SentimentSurface>
    </div>
  ),
};

export const NestedThemes: Story = {
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <ThemeProvider theme="forest-green" className="p-a-4">
        Page is in Personal Forest Green Theme
        <SentimentSurface sentiment="success" className="p-a-4">
          Some Component with Success Sentiment
        </SentimentSurface>
        <ThemeProvider theme="personal" screenMode="light" className="p-a-4">
          Island of Personal Light Theme
          <SentimentSurface sentiment="success" className="p-a-4">
            Some Component with Success Sentiment
          </SentimentSurface>
        </ThemeProvider>
      </ThemeProvider>
    </div>
  ),
};

const ButtonsGrid = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    {emphasisLevels.map((emphasis) =>
      sentiments.map((sentiment) => (
        <SentimentSurface
          key={`${sentiment}-${emphasis}`}
          sentiment={sentiment}
          emphasis={emphasis}
          style={{
            backgroundColor: 'var(--color-sentiment-background-surface)',
            color: 'var(--color-sentiment-content-primary)',
            padding: '16px',
          }}
        >
          <span
            style={{
              marginRight: '16px',
              textTransform: 'capitalize',
              minWidth: '150px',
              display: 'inline-block',
            }}
          >
            {sentiment} ({emphasis})
          </span>
          <Button v2>Primary</Button>
          <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
            Secondary
          </Button>
          <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
            Secondary Neutral
          </Button>
          <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
            Tertiary
          </Button>
        </SentimentSurface>
      )),
    )}
  </div>
);

export const ButtonsAcrossThemes: Story = {
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
      {/* Themes with light/dark screen modes */}
      {themesWithScreenModes.map((theme) =>
        screenModes.map((screenMode) => (
          <ThemeProvider key={`${theme}-${screenMode}`} theme={theme} screenMode={screenMode}>
            <div style={{ padding: '16px' }}>
              <h3 style={{ margin: '0 0 16px 0', textTransform: 'capitalize' }}>
                {theme} - {screenMode}
              </h3>
              <ButtonsGrid />
            </div>
          </ThemeProvider>
        )),
      )}
      {/* Themes without light/dark variants */}
      {themesWithoutScreenModes.map((theme) => (
        <ThemeProvider key={theme} theme={theme}>
          <div style={{ padding: '16px' }}>
            <h3 style={{ margin: '0 0 16px 0', textTransform: 'capitalize' }}>{theme}</h3>
            <ButtonsGrid />
          </div>
        </ThemeProvider>
      ))}
    </div>
  ),
};

export const NeutralSentimentOnNeutralBackground: Story = {
  render: () => (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <SentimentSurface
        sentiment="neutral"
        style={{
          padding: '16px',
        }}
      >
        <Button v2>Primary</Button>
        <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
          Secondary
        </Button>
        <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
          Secondary Neutral
        </Button>
        <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
          Tertiary
        </Button>
      </SentimentSurface>
      <SentimentSurface
        sentiment="neutral"
        emphasis="elevated"
        style={{
          padding: '16px',
        }}
      >
        <Button v2>Primary</Button>
        <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
          Secondary
        </Button>
        <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
          Secondary Neutral
        </Button>
        <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
          Tertiary
        </Button>
      </SentimentSurface>
    </div>
  ),
};