import * as Icons from '@transferwise/icons';

import { ControlType, Priority } from '../common';

import { Meta, StoryObj } from '@storybook/react-webpack5';
import CircularButton from './CircularButton';
import Title from '../title';
import Body from '../body';
import { withVariantConfig } from '../../.storybook/helpers';

export default {
  component: CircularButton,
  title: 'Actions/CircularButton',

  args: {
    children: 'Button text',
    icon: <Icons.Freeze />,
  },
  argTypes: {
    icon: {
      options: Object.keys(Icons),
      mapping: Object.fromEntries(
        Object.entries(Icons).map(([name, Icon]) => [name, <Icon key={name} />]),
      ),
    },
  },
} satisfies Meta<typeof CircularButton>;

type Story = StoryObj<typeof CircularButton>;

export const Basic: Story = {
  args: {
    priority: 'primary',
    type: 'default',
    disabled: false,
  },
};

export const All: Story = {
  args: {
    className: 'm-r-2',
  },
  render: (props) => {
    return (
      <>
        <Title type="title-subsection" className="m-y-2">
          Default (Primary and secondary)
        </Title>
        <Body>
          <CircularButton {...props} priority="primary" type="default" />
          <CircularButton {...props} priority="secondary" type="default" />
          <CircularButton {...props} priority="primary" type="default" disabled />
          <CircularButton {...props} priority="secondary" type="default" disabled />
        </Body>

        <Title type="title-subsection" className="m-y-2">
          Negative (Primary and secondary)
        </Title>
        <Body>
          <CircularButton {...props} priority="primary" type="negative" />
          <CircularButton {...props} priority="secondary" type="negative" />
          <CircularButton {...props} priority="primary" type="negative" disabled />
          <CircularButton {...props} priority="secondary" type="negative" disabled />
        </Body>

        <Title type="title-body" className="m-y-2">
          Accent (Deprecated)
        </Title>
        <Body>
          <CircularButton {...props} priority="primary" type="accent" />
          <CircularButton {...props} priority="secondary" type="accent" />
          <CircularButton {...props} priority="primary" type="accent" disabled />
          <CircularButton {...props} priority="secondary" type="accent" disabled />
        </Body>

        <Title type="title-body" className="m-y-2">
          Positive (Deprecated)
        </Title>
        <Body>
          <CircularButton {...props} priority="primary" type="positive" />
          <CircularButton {...props} priority="secondary" type="positive" />
          <CircularButton {...props} priority="primary" type="positive" disabled />
          <CircularButton {...props} priority="secondary" type="positive" disabled />
        </Body>
      </>
    );
  },
};

export const All400Zoom: Story = {
  ...All,
  ...withVariantConfig(['400%'], All),
};
