import { Meta, StoryObj } from '@storybook/react-webpack5';

import Logo, { LogoType } from '.';
import { LogoFormat } from './Logo';
import type { LogoSize } from './Logo';
import { withVariantConfig } from '../../.storybook/helpers';
import Body from '../body';

const meta: Meta<typeof Logo> = {
  component: Logo,
  tags: ['!autodocs', '!manifest'],
  title: 'Content/Logo/Tests',
};

export default meta;

type Story = StoryObj<typeof Logo>;

const AllVariants = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
    <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
      {Object.values(LogoType).map((type) => (
        <div key={type}>
          <Logo type={type} className="d-block" format="primary-lockup" />
          <Logo type={type} className="d-block" format="secondary-lockup" />
          <Logo type={type} className="d-block" format="primary-lockup" display="compact" />
          <Logo type={type} className="d-block" format="primary-lockup" display="full" />
          <Logo type={type} className="d-block" format="primary-lockup" display="responsive" />
        </div>
      ))}
    </div>
  </div>
);

export const Themes: Story = {
  render: () => <AllVariants />,
  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
    parameters: {
      padding: '',
    },
  }),
};

export const Responsive: Story = {
  render: () => <AllVariants />,
  ...withVariantConfig(['mobile']),
};

const sizes: LogoSize[] = [16, 18, 20, 24, 28, 36];

export const Sizes = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
    {(['compact', 'full'] as const).map((display) => (
      <div key={display} style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end' }}>
        {sizes.map((size) => (
          <div
            key={size}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '0.5rem',
            }}
          >
            <Logo type="WISE" size={size} display={display} />
            <Body>{size}</Body>
          </div>
        ))}
      </div>
    ))}
    {[LogoType.WISE_BUSINESS, LogoType.WISE_PLATFORM].map((type) =>
      [LogoFormat.PRIMARY_LOCKUP, LogoFormat.SECONDARY_LOCKUP].map((format) => (
        <div
          key={`${type}-${format}`}
          style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end' }}
        >
          {sizes.map((size) => (
            <div
              key={size}
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: '0.5rem',
              }}
            >
              <Logo type={type} format={format} size={size} display="full" />
              <Body>{size}</Body>
            </div>
          ))}
        </div>
      )),
    )}
  </div>
);
