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

import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import CircularButton, { CircularButtonProps } from './CircularButton';
import Title from '../title';
import SentimentSurface from '../sentimentSurface';

/**
 * An <a href="?path=/docs/actions-iconbutton--docs">IconButton</a> with a text label below it.
 *
 * **Design guidance**: <a href="https://wise.design/components/circular-button" target="_blank">wise.design/components/circular-button</a>
 */
export default {
  component: CircularButton,
  title: 'Actions/CircularButton',
  args: {
    children: 'Button text',
    icon: <Icons.Freeze />,
    onClick: fn(),
    priority: 'primary',
    type: 'default',
    disabled: false,
  },
  argTypes: {
    icon: {
      options: Object.keys(Icons),
      mapping: Object.fromEntries(
        Object.entries(Icons).map(([name, Icon]) => [name, <Icon key={name} />]),
      ),
    },
    className: { table: { category: 'Common' } },
    onClick: { table: { category: 'Common', type: { summary: 'function' } } },
  },
  parameters: {
    docs: { toc: true },
  },
} satisfies Meta<typeof CircularButton>;

type Story = StoryObj<typeof CircularButton>;

/** Explore all props via the controls panel. */
export const Playground: Story = {};

/**
 * Priorities set a visual hierarchy amongst the buttons displayed on the
 * screen to help more important buttons to take precedence over others. <br />
 * [Design documentation](https://wise.design/components/circular-button#priority)
 */
export const Priority: Story = {
  args: {
    type: 'default',
  },
  argTypes: {
    type: {
      control: 'radio',
      options: ['default', 'negative'],
    },
    priority: { table: { disable: true } },
    disabled: { table: { disable: true } },
    icon: { table: { disable: true } },
    children: { table: { disable: true } },
    onClick: { table: { disable: true } },
  },
  decorators: [
    (Story) => (
      <div style={{ display: 'flex', gap: '24px' }}>
        <Story />
      </div>
    ),
  ],
  render: (args: CircularButtonProps) => (
    <>
      <CircularButton priority="primary" type={args.type} icon={<Icons.Send />} onClick={fn()}>
        Primary
      </CircularButton>
      <CircularButton priority="secondary" type={args.type} icon={<Icons.Plus />} onClick={fn()}>
        Secondary
      </CircularButton>
    </>
  ),
};

/**
 * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
 * [Design documentation](https://wise.design/components/circular-button#types)
 */
export const Type: Story = {
  args: {
    priority: 'primary',
  },
  argTypes: {
    priority: {
      control: 'radio',
      options: ['primary', 'secondary'],
    },
    type: { table: { disable: true } },
    disabled: { table: { disable: true } },
    icon: { table: { disable: true } },
    children: { table: { disable: true } },
    onClick: { table: { disable: true } },
  },
  decorators: [
    (Story) => (
      <div style={{ display: 'flex', gap: '24px' }}>
        <Story />
      </div>
    ),
  ],
  render: (args: CircularButtonProps) => (
    <>
      <CircularButton priority={args.priority} type="default" icon={<Icons.Send />} onClick={fn()}>
        Default
      </CircularButton>
      <CircularButton
        priority={args.priority}
        type="negative"
        icon={<Icons.Cross />}
        onClick={fn()}
      >
        Negative
      </CircularButton>
    </>
  ),
};

/**
 * Disabled buttons cannot be interacted with and are visually distinct.
 */
export const Disabled: Story = {
  args: {
    priority: 'primary',
    type: 'default',
  },
  argTypes: {
    priority: {
      control: 'radio',
      options: ['primary', 'secondary'],
    },
    type: {
      control: 'radio',
      options: ['default', 'negative'],
    },
    disabled: { table: { disable: true } },
    icon: { table: { disable: true } },
    children: { table: { disable: true } },
    onClick: { table: { disable: true } },
  },
  decorators: [
    (Story) => (
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <Story />
      </div>
    ),
  ],
  render: (args: CircularButtonProps) => (
    <CircularButton disabled priority={args.priority} type={args.type} icon={<Icons.Card />}>
      Disabled
    </CircularButton>
  ),
};

/**
 * `CircularButton` is sentiment-aware and will automatically adjust its colours if wrapped inside
 * the <a href="?path=/docs/foundations-sentimentsurface--docs">SentimentSurface</a> component. <br />
 * [Design documentation](https://wise.design/components/circular-button)
 */
export const SentimentAwareness: Story = {
  render: () => {
    const buttons = [
      {
        priority: 'primary',
        type: 'default',
        icon: <Icons.Send />,
        label: 'primary',
        disabled: false,
      },
      {
        priority: 'secondary',
        type: 'default',
        icon: <Icons.Plus />,
        label: 'secondary',
        disabled: false,
      },
      {
        priority: 'primary',
        type: 'negative',
        icon: <Icons.Cross />,
        label: 'neg primary',
        disabled: false,
      },
      {
        priority: 'secondary',
        type: 'negative',
        icon: <Icons.Edit />,
        label: 'neg secondary',
        disabled: false,
      },
      {
        priority: 'primary',
        type: 'default',
        icon: <Icons.Card />,
        label: 'disabled',
        disabled: true,
      },
    ] as const;
    const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;

    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {/* Rows for each sentiment with base and elevated emphasis */}
        {sentiments.flatMap((sentiment) => [
          <SentimentSurface
            key={`${sentiment}-base`}
            sentiment={sentiment}
            emphasis="base"
            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
          >
            <div
              style={{
                width: '120px',
                fontSize: '11px',
                fontWeight: 'bold',
                textAlign: 'left',
                paddingLeft: '8px',
              }}
            >
              {sentiment} (base)
            </div>
            {buttons.map((button) => (
              <div
                key={button.label}
                style={{
                  width: '100px',
                  display: 'flex',
                  justifyContent: 'center',
                }}
              >
                <CircularButton
                  priority={button.priority}
                  type={button.type}
                  icon={button.icon}
                  disabled={button.disabled}
                  onClick={fn()}
                >
                  {button.label}
                </CircularButton>
              </div>
            ))}
          </SentimentSurface>,
          <SentimentSurface
            key={`${sentiment}-elevated`}
            sentiment={sentiment}
            emphasis="elevated"
            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
          >
            <div
              style={{
                width: '120px',
                fontSize: '11px',
                fontWeight: 'bold',
                textAlign: 'left',
                paddingLeft: '8px',
              }}
            >
              {sentiment} (elevated)
            </div>
            {buttons.map((button) => (
              <div
                key={button.label}
                style={{
                  width: '100px',
                  display: 'flex',
                  justifyContent: 'center',
                }}
              >
                <CircularButton
                  priority={button.priority}
                  type={button.type}
                  icon={button.icon}
                  disabled={button.disabled}
                  onClick={fn()}
                >
                  {button.label}
                </CircularButton>
              </div>
            ))}
          </SentimentSurface>,
        ])}
      </div>
    );
  },
  parameters: {
    docs: {
      canvas: { sourceState: 'hidden' },
    },
  },
};