import type { Ref } from 'vue'

import { watch } from 'vue'
import { useResizeObserver } from 'vue-hooks-plus'

/**
 * 长文本模式hook
 * @param el 文本元素
 * @param boxEl 容器元素
 * @param props 组件属性
 */
export const useLongMode = (
  el: Ref<HTMLElement | undefined>,
  boxEl: Ref<HTMLElement | undefined>,
  props: {
    longMode?: 'circular' | 'clip' | 'dot' | 'scroll' | 'wrap'
    width: number
    height: number
    text?: string
    [key: string]: any
  },
  options?: {
    preserveLineBreaks?: boolean
  }
) => {
  const handleLongMode = () => {
    const { longMode } = props
    if (el.value && longMode && boxEl.value) {
      el.value.removeAttribute('style')
      switch (longMode) {
        case 'circular': {
          if (el.value.clientWidth > boxEl.value.clientWidth) {
            // 左右循环滚动
            el.value.style.animation = `h-scroll linear ${el.value.clientWidth / 25}s infinite`
          } else if (el.value.clientHeight > boxEl.value.clientHeight) {
            // 上下来回滚动
          }
          break
        }
        case 'clip': {
          el.value.style.overflow = 'hidden'
          break
        }
        case 'dot': {
          // 最多显示3行
          // el.value.style.whiteSpace = 'nowrap'
          el.value.style.textOverflow = 'ellipsis'
          el.value.style.overflow = 'hidden'
          el.value.style.display = '-webkit-box'
          el.value.style.webkitBoxOrient = 'vertical'
          el.value.style.webkitLineClamp = '3'
          el.value.style.wordBreak = 'break-word'
          break
        }
        case 'scroll': {
          if (el.value.clientWidth > boxEl.value.clientWidth) {
            // 左右循环滚动
            el.value.style.animation = `h-scroll linear ${el.value.clientWidth / 25}s alternate infinite`
          } else if (el.value.clientHeight > boxEl.value.clientHeight) {
            // 上下来回滚动
          }
          break
        }
        default: {
          el.value.style.whiteSpace = options?.preserveLineBreaks ? 'pre-wrap' : 'normal'
          el.value.style.textOverflow = 'clip'
          el.value.style.wordBreak = 'break-all'
          break
        }
      }
    }
  }
  // 处理long_mode
  watch(
    () => props,
    () => {
      handleLongMode()
    },
    {
      immediate: true,
      deep: true
    }
  )

  useResizeObserver(el, handleLongMode)
}
