import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useTranslation } from 'react-i18next'

export type Locale = 'zh' | 'ja' | 'en'

export const DEFAULT_LOCALE: Locale = 'ja'
export const TEMPLATE_LIMIT = 5

let legacyScriptsPromise: Promise<void> | undefined

export function normalizeLocale(locale?: string): Locale {
  return locale === 'ja' || locale === 'en' ? locale : 'zh'
}

export function withLocale(locale: string, path = '') {
  return `/${locale}${path}`
}

function loadLegacyScript(src: string) {
  return new Promise<void>((resolve, reject) => {
    if (document.querySelector(`script[data-legacy-src="${src}"]`)) {
      resolve()
      return
    }

    const script = document.createElement('script')
    script.src = src
    script.async = false
    script.dataset.legacySrc = src
    script.onload = () => resolve()
    script.onerror = reject
    document.body.appendChild(script)
  })
}

export function ensureLegacyScripts() {
  if (!legacyScriptsPromise) {
    legacyScriptsPromise = loadLegacyScript('/js/jquery.js')
      .then(() => loadLegacyScript('/js/vendors.min.js'))
      .then(() => loadLegacyScript('/js/main.js'))
      .catch(() => {})
  }

  return legacyScriptsPromise
}

export function usePreviewUrl(file: File | null, fallback: string) {
  const [preview, setPreview] = useState(fallback)

  useEffect(() => {
    if (!file) {
      setPreview(fallback)
      return undefined
    }

    const url = URL.createObjectURL(file)
    setPreview(url)
    return () => URL.revokeObjectURL(url)
  }, [file, fallback])

  return preview
}

export function usePageContext() {
  const params = useParams()
  const locale = normalizeLocale(params.locale)
  const { i18n } = useTranslation()
  const navigate = useNavigate()

  useEffect(() => {
    if (i18n.language !== locale) {
      i18n.changeLanguage(locale)
    }
    document.documentElement.lang = locale === 'ja' ? 'ja' : locale === 'en' ? 'en' : 'zh-CN'
  }, [i18n, locale])

  const copy = i18n.getResourceBundle(locale, 'translation')

  return {
    locale,
    copy,
    navigate,
    path: (path = '') => withLocale(locale, path),
  }
}

export function useLegacyThemePage({ bodyClassName = '', mobileNavStyle = 'classic' }: { bodyClassName?: string; mobileNavStyle?: string }) {
  useEffect(() => {
    const previousClassName = document.body.className
    const previousMobileNav = document.body.getAttribute('data-mobile-nav-style')
    document.body.className = bodyClassName
    document.body.setAttribute('data-mobile-nav-style', mobileNavStyle)
    ensureLegacyScripts()

    return () => {
      document.body.className = previousClassName
      if (previousMobileNav) {
        document.body.setAttribute('data-mobile-nav-style', previousMobileNav)
      } else {
        document.body.removeAttribute('data-mobile-nav-style')
      }
    }
  }, [bodyClassName, mobileNavStyle])
}