import React, {useEffect, useMemo} from 'react'
import '@douyinfe/semi-ui/react19-adapter'
import {LocaleProvider, Notification, Toast} from '@douyinfe/semi-ui'
import {HashRouter} from 'react-router-dom'
import {IntlProvider} from 'react-intl'
import {localeConfig} from '@/locales'
import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN'
import enUS from '@douyinfe/semi-ui/lib/es/locale/source/en_US'
import {Locale} from '@douyinfe/semi-ui/lib/es/locale/interface'
import useGlobalStore from '@/stores'
import useLocalStore from '@/stores/local'
import RenderRouter from '@/router'
import StopGuideModal from '@/components/stop-guide-modal'
import {NoticeReactProps} from '@douyinfe/semi-ui/lib/es/notification'
import {ToastReactProps} from '@douyinfe/semi-ui/lib/es/toast'
import sse from '@/sse'
import {getSystemStatus} from '@/api/system'
import {useWorkOrderApi} from '@/api/work-order'

const App = () => {
  const { isDark, locale } = useLocalStore(state => state)
  const { setConnected, showStopGuide } = useGlobalStore(state => state)
  const woApi = useWorkOrderApi()

  const checkStopPending = async () => {
    try {
      const status = await getSystemStatus()
      if (status.stopPending) {
        const res = await woApi.queryWorkOrders({ page: 1, limit: 100, statuses: ['CANCELLING'] })
        if (res.data && res.data.length > 0) {
          showStopGuide({ orderId: res.data[0].id, phase: 'cancelling' })
        }
      }
    } catch {
      // ignore
    }
  }

  const onNotify = (e: MessageEvent) => {
    const opts = {
      ...JSON.parse(e.data)
    } as NoticeReactProps
    if (opts.duration === -1) {
      opts.duration = 0
    }
    Notification.addNotice(opts)
  }
  const onToast = (e: MessageEvent) => {
    const opts = {
      ...JSON.parse(e.data)
    } as ToastReactProps
    Toast.create(opts)
  }

  useEffect(() => {
    if (sse.readyState === EventSource.OPEN) {
      setConnected(true)
    }
    sse.onopen = () => {
      console.log('sse connected')
      setConnected(true)
      checkStopPending()
    }
    sse.onmessage = e => {
      console.log('message: ', e)
    }
    sse.onerror = e => {
      console.log('sse error', e)
      setConnected(false)
      // sse.close()
    }
    sse.addEventListener('notify', onNotify)
    sse.addEventListener('toast', onToast)
    return () => {
      console.log('sse close')
      sse.onopen = null
      sse.onmessage = null
      sse.onerror = null
      sse.removeEventListener('notify', onNotify)
      sse.removeEventListener('toast', onToast)
    }
  }, [])

  const getLocale = useMemo(() => {
    switch (locale) {
      case 'en-US':
        return enUS
      case 'zh-CN':
        return zhCN
      default:
        return {} as Locale
    }
  }, [locale])

  useEffect(() => {
    if (isDark) {
      document.body.setAttribute('theme-mode', 'dark')
    } else {
      document.body.removeAttribute('theme-mode')
    }
  }, [])

  return (
    <LocaleProvider locale={getLocale}>
      <IntlProvider locale={locale} messages={localeConfig[locale]}>
        <HashRouter>
          <RenderRouter />
        </HashRouter>
      </IntlProvider>
      <StopGuideModal />
    </LocaleProvider>
  )
}
export default App