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

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

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'Actions/Button',
  argTypes: {
    as: {
      type: {
        name: 'enum',
        value: ['button', 'a'],
      },
    },
    size: {
      type: {
        name: 'enum',
        value: ['sm', 'md', 'lg'],
      },
    },
    href: {
      type: {
        name: 'string',
      },
    },
    priority: {
      type: {
        name: 'enum',
        value: ['primary', 'secondary', 'tertiary', 'Minimal'],
      },
    },
    appearance: {
      type: {
        name: 'enum',
        value: ['default', 'negative'],
      },
    },
    iconLeft: {
      type: {
        name: 'string',
      },
    },
    iconOnly: {
      type: {
        name: 'string',
      },
    },
    iconRight: {
      type: {
        name: 'string',
      },
    },
    avatars: {
      control: 'object',
    },
    htmlType: {
      table: {
        disable: true,
      },
    },
    'data-testid': {
      table: {
        disable: true,
      },
    },
  },
  args: {
    children: 'Button text',
    as: 'button',
    href: undefined,
    disabled: false,
    loading: false,
    size: 'md',
    iconLeft: undefined,
    iconRight: undefined,
    iconOnly: undefined,
    priority: 'primary',
    appearance: 'default',
    avatars: undefined,
    useNewButton: true,
    onClick: fn(),
    onBlur: fn(),
    onFocus: fn(),
    onKeyDown: fn(),
    onMouseEnter: fn(),
    onMouseLeave: fn(),
  },
  tags: ['autodocs'],
  decorators: [withContainer],
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Basic: Story = {
  parameters: {
    docs: {
      description: {
        story: 'A basic example of the Button component.',
      },
    },
  },
};

export const Secondary: Story = {
  args: {
    priority: 'secondary',
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button with secondary priority.',
      },
    },
  },
};

export const Tertiary: Story = {
  args: {
    priority: 'tertiary',
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button with tertiary priority.',
      },
    },
  },
};

export const Minimal: Story = {
  args: {
    priority: 'minimal',
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button with minimal priority.',
      },
    },
  },
};

export const Negative: Story = {
  args: {
    appearance: 'negative',
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button with negative appearance.',
      },
    },
  },
};

export const NegativeSecondary: Story = {
  args: {
    appearance: 'negative',
    priority: 'secondary',
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button with negative appearance and secondary priority.',
      },
    },
  },
};

export const AsAnchor: Story = {
  args: {
    as: 'a',
    href: 'https://wise.com',
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button rendered as an anchor element.',
      },
    },
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'A disabled Button.',
      },
    },
  },
};

export const Loading: Story = {
  args: {
    loading: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button in a loading state.',
      },
    },
  },
};

export const SizeSmall: Story = {
  args: {
    size: 'sm',
  },
  parameters: {
    docs: {
      description: {
        story: 'A small Button.',
      },
    },
  },
};

export const SizeLarge: Story = {
  args: {
    size: 'lg',
  },
  parameters: {
    docs: {
      description: {
        story: 'A large Button.',
      },
    },
  },
};

export const DisplayBlock: Story = {
  args: {
    block: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button that takes up the full width of its container.',
      },
    },
  },
};

export const WithIcon: Story = {
  args: {
    iconRight: 'ChevronRight',
  },
  parameters: {
    docs: {
      description: {
        story:
          'A Button with an icon on the right. Can also use `iconLeft` to place the icon on the left or have both at the same time.',
      },
    },
  },
};

export const WithIconOnly: Story = {
  argTypes: {
    size: {
      type: {
        name: 'enum',
        value: [16, 24, 32, 40, 48, 56, 72],
      },
    },
    loading: { table: { disable: true } },
    avatars: { table: { disable: true } },
    iconLeft: { table: { disable: true } },
    iconRight: { table: { disable: true } },
    block: { table: { disable: true } },
  },
  args: {
    iconOnly: 'Freeze',
    size: 40,
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button rendered with only an icon.',
      },
    },
  },
};

export const WithAvatars: Story = {
  args: {
    avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
  },
  parameters: {
    docs: {
      description: {
        story:
          'A Button with avatars. Will supersed any `iconLeft` property and will always render avatars.',
      },
    },
  },
};

export const WithAvatarAndIcon: Story = {
  args: {
    avatars: [{ asset: <Freeze /> }],
    iconRight: 'ChevronRight',
  },
  parameters: {
    docs: {
      description: {
        story: 'A Button with an avatar and an icon.',
      },
    },
  },
};
