import { useState } from 'react';
import { userEvent, within, expect } from '@storybook/test';
import { Meta, StoryObj } from '@storybook/react';
import Button from '../../src';
import { Freeze } from '@transferwise/icons';

const meta = {
  title: 'Actions/Button/Tests',
  component: Button,
  args: {
    children: 'Button text',
    as: 'button',
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

const wait = async (duration = 500) =>
  new Promise<void>((resolve) => {
    setTimeout(resolve, duration);
  });

export const ClickInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.click(button);
    await expect(button).toHaveTextContent('Clicked!');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    const [clicked, setClicked] = useState(false);

    return (
      <Button {...args} onClick={() => setClicked(true)}>
        {clicked ? 'Clicked!' : 'Button text'}
      </Button>
    );
  },
};

export const FocusInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.tab();
    await expect(button).toHaveFocus();
    await expect(button).toHaveTextContent('Focused!');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    const [focused, setFocused] = useState(false);

    return (
      <Button {...args} onFocus={() => setFocused(true)}>
        {focused ? 'Focused!' : 'Button text'}
      </Button>
    );
  },
};

export const BlurInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.tab();
    await expect(button).toHaveFocus();
    await userEvent.tab();
    await expect(button).not.toHaveFocus();
    await expect(button).toHaveTextContent('Blurred!');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    const [blurred, setBlurred] = useState(false);

    return (
      <Button {...args} onBlur={() => setBlurred(true)}>
        {blurred ? 'Blurred!' : 'Button text'}
      </Button>
    );
  },
};

export const MouseEnterInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.hover(button);
    await expect(button).toHaveTextContent('Hovered!');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    const [hovered, setHovered] = useState(false);

    return (
      <Button {...args} onMouseEnter={() => setHovered(true)}>
        {hovered ? 'Hovered!' : 'Button text'}
      </Button>
    );
  },
};

export const MouseLeaveInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.unhover(button);
    await expect(button).toHaveTextContent('Left!');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    const [left, setLeft] = useState(false);

    return (
      <Button {...args} onMouseLeave={() => setLeft(true)}>
        {left ? 'Left!' : 'Button text'}
      </Button>
    );
  },
};

export const KeyDownInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.type(button, '{enter}');
    await expect(button).toHaveTextContent('Key Pressed!');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    const [keyPressed, setKeyPressed] = useState(false);

    return (
      <Button {...args} onKeyDown={() => setKeyPressed(true)}>
        {keyPressed ? 'Key Pressed!' : 'Button text'}
      </Button>
    );
  },
};

export const DisabledClickInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.click(button);
    await expect(button).toHaveTextContent('Button text');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    return <Button {...args} disabled />;
  },
};

export const DisabledFocusInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.tab();
    await expect(button).not.toHaveFocus();
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    return <Button {...args} disabled />;
  },
};

export const DisabledBlurInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.tab();
    await expect(button).not.toHaveFocus();
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    return <Button {...args} disabled />;
  },
};

export const DisabledKeyDownInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.type(button, '{enter}');
    await expect(button).toHaveTextContent('Button text');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    return <Button {...args} disabled />;
  },
};

export const DisabledMouseEnterInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.hover(button);
    await expect(button).toHaveTextContent('Button text');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    return <Button {...args} disabled />;
  },
};

export const DisabledMouseLeaveInteraction: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.unhover(button);
    await expect(button).toHaveTextContent('Button text');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    return <Button {...args} disabled />;
  },
};
