import { clsx } from 'clsx';

import {
  WiseLogo,
  WiseBusinessPrimary,
  WiseBusinessSecondary,
  WisePlatformPrimary,
  WisePlatformSecondary,
  FastFlag,
  logoAssetsDimensions,
} from './logo-assets';
import type { LogoAssetName } from './logo-assets';
import { Breakpoint } from '../common';
import { useScreenSize } from '../common/hooks/useScreenSize';
import { AriaAttributes } from 'react';

export enum LogoType {
  WISE = 'WISE',
  WISE_BUSINESS = 'WISE_BUSINESS',
  WISE_PLATFORM = 'WISE_PLATFORM',
}

export enum LogoDisplay {
  RESPONSIVE = 'responsive',
  COMPACT = 'compact',
  FULL = 'full',
}

export enum LogoFormat {
  DEFAULT = 'default',
  PRIMARY_LOCKUP = 'primary-lockup',
  SECONDARY_LOCKUP = 'secondary-lockup',
}

export type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';

export interface LogoProps {
  /** Extra classes applied to Logo */
  className?: string;
  /**
   * Renders a light-coloured version suited for dark backgrounds.
   * @default false
   * @deprecated dark mode comes out of the box, this property has no effect
   */
  inverse?: boolean;
  /**
   * What type of logo to display
   * @default 'WISE'
   */
  type?: `${LogoType}`;
  /**
   * Controls which logo variant is shown.
   * - `"responsive"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).
   * - `"compact"`: always renders the fast-flag mark regardless of screen size.
   * - `"full"`: always renders the full wordmark/lockup regardless of screen size.
   * @default 'responsive'
   */
  display?: `${LogoDisplay}`;
  /**
   * Controls the format of the logo.
   * - `"default"`: plain Wise wordmark, no product name.
   * - `"primary-lockup"`: product name shown inline alongside the wordmark.
   * - `"secondary-lockup"`: stacked (two-line) variant with the product name.
   * @default 'default'
   */
  format?: `${LogoFormat}`;
  /**
   * Controls the height and width of the logo in pixels.
   * @default 24
   */
  size?: LogoSize;
  /**
   * Override default ({@link labelByType}) screen reader messages
   */
  'aria-label'?: AriaAttributes['aria-label'];
}

const labelByType = {
  WISE: 'Wise',
  WISE_BUSINESS: 'Wise Business',
  WISE_PLATFORM: 'Wise Platform',
} satisfies Record<`${LogoType}`, string>;

const logoAssets: Record<LogoAssetName, () => JSX.Element> = {
  FastFlag,
  WiseLogo,
  WiseBusinessPrimary,
  WiseBusinessSecondary,
  WisePlatformPrimary,
  WisePlatformSecondary,
};

/**
 * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
 * and the full wordmark on ≥600px (small breakpoint and above).
 *
 * @see {@link https://wise.design/foundations/logo Design Spec}
 */
export default function Logo({
  className,
  type = 'WISE',
  format = 'default',
  display = 'responsive',
  size = 24,
  'aria-label': ariaLabel,
}: LogoProps) {
  const isScreenSm = !useScreenSize(Breakpoint.SMALL);
  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);

  const assetName = compact ? 'FastFlag' : getAssetName(type, format);
  const Asset = logoAssets[assetName];
  const sizes = logoAssetsDimensions[assetName];
  const { width, height } =
    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];

  return (
    <span
      className={clsx('np-logo', className)}
      role="img"
      aria-label={ariaLabel ?? labelByType[type]}
      style={
        {
          '--wds-logo-width': `${width}px`,
          '--wds-logo-height': `${height}px`,
        } as React.CSSProperties
      }
    >
      <Asset />
    </span>
  );
}

function getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {
  if (format !== 'default') {
    if (type === 'WISE_BUSINESS') {
      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';
    }
    if (type === 'WISE_PLATFORM') {
      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';
    }
  }
  return 'WiseLogo';
}
