// TODO: 功能不完善待补充，具体参考 `portal-base` 的 `common/loading/Loading`
// TODO: 考虑外层在 loading 时里层 loading 的展示形式

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

import { usePrefix } from '../ConfigProvider'
import { concat } from '../utils'

export type LoadingProps = {
  /**
   * 是否显示 loading 动画
   * @default true
   */
  loading?: boolean
  /** 被 loading 动画包裹的内容 */
  children?: ReactNode
  /**
   * 被包裹的内容是否可见
   * @default "visible"
   */
  childrenVisibility?: 'visible' | 'hidden'
  /** loading 动画容器的类名 */
  className?: string
  /** loading 动画容器的样式 */
  style?: CSSProperties
}

export function Loading({
  loading = true,
  children,
  childrenVisibility = 'visible',
  className: classNameFromProps,
  style
}: LoadingProps) {
  const prefix = usePrefix('loading')
  const animationPrefix = concat(prefix, 'animation')

  const animationView = (
    <div className={animationPrefix}>
      <div className={concat(animationPrefix, 'dots')}>
        <div className={concat(animationPrefix, 'dot')} />
        <div className={concat(animationPrefix, 'dot')} />
        <div className={concat(animationPrefix, 'dot')} />
      </div>
    </div>
  )

  const className = classnames(
    prefix,
    concat(prefix, 'mode', childrenVisibility),
    loading && concat(prefix, 'loading'),
    classNameFromProps
  )
  const contentClassName = concat(prefix, 'content')

  // TODO: 考虑用 `ref` 而不是强行包裹一个容器的方案
  return (
    <div className={className} style={style}>
      <div className={contentClassName}>{children}</div>
      {animationView}
    </div>
  )
}