/* eslint-disable @typescript-eslint/no-deprecated */

import * as glassEasel from 'glass-easel'
import {
  startup,
  restart,
  type PanelRecvMessage,
  type PanelSendMessage,
} from 'glass-easel-devtools-panel'
import { ConnectionSource } from '../utils'

export type PanelSendMessageMeta =
  | PanelSendMessage
  | { kind: '_init' | '_reconnect'; tabId: number }
export type PanelRecvMessageMeta = PanelRecvMessage | { kind: '_connected' }

// build connection to main service
let background = chrome.runtime.connect({
  name: ConnectionSource.DevToolsPanel,
})
let reconnecting = false
const postToBackground = (msg: PanelSendMessageMeta) => {
  try {
    background.postMessage(msg)
  } catch {
    reconnect()
    background.postMessage(msg)
  }
}
const bindListener = () => {
  background.onMessage.addListener((message: PanelRecvMessageMeta) => {
    if (message.kind === '_connected') {
      if (reconnecting) {
        reconnecting = false
      } else {
        restart()
      }
    } else {
      listener?.(message)
    }
  })
}
const reconnect = () => {
  background = chrome.runtime.connect({
    name: ConnectionSource.DevToolsPanel,
  })
  bindListener()
  postToBackground({ kind: '_reconnect', tabId: chrome.devtools.inspectedWindow.tabId })
  reconnecting = true
}
bindListener()
postToBackground({ kind: '_init', tabId: chrome.devtools.inspectedWindow.tabId })
background.onDisconnect.addListener(reconnect)

// passing massage through channel
let listener: ((data: PanelRecvMessage) => void) | null = null
setTimeout(() => {
  const hostContext = new glassEasel.CurrentWindowBackendContext()
  const hostElement = document.body as unknown as glassEasel.GeneralBackendElement
  const channel = {
    send(data: PanelSendMessage) {
      postToBackground(data)
    },
    recv(f: (data: PanelRecvMessage) => void) {
      listener = f
    },
  }
  startup(hostContext, hostElement, channel)
}, 0)

// eslint-disable-next-line no-console
console.log('glass-easel DevTools extension DevTools panel created')