import React, { CSSProperties, ReactNode, useEffect, useState } from 'react'
import classnames from 'classnames'

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

export type TabPaneProps<T extends TabValue> = {
  /**
   * 显示名称
   */
  name: ReactNode
  value: T
  /**
   * 是否自动销毁而不是隐藏
   */
  autoDestroy?: boolean
  className?: string
  children: ReactNode
  style?: CSSProperties
}

export default function TabPane<T extends TabValue>(props: TabPaneProps<T>) {
  const { autoDestroy = false, className, value, children, style } = props
  const { prefix, value: activeValue } = useTabs()
  const [shown, setShown] = useState(activeValue === value)
  const tabPanePrefix = concat(prefix, 'pane')
  const classname = classnames(className, tabPanePrefix)

  useEffect(() => {
    if (activeValue === value && shown === false) {
      setShown(true)
    }
  }, [activeValue, shown, value])

  if (autoDestroy) {
    if (activeValue === value) {
      return <div className={classname} style={style}>{children}</div>
    }

    return null
  }

  return <div className={classname} style={{ ...style, display: activeValue === value ? 'block' : 'none' }}>{shown ? children : null}</div>
}