import { clsx } from 'clsx';

import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
import { ReactComponent as LogoFlagPlatform } from './svg/flag-platform.svg';
import { ReactComponent as LogoFlag } from './svg/flag.svg';
import { ReactComponent as LogoWiseInverse } from './svg/logo-inverse.svg';
import { ReactComponent as LogoWisePlatformInverse } from './svg/logo-platform-white.svg';
import { ReactComponent as LogoWisePlatform } from './svg/logo-platform.svg';
import { ReactComponent as LogoWise } from './svg/logo.svg';

const svgPaths = {
  WISE: LogoWise,
  WISE_BUSINESS: LogoWise,
  WISE_INVERSE: LogoWiseInverse,
  WISE_BUSINESS_INVERSE: LogoWiseInverse,
  WISE_PLATFORM: LogoWisePlatform,
  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,
  WISE_FLAG: LogoFlag,
  WISE_FLAG_INVERSE: LogoFlagInverse,
  WISE_FLAG_PLATFORM: LogoFlagPlatform,
  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,
};

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

export interface LogoProps {
  /** Extra classes applied to Logo */
  className?: string;
  /** If true, will use dark colours for dark on light theme */
  inverse?: boolean;
  /** What type of logo to display */
  type?: `${LogoType}`;
}

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

export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
  const LogoSm =
    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];

  return (
    <span aria-label={labelByType[type]} role="img" className={clsx(className, 'np-logo')}>
      <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
      <LogoMd className="np-logo-svg np-logo-svg--size-md" />
    </span>
  );
}
