/* eslint-disable @typescript-eslint/no-explicit-any */
// Extend global Window type to avoid TypeScript errors
// Import React and ReactDOM
import React from 'react'
import { createRoot } from 'react-dom/client'
import { RecoilRoot } from 'recoil'
import { DebugObserver } from '@hooks/useRecoilLogger'

import App from './App'
import appConfig from '../app-config.json'

import '@assets/fonts/FZ Poppins-Regular.ttf'
import '@assets/fonts/FZ Poppins-Medium.ttf'
import '@assets/fonts/FZ Poppins-SemiBold.ttf'

import '../i18n-config'

import '@ionic/react/css/core.css' /* Core CSS Ionic components */
/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css'
import '@ionic/react/css/structure.css'
import '@ionic/react/css/typography.css'
/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css'
import '@ionic/react/css/text-alignment.css'
import '@ionic/react/css/text-transformation.css'
import '@ionic/react/css/flex-utils.css'
import '@ionic/react/css/display.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min'
import 'react-toastify/dist/ReactToastify.min.css'
import 'remixicon/fonts/remixicon.css'
import 'zmp-ui/zaui.css'
import '@css/app.scss' //Theme custom CSS

declare const window

if (!window.APP_CONFIG) {
  window.APP_CONFIG = appConfig
}

// Block F12 in production
if (import.meta.env.MODE === 'production') {
  window.addEventListener('keydown', function (e) {
    if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
      e.preventDefault()
    }
  })

  document.addEventListener('contextmenu', function (e) {
    e.preventDefault()
  })
}

// Define custom elements for image lightbox components
window.global = window

declare global {
  interface Window {
    ztrq?: any
    _ztrk?: any
    APP_CONFIG?: any
    global?: any
  }
}

// Initialize ztrq tracking script
;((win, doc, sdk) => {
  if (win.ztrq) {
    return
  }
  const ztrq: any = (win.ztrq = function () {
    if (Array.isArray(ztrq.queue)) {
      ztrq.queue.push(arguments)
    } else {
      ztrq.call(ztrq, arguments)
    }
  })

  if (!win._ztrk) {
    win._ztrk = ztrq
  }

  ztrq.queue = []

  const ztrkjs = doc.createElement('script')
  ztrkjs.async = true
  ztrkjs.src = sdk
  doc.head.appendChild(ztrkjs)
})(
  window,
  document,
  'https://s.zzcdn.me/ztr/zma/ztracker.js?id=7298171665853255680'
)

// Mount React App
const root = createRoot(document.getElementById('app')!)
root.render(
  <RecoilRoot>
    {process.env.NODE_ENV !== 'production' && (
      <DebugObserver type='object' /> // print type:  (Default) "object" | "string"
    )}
    <App />
  </RecoilRoot>
)