import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within, fn, expect } from '@storybook/test';
import { useState } from 'react';

import Button from '..';

const withContainer = (Story: any) => (
  <div
    style={{
      display: 'flex',
      flexDirection: 'initial',
      justifyContent: 'center',
      flexFlow: 'column',
      alignItems: 'center',
    }}
  >
    <Story />
  </div>
);

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'Actions/Button/Legacy',
  args: {
    children: 'Button text',
    loading: false,
    type: undefined,
    onClick: fn(),
    onBlur: fn(),
    onFocus: fn(),
    href: 'https://example.com',
  },
  argTypes: {
    as: {
      control: {
        type: 'select',
        options: ['button', 'a'],
      },
    },
    type: {
      type: {
        name: 'enum',
        value: ['accent', 'positive', 'negative'],
      },
    },
    size: {
      type: {
        name: 'enum',
        value: ['xs', 'sm', 'md', 'lg'],
      },
    },
    priority: {
      type: {
        name: 'enum',
        value: ['primary', 'secondary', 'tertiary'],
      },
    },
    appearance: {
      table: {
        disable: true,
      },
    },
    iconLeft: {
      table: {
        disable: true,
      },
    },
    iconRight: {
      table: {
        disable: true,
      },
    },
    iconOnly: {
      table: {
        disable: true,
      },
    },
    avatars: {
      table: {
        disable: true,
      },
    },
    'data-testid': {
      table: {
        disable: true,
      },
    },
  },
  tags: ['autodocs'],
  decorators: [withContainer],
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Basic: Story = {};

export const Secondary: Story = {
  args: {
    type: 'accent',
    priority: 'secondary',
  },
};

export const Tertiary: Story = {
  args: {
    type: 'accent',
    priority: 'tertiary',
  },
};

export const Negative: Story = {
  args: {
    type: 'negative',
    priority: 'primary',
  },
};

export const Loading: Story = {
  args: {
    loading: true,
  },
};

export const Variants: Story = {
  render: () => {
    return (
      <div className="d-flex flex-column p-b-2 align-items-start">
        <div className="d-flex flex-row p-b-2" style={{ gap: 'var(--size-16)' }}>
          <Button type="accent" priority="primary">
            Primary Accent
          </Button>
          <Button type="accent" priority="secondary">
            Secondary Accent
          </Button>
          <Button type="accent" priority="tertiary">
            Tertiary Accent
          </Button>
        </div>
        <div className="d-flex flex-row p-b-2" style={{ gap: 'var(--size-16)' }}>
          <Button type="positive" priority="primary">
            Primary Positive
          </Button>
          <Button type="positive" priority="secondary">
            Secondary Accent
          </Button>
        </div>
        <div className="d-flex flex-row flex- p-b-2" style={{ gap: 'var(--size-16)' }}>
          <Button type="negative" priority="primary">
            Primary Negative
          </Button>
          <Button type="negative" priority="secondary">
            Secondary Negative
          </Button>
        </div>
        <div className="d-flex flex-row p-b-1" style={{ gap: 'var(--size-16)' }}>
          <Button type="accent" priority="primary" disabled>
            Button Disabled
          </Button>
          <Button type="accent" priority="secondary" disabled>
            Button Disabled
          </Button>
          <Button type="accent" priority="tertiary" disabled>
            Button Disabled
          </Button>
        </div>
      </div>
    );
  },
};

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

export const Focused: 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 SocialMedia: Story = {
  render: () => {
    return (
      <>
        <div className="m-b-2">
          <button type="button" className="btn btn-google">
            Login with Google
          </button>
        </div>
        <div className="m-b-2">
          <button type="button" className="btn btn-facebook">
            Login with Facebook
          </button>
        </div>
        <div className="m-b-2">
          <button type="button" className="btn btn-lg btn-facebook">
            Large Button
          </button>
        </div>
        <div className="m-b-2">
          <button type="button" className="btn btn-block btn-facebook">
            Block Button
          </button>
        </div>
        <div className="m-b-2">
          <button type="button" className="btn btn-lg btn-block btn-facebook">
            Large Block Button
          </button>
        </div>
      </>
    );
  },
};
