import { Meta, StoryObj } from '@storybook/react-webpack5';
import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
import IconButton, { Props } from './IconButton';
import { action } from 'storybook/actions';
import Body from '../body';
import SentimentSurface from '../sentimentSurface';

export default {
  title: 'Actions/IconButton',
  component: IconButton,
} satisfies Meta<typeof IconButton>;

type Story = StoryObj<typeof IconButton>;

const sizes: Props['size'][] = [16, 24, 32, 40, 48, 56, 72];

const Template = ({ size, disabled }: Props) => {
  return (
    <>
      <IconButton
        size={size}
        disabled={disabled}
        aria-label="One step back"
        priority="primary"
        type="default"
        onClick={action('button click')}
      >
        <Plus />
      </IconButton>
      <IconButton
        size={size}
        disabled={disabled}
        aria-label="One step back"
        priority="secondary"
        type="default"
        onClick={action('button click')}
      >
        <Defrost />
      </IconButton>
      <IconButton
        size={size}
        disabled={disabled}
        aria-label="One step back"
        priority="tertiary"
        type="default"
        onClick={action('button click')}
      >
        <ArrowLeft />
      </IconButton>
      <IconButton
        size={size}
        disabled={disabled}
        aria-label="One step back"
        priority="minimal"
        type="default"
        onClick={action('button click')}
      >
        <Menu />
      </IconButton>
      <IconButton
        size={size}
        disabled={disabled}
        aria-label="One step back"
        priority="primary"
        type="negative"
        onClick={action('button click')}
      >
        <Cross />
      </IconButton>
      <IconButton
        size={size}
        disabled={disabled}
        aria-label="One step back"
        priority="secondary"
        type="negative"
        onClick={action('button click')}
      >
        <Edit />
      </IconButton>
    </>
  );
};

export const Basic: Story = {
  render: () => {
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: `auto auto / repeat(6, min-content)`,
        }}
      >
        {['Primary', 'Secondary', 'Tertiary', 'Minimal', 'Neg primary', 'Neg secondary'].map(
          (variant) => (
            <Body key={variant} type="body-default-bold">
              {variant}
            </Body>
          ),
        )}
        {sizes.map((size) => (
          <Template key={size} size={size} />
        ))}
        <Template size={72} disabled />
      </div>
    );
  },
};

/**
 * `IconButton` is sentiment-aware and will automatically adjust its colours if wrapped inside
 * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component
 */
export const SentimentAwareness: Story = {
  render: () => {
    return (
      <>
        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
          (sentiment) => (
            <SentimentSurface
              key={sentiment}
              sentiment={sentiment}
              className="p-a-1 d-flex align-items-center"
              style={{ gap: 'var(--size-8)' }}
            >
              <IconButton
                size={32}
                aria-label="Primary action"
                priority="primary"
                type="default"
                onClick={action('button click')}
              >
                <Plus />
              </IconButton>
              <IconButton
                size={32}
                aria-label="Secondary action"
                priority="secondary"
                type="default"
                onClick={action('button click')}
              >
                <Defrost />
              </IconButton>
              <IconButton
                size={32}
                aria-label="Disabled action"
                priority="primary"
                type="default"
                disabled
                onClick={action('button click')}
              >
                <Menu />
              </IconButton>
            </SentimentSurface>
          ),
        )}
      </>
    );
  },
  parameters: {
    docs: {
      source: { type: 'dynamic' },
      canvas: {
        sourceState: 'hidden',
      },
    },
  },
  decorators: [
    (Story) => (
      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <Story />
      </div>
    ),
  ],
};
