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

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

import { Meta, StoryObj } from '@storybook/react';
import CircularButton from './CircularButton';

export default {
  component: CircularButton,
  title: 'Actions/CircularButton',
  args: {
    children: 'Button text',
    // Needs to be cast because we're mapping icon names to components
    icon: 'Freeze' as unknown as React.ReactElement,
  },
  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: Priority.PRIMARY,
    type: ControlType.ACCENT,
    disabled: false,
  },
};

export const All: Story = {
  args: {
    className: 'm-r-2',
  },
  render: (props) => {
    return (
      <>
        <div className="m-b-2">
          <div className="title-4 m-b-1">Accent</div>
          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
        </div>
        <div className="m-b-2">
          <div className="title-4 m-b-1">Positive</div>
          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
        </div>
        <div className="m-b-2">
          <div className="title-4 m-b-1">Negative</div>
          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
        </div>
        <div className="m-b-2">
          <div className="title-4 m-b-1">Disabled</div>
          <CircularButton {...props} disabled />
          <CircularButton {...props} priority={Priority.SECONDARY} disabled />
        </div>
      </>
    );
  },
};
