/**
 * 单个组件全屏
 * @param domName 
 * @param htmlName 
 */

export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
  const isFullScreen = document.fullscreenElement

  const currentDatkTheme = htmlName.getAttribute('data-theme')

  //特殊处理单设备多属性组件全屏显示
  const setDomName = (domName: any,top0: string, top1: string) => {
    domName.children[0].style.top = top0
    domName.style.paddingBottom = '80px'
    domName.children[1].style.top = top1
  }

  const setDomNameAndStyle = () => {
    domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
    domName.children[0].style.position = 'relative'
    setDomName(domName, '30px','40px')
  }

  if (isFullScreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      domName.style.background = currentDatkTheme === 'light' ? '' : ''
    }
  } else {
    //兼容其他浏览器
    if (domName.requestFullscreen) {
      domName.requestFullscreen()
      setDomNameAndStyle()
    } else if (domName.mozRequestFullScreen) {
      domName.mozRequestFullScreen()
      setDomNameAndStyle()
    } else if (domName.webkitRequestFullscreen) {
      domName.webkitRequestFullscreen()
      setDomNameAndStyle()
    } else if (domName.msRequestFullscreen) {
      domName.msRequestFullscreen()
      setDomNameAndStyle()
    }
  }

  //fix 浏览器监听esc退出
  function exitHandler() {
    if (
      !(document as any).webkitIsFullScreen &&
      !(document as any).mozFullScreen &&
      !(document as any).msFullscreenElement
    ) {
      domName.style.background = currentDatkTheme === 'light' ? '' : ''
    }
  }

  // 监听fullscreenchange事件（全屏模式的变化）
  if (document.addEventListener) {
    document.addEventListener('webkitfullscreenchange', exitHandler, false)
    document.addEventListener('mozfullscreenchange', exitHandler, false)
    document.addEventListener('fullscreenchange', exitHandler, false)
    document.addEventListener('MSFullscreenChange', exitHandler, false)
  }
}