import { Meta, StoryObj } from '@storybook/react';
import { storyConfig } from '../../test-utils';
import Circle from './Circle';
import { Profile } from '@transferwise/icons';
import { action } from '@storybook/addon-actions';
import { CircleProps } from '.';
import Body from '../../body';

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

type Story = StoryObj<typeof Circle>;

export const Basic: Story = {
  tags: ['autodocs'],
  args: {
    children: 'NP',
    size: 40,
    as: 'div',
    className: 'bg-neutral',
  },
  render: (args) => {
    return <Circle {...args} />;
  },
};

export const Sizes: Story = storyConfig(
  {
    render: () => {
      const content = <Profile size={16} />;
      const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
      return (
        <div
          style={{
            gap: '1em',
            display: 'grid',
            justifyContent: 'space-between',
            gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
          }}
        >
          {sizes.map((size) => (
            <Circle key={size} size={size} className="bg-neutral">
              {content}
            </Circle>
          ))}
        </div>
      );
    },
  },
  { variants: ['light', 'dark'] },
);

export const FixedSize: Story = storyConfig(
  {
    render: () => {
      const size = 72;
      const content = <Profile size={16} />;
      return (
        <div
          style={{
            gap: '1em',
            display: 'grid',
            justifyContent: 'space-between',
            gridTemplate: 'auto auto / repeat(2, 180px)',
          }}
        >
          <Body className="d-block">
            Dynamic Size (<code>--size-{size}</code>)
          </Body>
          <Body className="d-block">
            Fixed Size (<code>{size}px</code>)
          </Body>
          <Circle size={72} fixedSize={false} className="bg-neutral">
            {content}
          </Circle>
          <Circle size={72} fixedSize className="bg-neutral">
            {content}
          </Circle>
        </div>
      );
    },
  },
  { variants: ['400%'] },
);
