import React, { useEffect, useState } from 'react'
import { addListener, removeListener } from 'resize-detector'

import { concat } from '../utils'
import { useTabs } from './hook'

const underscoreWidth = 24

// 横向 tab 的左右内边距
const domHorizontalPadding = {
  large: 24,    // @icecream-gap-lg
  default: 16,  // @icecream-gap-md
  small: 12     // @icecream-gap-sm
}

type Props = {
  prefix: string
  tabNavDom: HTMLLIElement | null
}

export default function TabNavUnderscore({ prefix, tabNavDom }: Props) {
  const [offset, setOffset] = useState(0)
  const [domWidth, setDomWidth] = useState(0)
  const { tabs, type, size, indicatorStyle } = useTabs()

  useEffect(() => {
    if (tabNavDom) {
      const handleDomChange = () => {
        if (type === 'vertical') {
          const offsetY = tabNavDom!.offsetTop + (tabNavDom!.offsetHeight - underscoreWidth) / 2
          setOffset(offsetY)
        } else if (type === 'button') {
          setDomWidth(tabNavDom!.clientWidth + 2)
          setOffset(tabNavDom!.offsetLeft)
        } else {
          setDomWidth(tabNavDom!.clientWidth + 2)
          if (indicatorStyle === 'fixed') {
            const offsetX = tabNavDom!.offsetLeft + (tabNavDom!.offsetWidth - underscoreWidth) / 2
            setOffset(offsetX)
          } else {
            setOffset(tabNavDom!.offsetLeft + domHorizontalPadding[size])
          }
        }
      }

      handleDomChange()
      addListener(tabNavDom, handleDomChange)

      return () => removeListener(tabNavDom, handleDomChange)
    }
  }, [tabNavDom, type, size, indicatorStyle, tabs]) // 为了保证 TabPane 动态变化时 underscore 能够跟随变化，所以 tabs 依赖需要保留

  if (type === 'vertical') {
    return <li className={concat(prefix, 'underscore')} style={{ height: underscoreWidth, top: offset }} />
  }
  if (type === 'button') {
    return <li className={concat(prefix, 'underscore')} style={{ width: domWidth, left: offset }} />
  }
  return (
    <li
      className={concat(prefix, 'underscore')}
      style={{
        width: indicatorStyle === 'fixed' ? underscoreWidth : domWidth - domHorizontalPadding[size] * 2,
        left: offset
      }}
    />
  )
}