import { Meta } from '@storybook/react-webpack5';
import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
import { expect, userEvent, within } from 'storybook/test';
import { storyConfig } from '../../test-utils';
import Button from '../Button.resolver';
import { ButtonPriority } from '../Button.types';

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'Actions/Button/Tests',
  tags: ['!autodocs'],
};
export default meta;

export const FocusTertiary = storyConfig(
  {
    render: () => (
      <Button v2 priority="tertiary">
        Focus has underline
      </Button>
    ),
  },
  {},
);
FocusTertiary.play = async ({ canvasElement }) => {
  await userEvent.tab();
  const canvas = within(canvasElement);
  const buttonElement: HTMLButtonElement = canvas.getByRole('button');
  await expect(buttonElement).toHaveFocus();
};

const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
const buttonSizes = ['sm', 'md', 'lg'] as const;
export const AllVariants = storyConfig(
  {
    tags: ['!autodocs'],
    parameters: {
      padding: '0',
    },
    render: () => (
      <div
        className="button-variants"
        style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
      >
        {buttonPriorities.map((priority) =>
          buttonSizes.map((size) => (
            <div
              key={`${priority}-default-${size}`}
              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
            >
              <Button
                v2
                priority={priority as ButtonPriority}
                size={size}
                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
                block
              >
                {`${priority} default ${size}`}
              </Button>
              <Button
                className="m-t-1 m-b-1"
                v2
                priority={priority as ButtonPriority}
                size={size}
                addonStart={{
                  type: 'avatar',
                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
                }}
                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
                block
                disabled
              >
                {`${priority} default ${size} Disabled`}
              </Button>
              <Button
                v2
                priority={priority as ButtonPriority}
                size={size}
                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
                block
                loading
              >
                {`${priority} default ${size} Loading`}
              </Button>
            </div>
          )),
        )}
        {['primary', 'secondary'].map((priority) =>
          buttonSizes.map((size) => (
            <div
              key={`${priority}-negative-${size}`}
              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
            >
              <Button
                v2
                sentiment="negative"
                priority={priority as ButtonPriority}
                size={size}
                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
                block
              >
                {`${priority} negative ${size}`}
              </Button>
              <Button
                className="m-t-1 m-b-1"
                v2
                sentiment="negative"
                priority={priority as ButtonPriority}
                size={size}
                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
                block
                disabled
              >
                {`${priority} negative ${size} Disabled`}
              </Button>
              <Button
                v2
                sentiment="negative"
                priority={priority as ButtonPriority}
                size={size}
                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
                block
                loading
              >
                {`${priority} negative ${size} Loading`}
              </Button>
            </div>
          )),
        )}
      </div>
    ),
  },
  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
);
