import { Meta, StoryObj } from '@storybook/react-webpack5';
import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
import { Flag } from '@wise/art';
import { expect, userEvent, within } from 'storybook/test';
import Button from '../Button.resolver';
import { ButtonPriority } from '../Button.types';
import { withVariantConfig } from '../../../.storybook/helpers';

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

type Story = StoryObj<typeof Button>;

export const FocusTertiary: Story = {
  render: () => (
    <Button v2 priority="tertiary">
      Focus has underline
    </Button>
  ),
  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: Story = {
  tags: ['!autodocs'],
  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
    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>
  ),
};

export const Disabled: Story = {
  args: {
    v2: true,
    disabled: true,
    children: 'Disabled button',
  },
};

export const Loading: Story = {
  args: {
    v2: true,
    loading: true,
    children: 'Loading button',
  },
};

export const AccessibilityAddons: Story = {
  args: {
    v2: true,
    addonStart: {
      type: 'avatar',
      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
    },
    'aria-label': 'Convert Real to Yen',
    children: 'Convert',
    size: 'md',
  },
};