/* eslint-disable react/jsx-key */
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';

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 type="body-default-bold">{variant}</Body>
          ),
        )}
        {sizes.map((size) => (
          <Template size={size} />
        ))}
        <Template size={72} disabled />
      </div>
    );
  },
};
