import * as React from 'react';
import { ThemeProvider } from 'styled-components';
import { isBrowser, ThemeName } from '@lendi-ui/commons/utils';
import { theme as themeLegacy } from './theme/lendi';
import { domainTheme } from './theme/domain';
import { lendiNextTheme } from './theme/lendi-next';
import { aussieTheme } from './theme/aussie';
import { ThemeMap } from './types';
import Favicon from './components/Favicon';
import Font from './components/Font';
import { setThemeName } from './utils';
import { GlobalStyle } from './Theme.style';

interface ThemeProps {
  /**
   * @deprecated Deprecated since 0.2.3. Use `name` instead
   * @example
   * import { Theme } from '@lendi/ui';
   *
   * return (
   *   <Theme name={'lendi'} >
   *     <App />
   *   </Theme>
   * )
   */
  kind?: ThemeMap;
  name?: ThemeName;
  children?: React.ReactNode;
  disableFallbackFonts?: boolean;
}

/**
 * To provide the best transition experience, and avoid breaking changes, we’re going to keep the `name` as optional.
 *
 * Meanwhile, `mapThemeNameToLegacyKind` will ensure to correct mapping.
 *
 * We will make `name` mandatory in the next breaking change.
 *
 * @since 0.2.3
 * @param {string} themeName the new ThemeName
 * @return {ThemeMap | undefined} kind the legacy ThemeMap
 *
 * @todo LUI-785 Remove backwards compatibility in next major.
 * @see https://creditandfinance.atlassian.net/browse/LUI-785
 */
const mapThemeNameToLegacyKind = (themeName?: ThemeName): ThemeMap | undefined => {
  switch (themeName) {
    case 'lendi':
      return themeLegacy;
    case 'domain':
      return domainTheme;
    case 'lendi-next':
      return lendiNextTheme;
    case 'aussie':
      return aussieTheme;
    default:
      return undefined;
  }
};

/**
 * @param {ThemeProps} props
 * @param {string} props.name `lendi`, `domain`, `aussie`, `lendi-next`
 * @param {ThemeMap} props.kind Deprecated. Use `name` instead.
 * @param {boolean} props.disableFallbackFonts Whether you wish to disable fallback fonts.
 * @param {ReactNode} props.children React children
 *
 * @since 0.2.3
 */
export const Theme = ({ kind = themeLegacy, name, disableFallbackFonts = false, children }: ThemeProps) => {
  const innerKind = mapThemeNameToLegacyKind(name) ?? kind;
  /**
   * Determine appropriate themeName based on to backwards compatibility
   *
   * If `kind` is provided, use that first, because that's the backwards supported API.
   * Else, if `name` is provided, use that next, because that's the new API.
   *
   * @todo LUI-785 Remove backwards compatibility in next major.
   */
  const themeName = innerKind?.name ?? name;
  if (!themeName) return null;

  // Run runtime setThemeName to apply theming data attribute
  setThemeName(themeName);

  /**
   * As part of ThemeV2 & Navbar constraint (use of `window`), the following `isBrowser` check enforces Client Side Rendering.
   * This is a temporary measure, and will be removed in the future once SSR is fully supported.
   * @see [LUI-854](https://creditandfinance.atlassian.net/browse/LUI-854)
   */
  return (
    <ThemeProvider theme={innerKind}>
      <GlobalStyle />
      <Favicon themeName={themeName} />
      <Font themeName={themeName} disableFallbackFonts={disableFallbackFonts}>
        {isBrowser ? children : ''}
      </Font>
    </ThemeProvider>
  );
};