import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';

import Button from '.';
import LegacyButton from './LegacyButton';

// needed for the SB to show correct name in the Source blocks
LegacyButton.displayName = 'Button';

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

const meta: Meta<typeof LegacyButton> = {
  component: LegacyButton,
  title: 'Actions/Button/Legacy Button',
  tags: ['deprecated'],
  args: {
    size: undefined,
    priority: undefined,
    type: undefined,
    block: false,
    disabled: false,
    loading: false,
    href: undefined,
    as: undefined,
    target: undefined,
    htmlType: undefined,
    children: 'Button text',
    onClick: fn(),
    onBlur: fn(),
    onFocus: fn(),
  },
  argTypes: {
    href: {
      control: 'text',
      description: 'If set together with `as="a"`, the component will render as an HTML anchor.',
    },
    as: {
      control: {
        name: 'enum',
        options: ['button', 'a'],
      },
      description: 'If set together with `href`, the component will render as an HTML anchor.',
    },
    type: {
      type: {
        name: 'enum',
        value: ['accent', 'positive', 'negative'],
      },
      description:
        '**NB**: `primary` | `pay` | `secondary` | `danger` | `link` are deprecated.\n\n',
    },
    size: {
      type: {
        name: 'enum',
        value: ['lg', 'md', 'sm', 'xs'],
      },
      description: '**NB**: `xs` is deprecated.\n\n',
    },
    priority: {
      type: {
        name: 'enum',
        value: ['primary', 'secondary', 'tertiary'],
      },
    },
    block: {
      table: {
        defaultValue: { summary: 'false' },
      },
    },
    v2: {
      table: {
        disable: true,
      },
    },
  },

  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>
    );
  },
};

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>
      </>
    );
  },
};