import * as React from 'react'
import {FC} from 'react'
import {objectIsEmpty} from '../../utils/helpers'
import {Libs} from '../../types/template'
import {AdditionalLibraries} from './helpers'

/**
 * @ignore
 */
export const initialisationScript = `
if (
  typeof window !== "undefined"
  && typeof window.gsap !== "undefined"
  && typeof window.mabx !== "undefined"
  && typeof window.mabx.default === "function"
) {
  window.mabx.default(window.gsap)
}
`
/**
 * @category Props
 * @internal
 */
export interface AnimationScriptsProps {
  /**
   * The URL of the hosted template.
   */
  templateUrl: string
  /**
   * Must match the version of [GSAP served by the ad network’s CDN](https://support.google.com/richmedia/answer/6307288?hl=en).
   * @defaultValue `3.9.1`
   */
  gsapVersion?: Version
  /**
   * A record of additional GSAP libraries to load.
   */
  libs?: Libs
}

/**
 * Outputs the animation scripts for the template in IIFE format for ad network compatibility.
 * @param props - the props of the component
 * @returns the component
 * @category Components
 * @internal
 */
export const AnimationScripts: FC<AnimationScriptsProps> = ({templateUrl, gsapVersion = `3.9.1`, libs = {}}) => {
  return (
    <>
      <script src={`https://s0.2mdn.net/ads/studio/cached_libs/gsap_${gsapVersion}_min.js`}></script>
      {!objectIsEmpty(libs) && <AdditionalLibraries templateUrl={templateUrl} />}
      <script src={`${templateUrl}/animation/iife/index.js`}></script>
      {/* Using dangerouslySetInnerHTML to work around JSX escaping strings, including the `&` and quote characters used in our initialisationScript */}
      <script dangerouslySetInnerHTML={{__html: initialisationScript}}></script>
    </>
  )
}

export default AnimationScripts