import { Meta, StoryObj } from '@storybook/react-webpack5';
import {
  ArrowLeft,
  Cross,
  Defrost,
  Edit,
  Menu,
  Plus,
  Settings,
  Star,
  Travel,
  Briefcase,
  Bank,
  Freeze,
} 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: () => {
    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
    const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;

    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {/* Header row with priority labels */}
        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '4px', gap: '8px' }}>
          <div style={{ width: '82px', paddingLeft: '8px' }} />
          {priorities.map((priority) => (
            <div
              key={priority}
              style={{
                width: '32px',
                textAlign: 'center',
                fontSize: '11px',
                fontWeight: 'bold',
                writingMode: 'vertical-rl',
                transform: 'rotate(180deg)',
                height: '60px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {priority}
            </div>
          ))}
        </div>

        {/* 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: '82px',
                fontSize: '11px',
                fontWeight: 'bold',
                textAlign: 'left',
                paddingLeft: '8px',
              }}
            >
              {sentiment} (base)
            </div>
            <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')}
            >
              <Settings />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Tertiary action"
              priority="tertiary"
              type="default"
              onClick={action('button click')}
            >
              <Star />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Minimal action"
              priority="minimal"
              type="default"
              onClick={action('button click')}
            >
              <Travel />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Disabled action"
              priority="primary"
              type="default"
              disabled
              onClick={action('button click')}
            >
              <Menu />
            </IconButton>
          </SentimentSurface>,
          <SentimentSurface
            key={`${sentiment}-elevated`}
            sentiment={sentiment}
            emphasis="elevated"
            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
          >
            <div
              style={{
                width: '82px',
                fontSize: '11px',
                fontWeight: 'bold',
                textAlign: 'left',
                paddingLeft: '8px',
              }}
            >
              {sentiment} (elevated)
            </div>
            <IconButton
              size={32}
              aria-label="Primary action"
              priority="primary"
              type="default"
              onClick={action('button click')}
            >
              <Briefcase />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Secondary action"
              priority="secondary"
              type="default"
              onClick={action('button click')}
            >
              <Bank />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Tertiary action"
              priority="tertiary"
              type="default"
              onClick={action('button click')}
            >
              <Freeze />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Minimal action"
              priority="minimal"
              type="default"
              onClick={action('button click')}
            >
              <Edit />
            </IconButton>
            <IconButton
              size={32}
              aria-label="Disabled action"
              priority="primary"
              type="default"
              disabled
              onClick={action('button click')}
            >
              <Cross />
            </IconButton>
          </SentimentSurface>,
        ])}
      </div>
    );
  },
  parameters: {
    docs: {
      source: { type: 'dynamic' },
      canvas: {
        sourceState: 'hidden',
      },
    },
  },
};
