import * as React from 'react'
import {objectIsEmpty} from '../../utils/helpers'

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore because we're using an alias that TS doesn't know about. // TODO: fix this
import animation from 'TEMPLATE/animation/index.js'
import {AnimationScripts} from '../../components/AnimationScripts'

/**
 * @category Types
 */
export interface AnimationBag {
  /**
   * An array of animation scripts that initialise the animation in various environments.
   */
  scripts: React.ReactNode
  /**
   * A class name applied to the Body component containing `is-static` if an animated template's props contains `cancelAnimation: true`.
   */
  bodyClassName: string
}

const builderConfig: GSDevTools.Vars = {hideGlobalTimeline: true, loop: false, minimal: true, visibility: `auto`}

/**
 *
 * @param allTemplateProps - the props object passed to the template
 * @returns {@link AnimationBag} to be passed to {@link Body}’s {@link BodyProps.animation} prop
 *
 * @category Hooks
 *
 * @example
 * ```jsx
 * import {useAnimation} from '@/hooks/useAnimation'
 *
 * const Template = (props) => {
 *   const animationBag = useAnimation(props)
 *   return (
 *     <Body
 *       // pass the result of useAnimation to the Body component via its `animation` prop
 *       animation={animationBag}
 *     >
 *       {* your template here *}
 *    </Body>
 * ```
 */
export const useAnimation = ({
  libs: {gsap, GSDevTools, ...libs} = {},
  content = {},
  /**
   * Setting this to false will disable the animation and set `is-static` on the body class. Which can be used to hide or show elements, thereby creating how the static version of the otherwise animated template should look. This is done through the Hucssley classes `is-static__visibility:visible` and `visibility:hidden` which you can set on elements that should be hidden prior to animation, but shown in the static version of the template.
   */
  cancelAnimation = false,
  templateUrl = `./template`,
  gsapVersion,
}: TemplateProps) => {
  // allow passing this flag from builder content or as regular prop
  const isStatic = content.cancelAnimation || cancelAnimation

  // store the running animation so it can be `kill`ed if user
  // toggles animation off from builder (via cancelAnimation)
  const [activeAnimation, setActiveAnimation] = React.useState<GSAPAnimation>()

  React.useEffect(() => {
    if (activeAnimation) {
      activeAnimation.kill()
    } else if (!isStatic) {
      const context = (() => {
        if (typeof global !== `undefined`) {
          return global
        } else if (typeof globalThis !== `undefined`) {
          return globalThis
        } else if (typeof self !== `undefined`) {
          return self
        } else if (typeof window !== `undefined`) {
          return window
        } else {
          return Function(`return this`)()
        }
      })()
      const w = context
      // use ad network's global gsap if available
      w.gsap = w.gsap || gsap
      // create namespace to minimise global pollution
      w.mabx = w.mabx || {}
      // store our animation script in namespace

      w.mabx.animation = w.mabx.animation || animation
      // register before initialising animation
      if (GSDevTools) w.gsap.registerPlugin(GSDevTools)
      if (!objectIsEmpty(libs)) w.gsap.libs = libs
      setActiveAnimation(w.mabx.animation(w.gsap))
      // create after initialising animation (order necessity unconfirmed)
      if (GSDevTools) {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore because the error makes no sense and prevents the code from working
        GSDevTools?.create<GSDevTools.Vars>({
          ...builderConfig,
          // point devtools scrubber at template animation only, so it ignores Mimosa's use of Greensock to fade in the template.
          animation: `template`,
          globalSync: false,
        })
      }
    }
  }, [isStatic])

  return {
    bodyClassName: isStatic ? `is-static` : ``,
    scripts: isStatic ? <></> : <AnimationScripts templateUrl={templateUrl} libs={libs} gsapVersion={gsapVersion} />,
  }
}

export default useAnimation