import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import VisuallyHidden from '@reach/visually-hidden';
import reactElementToJSXString from 'react-element-to-jsx-string';

import lendiFallback from './fallback-styles/lendi';
import aussieFallback from './fallback-styles/aussie';
import domainFallback from './fallback-styles/domain';

import type { ThemeName } from '@lendi-ui/commons/utils';

// All CDN assets can be found in the /public folder in this repo
export const config = {
  lendi: {
    fontFamilies: ['Open Sans', 'Cabin'],
    fallback: lendiFallback,
    brandFontFace: [
      <link
        href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap"
        rel="stylesheet"
        key="lendi"
      />,
    ],
  },
  'lendi-next': {
    // ^^ duplicate of lendi above ^^, but ts complains if we don't redeclare it here
    fontFamilies: ['Open Sans', 'Cabin'],
    fallback: lendiFallback,
    brandFontFace: [
      <link
        href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap"
        rel="stylesheet"
        key="lendi"
      />,
    ],
  },
  domain: {
    fontFamilies: ['F37 Bolton'],
    fallback: domainFallback,
    brandFontFace: [<link href={`https://lendi.style/font-face/domain.css`} rel="stylesheet" key="domain" />],
  },
  aussie: {
    fontFamilies: ['Barlow', 'tt-commons-pro'],
    fallback: aussieFallback,
    brandFontFace: [
      <link
        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
        rel="stylesheet"
        key="aussie-google"
      />,
      <link href={`https://use.typekit.net/qnh1xks.css`} rel="stylesheet" key="aussie" />,
    ],
  },
};

const FontComponent = ({
  children,
  disableFallbackFonts = false,
  themeName,
}: {
  children: any;
  disableFallbackFonts?: boolean;
  themeName: ThemeName;
}) => {
  const currentThemeConfig = config[themeName];

  const [brandFontLoaded, setBrandFontLoaded] = useState<boolean>(false);

  useEffect(() => {
    if (!brandFontLoaded && 'fonts' in document) {
      (document as any).fonts.onloadingdone = (fontFaceSetEvent: { returnValue: boolean }) => {
        setBrandFontLoaded(fontFaceSetEvent?.returnValue ?? true);
      };

      return;
    }

    setBrandFontLoaded(true);
  }, [brandFontLoaded]);

  const FontDetector = () => {
    const fontFamilies = currentThemeConfig.fontFamilies;

    if (brandFontLoaded) {
      return null;
    }

    return (
      <VisuallyHidden aria-hidden="true">
        {fontFamilies.map((fontFamily, index) => (
          <span key={index} style={{ fontFamily }}>
            &nbsp;
          </span>
        ))}
      </VisuallyHidden>
    );
  };

  const fontLinks = currentThemeConfig.brandFontFace.map((fontFace) => reactElementToJSXString(fontFace)).join();
  const useFallbackFonts = !brandFontLoaded && !disableFallbackFonts;

  return (
    <>
      <Helmet>
        <link rel="preconnect" href="https://use.typekit.net/" crossOrigin="true" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />

        {currentThemeConfig.brandFontFace.map((fontFace) => fontFace)}

        {useFallbackFonts && <style>{currentThemeConfig?.fallback}</style>}

        <noscript>{fontLinks}</noscript>
      </Helmet>

      {children}
      <FontDetector />
    </>
  );
};

export const Font = FontComponent;