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

import Logo, { LogoType } from '.';

/**
 * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
 */
const meta: Meta<typeof Logo> = {
  component: Logo,
  title: 'Content/Logo',
  args: {
    type: 'WISE',
    inverse: false,
  },
  argTypes: {
    type: {
      control: 'radio',
      options: Object.values(LogoType),
    },
  },
  parameters: {
    docs: { toc: true },
  },
};

export default meta;

type Story = StoryObj<typeof Logo>;

/** Explore all props via the controls panel. */
export const Playground: Story = {
  render: (args) => (
    <div
      style={{
        padding: '2rem',
        ...(args.inverse
          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
          : {}),
      }}
    >
      <Logo {...args} />
    </div>
  ),
};

/**
 * The three logo types: standard Wise, Wise Business, and Wise Platform. <br />
 * `WISE_BUSINESS` renders the same SVG as `WISE` but with the accessible label "Wise Business".
 */
export const Types: Story = {
  argTypes: {
    type: { table: { disable: true } },
  },
  render: (args) => (
    <div
      style={{
        display: 'flex',
        gap: '3rem',
        alignItems: 'center',
        padding: '2rem',
        borderRadius: '8px',
        ...(args.inverse
          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
          : {}),
      }}
    >
      {Object.values(LogoType).map((type) => (
        <div
          key={type}
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: '0.5rem',
          }}
        >
          <Logo {...args} type={type} />
          <span
            style={{
              fontSize: '12px',
              ...(args.inverse ? { color: 'rgba(255,255,255,0.6)' } : { opacity: 0.6 }),
            }}
          >
            {type}
          </span>
        </div>
      ))}
    </div>
  ),
  parameters: {
    docs: {
      source: {
        code: `<Logo type="WISE" />
<Logo type="WISE_BUSINESS" />
<Logo type="WISE_PLATFORM" />`,
      },
    },
  },
};

/**
 * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
 */
export const Responsive: Story = {
  argTypes: {
    type: { table: { disable: true } },
    inverse: { table: { disable: true } },
  },
  render: (args) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
      <div>
        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
          {'< 576px (flag only)'}
        </span>
        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
          {Object.values(LogoType).map((type) => (
            <span key={type} className="np-logo" style={{ display: 'inline-block' }}>
              <style>{`.responsive-sm .np-logo-svg--size-md { display: none !important; } .responsive-sm .np-logo-svg--size-sm { display: block !important; }`}</style>
              <span className="responsive-sm">
                <Logo type={type} />
              </span>
            </span>
          ))}
        </div>
      </div>
      <div>
        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
          {'\u2265 576px (full wordmark)'}
        </span>
        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
          {Object.values(LogoType).map((type) => (
            <Logo key={type} type={type} />
          ))}
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      source: { code: null },
    },
  },
};

/**
 * All logo types on a dark background using the `inverse` prop, which renders a
 * light-coloured version suited for dark surfaces.
 */
export const Inverse: Story = {
  argTypes: {
    type: { table: { disable: true } },
    inverse: { table: { disable: true } },
  },
  decorators: [
    (Story) => (
      <div
        style={{
          display: 'flex',
          gap: '3rem',
          alignItems: 'center',
          backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)',
          padding: '2rem',
          borderRadius: '8px',
        }}
      >
        <Story />
      </div>
    ),
  ],
  render: (args) => (
    <>
      {Object.values(LogoType).map((type) => (
        <div
          key={type}
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: '0.5rem',
          }}
        >
          <Logo type={type} inverse />
          <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>{type}</span>
        </div>
      ))}
    </>
  ),
  parameters: {
    docs: {
      source: {
        code: `<Logo type="WISE" inverse />
<Logo type="WISE_BUSINESS" inverse />
<Logo type="WISE_PLATFORM" inverse />`,
      },
    },
  },
};