import { getQueryParamObjectFromPath, sleep } from '#lib/utils'
import { useGames } from '#lib/composables/game/use-games'
import { IFrameGameURLEnum } from '#lib/enums'
import { useRoute } from 'nuxt/app'
import { computed, onMounted, ref } from 'vue'

/**
 * Provides functionality for managing and displaying iframe-related game content.
 * This composable includes methods for fetching iframe URLs, managing progress indicators,
 * and determining if the current route is related to iframe games.
 *
 * @returns {Object} An object containing functions and reactive variables for handling iframes.
 * @namespace
 */
export function useIframe() {
  const route = useRoute()
  const { getGameUrlIframe, getGameUrl, getIframeGameMapGameApi } = useGames()
  const gameName = ref(route.params?.slug?.toString() ?? '')
  const progressNumber = ref(10)
  const isShowProgress = ref(true)
  const MAX_STEP = 100
  const STEP = 10
  const TIME_OUT = 500
  const TIME_OUT_STEP = 150
  const stepProgress = ref<NodeJS.Timeout>()

  /**
   * Determines if the current route path corresponds to an iframe game.
   *
   * @returns {boolean} True if the route path is an iframe game URL, otherwise false.
   */
  const checkIsIframe = computed(() => {
    return Object.values(IFrameGameURLEnum).includes(
      route.path as IFrameGameURLEnum,
    )
  })

  /**
   * Updates the progress number and hides the progress indicator when complete.
   *
   * @returns {Promise<void>} Resolves when the progress update is complete.
   */
  const setProgressNumber = async (): Promise<void> => {
    if (progressNumber.value >= MAX_STEP) {
      clearInterval(stepProgress.value!)
      await sleep(TIME_OUT)
      isShowProgress.value = false
    } else {
      progressNumber.value += STEP
    }
  }

  // Start the progress update interval when the component is mounted
  onMounted(() => {
    stepProgress.value = setInterval(setProgressNumber, TIME_OUT_STEP)
  })

  onBeforeUnmount(() => {
    if (stepProgress.value) {
      clearInterval(stepProgress.value)
    }
  })

  /**
   * Fetches the iframe URL for the current route.
   *
   * @returns {Promise<string | undefined>} The URL for the iframe, or undefined if not available.
   */
  const getIframeUrl = async (): Promise<string | undefined> => {
    const url = await getGameUrl(`${getIframeGameMapGameApi(route?.fullPath)}`)
    return enrichUrl(route.fullPath, url?.content)
  }

  const enrichUrl = (path: string, url: string | undefined): string | undefined => {
    const params = path.split('?')

    // todo: when meet more conditions, change this to switch case
    if (params[0] === IFrameGameURLEnum.K_SPORTS) {
      const { eventId, leagueId } = getQueryParamObjectFromPath(path)

      const urlObj = new URL(url!)
      const urlQueryParams = new URLSearchParams(urlObj.search)
      urlQueryParams.delete('sportId')
      urlQueryParams.append('sportId', '1')
      urlQueryParams.append('eventId', eventId)
      urlQueryParams.append('leagueId', leagueId)
      return `${urlObj.origin}?${urlQueryParams.toString()}`
    }
    return url
  }

  /**
   * Retrieves the game URL for the current route.
   *
   * @returns {string}
   * The game URL for the current route, or an empty string if not available.
   *
   */
  const gameURL = computed(() => {
    const getGameUrlClient = getGameUrlIframe(`/${gameName.value.toString()}`)
    if (getGameUrlClient) {
      return getGameUrlClient
    }

    return ''
  })

  /**
   * Determines the class name for the iframe background based on the game name.
   *
   * @returns {string}
   * The class name for the iframe background based on the game name.
   */
  const classIframeBackground = computed(() => {
    return gameName.value.toString()
  })

  return {
    progressNumber,
    gameURL,
    isShowProgress,
    stepProgress,
    classIframeBackground,
    checkIsIframe,
    setProgressNumber,
    getIframeUrl,
    enrichUrl,
  }
}