import type { ReactNode } from 'react'
import { Fragment, useEffect } from 'react'
import { useHistory } from 'react-router-dom'

import { isMobileDevice, PAGES } from 'config'

import { usePageParams } from 'hooks'

import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
import { useMatchPageStore } from 'features/MatchPage/store'
import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'

import { isSubscribePopup } from 'helpers'

import { getMatchInfo } from 'requests'

import { prepareMatchProfile } from '../../helpers/prepareMatchProfile'
import { useAuthStore } from '../../../AuthStore'

type Props = {
  children: ReactNode,
}

export const SubscriptionGuard = ({ children }: Props) => {
  const { profile: matchProfile, setMatchProfile } = useMatchPageStore()
  const { match, open: openBuyMatchPopup } = useBuyMatchPopupStore()
  const { profileId: matchId, sportType } = usePageParams()
  const { user } = useAuthStore()
  const history = useHistory()

  const checkAccess = async () => {
    const profile = await getMatchInfo(sportType, matchId)

    if (!profile?.sub) {
      history.replace(PAGES.home)
    }
  }

  useEffect(() => {
    let timer: NodeJS.Timeout

    if ((user && matchProfile
      && !matchProfile.sub
      && match?.access !== MatchAccess.RedirectToProfile)
      || (matchProfile && isSubscribePopup())) {
      const profile = prepareMatchProfile({
        matchId,
        profile: matchProfile,
        sportType,
      })
      openBuyMatchPopup(profile)
      isMobileDevice && history.replace(PAGES.subscriptions)
    }

    if (match?.access === MatchAccess.RedirectToProfile) {
      setMatchProfile((profile) => profile && {
        ...profile,
        access: true,
        sub: true,
      })

      timer = setTimeout(checkAccess, 30000)
    }

    return () => timer && clearTimeout(timer)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    matchId,
    openBuyMatchPopup,
    matchProfile?.sub,
    sportType,
    user,
    match?.access,
    history,
  ])

  return (
    <Fragment>
      {matchProfile?.sub || !user ? children : null}
    </Fragment>
  )
}