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

import { ControlType, Priority } from '../common';
import { storyConfig } from '../test-utils';

import Button from './Button';

export default {
  component: Button,
  title: 'Actions/Button',
  args: {
    children: 'Button text',
    loading: false,
    onClick: fn(),
    onBlur: fn(),
    onFocus: fn(),
  },
  argTypes: {
    as: {
      type: {
        name: 'enum',
        value: ['button', 'a'],
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Button>;

type Story = StoryObj<typeof Button>;

export const Basic: Story = {};

export const Focused = storyConfig<Story>(
  {
    parameters: {
      chromatic: {
        delay: 1000,
      },
    },
    play: async ({ canvasElement }) => {
      const canvas = within(canvasElement);
      await userEvent.click(canvas.getByRole('button'));
    },
  },
  {
    variants: ['dark'],
  },
);

export const Variants = storyConfig<Story>(
  {
    render: (args) => {
      return (
        <>
          <div className="m-b-2">
            <div className="title-4 m-b-1">Accent</div>
            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
              <Button {...args} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
              <Button {...args} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
              <Button {...args} priority={Priority.TERTIARY} type={ControlType.ACCENT} />
            </div>
          </div>
          <div className="m-b-2">
            <div className="title-4 m-b-1">Positive</div>
            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
              <Button {...args} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
              <Button {...args} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
            </div>
          </div>
          <div className="m-b-2">
            <div className="title-4 m-b-1">Negative</div>
            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
              <Button {...args} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
              <Button {...args} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
            </div>
          </div>
          <div className="m-b-2">
            <div className="title-4 m-b-1">Disabled</div>
            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
              <Button {...args} priority={Priority.PRIMARY} disabled />
              <Button {...args} priority={Priority.SECONDARY} disabled />
              <Button {...args} priority={Priority.TERTIARY} disabled />
            </div>
          </div>
        </>
      );
    },
  },
  { variants: ['default', 'dark', 'rtl'] },
);

/**
 * The purpose of the `loading` mode is to convey a message to the
 * user that some asynchronous process has been triggered, likely
 * in response to their previous action.
 *
 * Although it carries some similarities with the `disabled` mode
 * (users cannot activate a loading button), it's not hidden from
 * the keyboard and assistive tech users (users can focus on it,
 * and it's announced by screen readers), and is also much more
 * accessible to sighted users due to its default, high contrast.
 */
export const Loading = storyConfig<Story>(
  {
    render: (args) => {
      return (
        <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
          <Button {...args} loading priority={Priority.PRIMARY} />
          <Button {...args} loading priority={Priority.SECONDARY} />
          <Button {...args} loading priority={Priority.TERTIARY} />
          <Button {...args} loading priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
          <Button {...args} loading priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
        </div>
      );
    },
    args: {
      loading: true,
    },
  },
  { variants: ['default', 'dark', 'rtl'] },
);

export const SocialMedia = storyConfig<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>
        </>
      );
    },
  },
  { variants: ['default', 'dark', 'rtl'] },
);

export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
  variants: ['default', 'dark', 'rtl', 'mobile'],
});
