import { ThemeProvider, type ThemeProviderProps } from '@wise/components-theming';
import { ChevronRight, Freeze } from '@transferwise/icons';
import { Flag } from '@wise/art';
import SentimentSurface from '../../sentimentSurface';
import Header from '../../header';
import Button from '../Button';

interface GenerateSurfaceVariantProps {
  theme?: 'forest-green' | 'bright-green' | 'dark';
  sentiment: 'success' | 'warning' | 'negative' | 'neutral' | 'proposition';
}
export const generateSurfaceVariant = ({ theme, sentiment }: GenerateSurfaceVariantProps) => ({
  storyName: '',
  render: () => {
    const PERMUTATIONS = {
      emphasis: ['base', 'elevated'] as const,
      disabled: [false, true] as const,
      others: [
        {
          addonStart: { type: 'avatar' as const, value: [{ asset: <Freeze /> }] },
          addonEnd: { type: 'icon' as const, value: <ChevronRight /> },
        },
        {
          addonStart: { type: 'avatar' as const, value: [{ profileName: 'John Doe' }] },
        },
        {
          addonStart: {
            type: 'avatar' as const,
            value: [
              {
                asset: <Flag code="gb" />,
              },
              { asset: <Freeze /> },
            ],
          },
        },
        {
          loading: true,
        },
      ],
      priority: ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const,
    };

    const story = PERMUTATIONS.emphasis.map((emphasis) => (
      <SentimentSurface
        key={`${emphasis}-${sentiment}`}
        sentiment={sentiment}
        emphasis={emphasis}
        style={{
          padding: 'var(--size-8)',
          display: 'grid',
          gridTemplateColumns: 'repeat(1, min-content)',
          gap: 'var(--size-8)',
        }}
      >
        {PERMUTATIONS.disabled.map((disabled) =>
          PERMUTATIONS.others.map((media, mediaVariant) =>
            PERMUTATIONS.priority.map((priority) => (
              <div key={`${emphasis}-${sentiment}-${disabled}-${priority}-${mediaVariant}`}>
                <Button v2 size="md" disabled={disabled} priority={priority} {...media}>
                  {priority}
                </Button>
              </div>
            )),
          ),
        )}
      </SentimentSurface>
    ));

    if (theme === 'dark') {
      return (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, min-content)' }}>
          <ThemeProvider theme="personal" screenMode="dark" className="p-a-2 p-l-4">
            <Header title="Personal brand" />
            {story}
          </ThemeProvider>
          <ThemeProvider theme="business" screenMode="dark" className="p-a-2 p-r-4">
            <Header title="Business brand" />
            {story}
          </ThemeProvider>
        </div>
      );
    }

    const personalVariant = (theme || 'personal') as ThemeProviderProps['theme'];
    const businessVariant = (
      theme ? (`business--${theme}` as const) : 'business'
    ) as ThemeProviderProps['theme'];
    const platformVariant = (
      theme ? (`platform--${theme}` as const) : 'platform'
    ) as ThemeProviderProps['theme'];
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, min-content)' }}>
        <ThemeProvider theme={personalVariant} screenMode="light" className="p-a-2 p-l-4">
          <Header title="Personal brand" />
          {story}
        </ThemeProvider>
        <ThemeProvider theme={businessVariant} screenMode="light" className="p-a-2">
          <Header title="Business brand" />
          {story}
        </ThemeProvider>
        {theme === 'bright-green' ? null : (
          <ThemeProvider theme={platformVariant} screenMode="light" className="p-a-2 p-r-4">
            <Header title="Platform brand" />
            {story}
          </ThemeProvider>
        )}
      </div>
    );
  },
  decorators: [
    (Story: React.ComponentType) => (
      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <Story />
      </div>
    ),
  ],
});