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

import Logo, { LogoType, LogoDisplay, LogoFormat } from './Logo';
import type { LogoSize } from './Logo';
import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
import { withVariantConfig } from '../../.storybook/helpers';
import Body from '../body';

/**
 * **Design guidance**: <a href="https://docs.wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
 */
const meta: Meta<typeof Logo> = {
  component: Logo,
  title: 'Content/Logo',
  args: {
    type: 'WISE',
  },
  argTypes: {
    type: {
      control: 'radio',
      options: Object.values(LogoType),
    },
    display: {
      control: 'radio',
      options: Object.values(LogoDisplay),
    },
    format: {
      control: 'radio',
      options: Object.values(LogoFormat),
    },
    size: {
      control: 'radio',
      options: [16, 18, 20, 24, 28, 36] satisfies LogoSize[],
    },
    inverse: { control: { disable: true } },
  },
  parameters: {
    docs: { toc: true },
  },
};

export default meta;

type Story = StoryObj<typeof Logo>;

/** Explore all props via the controls panel. */
export const Playground: Story = {
  args: {
    type: 'WISE',
    format: 'primary-lockup',
  },
  render: (args) => <Logo {...args} />,
};

export const Sandbox = createSandboxStory({
  code: `<Logo type="WISE" format="primary-lockup" size={24} />`,
  scope: { Logo },
});

/**
 * The three logo types: standard Wise, Wise Business, and Wise Platform.
 */
export const Types: Story = {
  argTypes: {
    type: { table: { disable: true } },
  },
  render: (args) => (
    <div
      style={{
        display: 'flex',
        gap: '3rem',
        alignItems: 'center',
        padding: '2rem',
        borderRadius: '8px',
      }}
    >
      {Object.values(LogoType).map((type) => (
        <div
          key={type}
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: '0.5rem',
          }}
        >
          <Logo {...args} type={type} />
        </div>
      ))}
    </div>
  ),
  parameters: {
    docs: {
      source: {
        code: `<Logo type="WISE" />
<Logo type="WISE_BUSINESS" />
<Logo type="WISE_PLATFORM" />`,
      },
    },
  },
};

/**
 * The `format="primary-lockup"` variant shows the product name inline alongside the wordmark.
 */
export const PrimaryLockup: Story = {
  argTypes: {
    type: { table: { disable: true } },
    format: { table: { disable: true } },
  },
  render: (args) => (
    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
      {Object.values(LogoType).map((type) => (
        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '0.5rem',
            }}
          >
            <Logo {...args} type={type} format="primary-lockup" />
          </div>
        </div>
      ))}
    </div>
  ),
  parameters: {
    docs: {
      source: {
        code: `<Logo type="WISE" format="primary-lockup" />
<Logo type="WISE_BUSINESS" format="primary-lockup" />
<Logo type="WISE_PLATFORM" format="primary-lockup" />`,
      },
    },
  },
};

/**
 * The `format="secondary-lockup"` variant uses a stacked two-line layout with the product name.
 */
export const SecondaryLockup: Story = {
  argTypes: {
    type: { table: { disable: true } },
    format: { table: { disable: true } },
  },
  render: (args) => (
    <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
      {Object.values(LogoType).map((type) => (
        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end' }}>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '0.5rem',
            }}
          >
            <Logo {...args} type={type} format="secondary-lockup" />
          </div>
        </div>
      ))}
    </div>
  ),
  parameters: {
    docs: {
      source: {
        code: `<Logo type="WISE" format="secondary-lockup" />
<Logo type="WISE_BUSINESS" format="secondary-lockup" />
<Logo type="WISE_PLATFORM" format="secondary-lockup" />`,
      },
    },
  },
};

/**
 * Controls the height and width of the logo in pixels.
 */
export const Sizes: Story = {
  argTypes: {
    size: { table: { disable: true } },
  },
  render: (args) => (
    <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end', padding: '2rem' }}>
      {([16, 18, 20, 24, 28, 36] as const).map((size) => (
        <div
          key={size}
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: '0.5rem',
          }}
        >
          <Logo {...args} size={size} />
          <Body>{size}</Body>
        </div>
      ))}
    </div>
  ),
  parameters: {
    docs: {
      source: {
        code: `<Logo size={..} />`,
      },
    },
  },
};

/**
 * When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type or other settings.
 */
export const Compact: Story = {
  render: (args) => (
    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
      {Object.values(LogoType).map((type) => (
        <div
          key={type}
          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
        >
          <Logo {...args} type={type} format="primary-lockup" display="compact" />
          <Logo {...args} type={type} format="secondary-lockup" display="compact" />
        </div>
      ))}
    </div>
  ),
  parameters: {
    docs: {
      source: {
        code: `<Logo type=".." format="primary-lockup" display="compact" />
<Logo type=".." format="secondary-lockup" display="compact" />`,
      },
    },
  },
};

/**
 * When `display` is `"full"`, the full wordmark/lockup is rendered regardless of screen width.
 */
export const Full: Story = {
  render: (args) => (
    <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
      {Object.values(LogoType).map((type) => (
        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end' }}>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '0.5rem',
            }}
          >
            <Logo {...args} type={type} format="primary-lockup" display="full" />
            <Logo {...args} type={type} format="secondary-lockup" display="full" />
          </div>
        </div>
      ))}
    </div>
  ),
  ...withVariantConfig(['mobile'], {
    parameters: {
      docs: {
        source: {
          code: `<Logo type=".." format="primary-lockup" display="full" />
<Logo type=".." format="secondary-lockup" display="full" />`,
        },
      },
    },
  }),
};
