import { render, nextTick, h } from 'vue'
//@ts-ignore
import { FullScreen as IconFullScreen, Close as IconClose } from '@element-plus/icons-vue'
import { renderIcon } from '@/utils/webutils'

export default function useFullscreen(dialogEl: HTMLElement, dialogVnode: any, bindingValue: any) {
  //@ts-ignore
  const dialogHeaderEl: HTMLElement = dialogEl.querySelector('header.el-dialog__header')!

  let allowDraggable = false
  let widthBeforeFullscreen: number | undefined = undefined

  function onToggleFullScreen() {
    if (dialogEl.className.includes('is-draggable')) allowDraggable = true
    if (!dialogVnode.props.fullscreen) {
      // 准备切换全屏，记录当前宽度
      widthBeforeFullscreen = dialogHeaderEl.getBoundingClientRect().width
    }
    if (dialogVnode.props.fullscreen) {
      if (!widthBeforeFullscreen) return undefined
      // 准备缩小，恢复记录的宽度
      dialogEl.style.setProperty('--el-dialog-width', `${widthBeforeFullscreen}px`)
      dialogEl.style.width = `${widthBeforeFullscreen}px`
      widthBeforeFullscreen = undefined
    }
    dialogVnode.props.fullscreen = !dialogVnode.props.fullscreen
    if (!dialogVnode.props.fullscreen && allowDraggable) {
      // 从全屏变回窗口，要加上 is-draggable
      nextTick(() => {
        dialogEl.className = `${dialogEl.className} is-draggable`
      })
    }
  }

  function onCloseDialog() {
    if (bindingValue.closeIsHidden) {
      // 关闭只是隐藏，就抛出 close 事件
      dialogVnode.emit('close')

    } else {
      dialogVnode.props.modelValue = false
    }
  }

  dialogHeaderEl.ondblclick = onToggleFullScreen
  const dialogHeaderButtonEl: HTMLElement | null =
    dialogHeaderEl.querySelector('.el-dialog__headerbtn')
  if (dialogHeaderButtonEl) {
    dialogHeaderEl.removeChild(dialogHeaderButtonEl)
  }
  const customDialogHeaderButtonEl = document.createElement('div')
  customDialogHeaderButtonEl.className = 'el-dialog__headerbtn'
  customDialogHeaderButtonEl.style.display = 'flex'
  customDialogHeaderButtonEl.style.alignItems = 'center'
  customDialogHeaderButtonEl.style.width = 'auto'
  customDialogHeaderButtonEl.style.marginRight = '5px'

  const iconFullscreenContainer = document.createElement('div')
  iconFullscreenContainer.className = 'fullbtn-container'
  iconFullscreenContainer.onclick = onToggleFullScreen
  const iconFullscreenVnode = h(renderIcon('FullScreen'))
  // <IconFullScreen onClick={onToggleFullScreen}/>
  render(iconFullscreenVnode, iconFullscreenContainer)
  customDialogHeaderButtonEl.appendChild(iconFullscreenContainer)

  const iconCloseContainer = document.createElement('div')
  iconCloseContainer.className = 'closebtn-container'
  iconCloseContainer.onclick = onCloseDialog
  const iconCloseVnode = h(renderIcon('Close'))
  // <IconClose onClick={onCloseDialog}/>
  render(iconCloseVnode, iconCloseContainer)
  customDialogHeaderButtonEl.appendChild(iconCloseContainer)

  dialogHeaderEl.appendChild(customDialogHeaderButtonEl)

  // 加入覆盖样式
  const style = document.createElement('style')
  style.type = 'text/css'
  // --el-dialog-width: 100%!important;
  style.innerHTML = '.el-dialog.is-fullscreen {width:100%!important;height:100%!important;}'
  document.querySelector('head')!.appendChild(style)
}