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

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

export interface TimelineItemProps {
  /**
   * 自定义 icon
   */
  icon?: ReactNode
  label?: ReactNode
  /**
   * 小圆点颜色
   * @default 'blue'
   */
  color?: 'blue' | 'grey' | 'red' | 'green'
  className?: string
  style?: CSSProperties
}

export default function TimelineItem({
  icon,
  label,
  children,
  color = 'blue',
  className,
  style
}: PropsWithChildren<TimelineItemProps>) {
  const prefix = usePrefix('timeline-item')
  const { mode, placement, layout } = useTimeline()

  const itemClassName = classNames(prefix, className, concat(prefix, mode), concat(prefix, layout))

  return (
    <li className={itemClassName} style={style}>
      {mode === 'left' && <div className={concat(prefix, 'label')}>{label}</div>}
      <div className={concat(prefix, 'dot')}>
        <div className={concat(prefix, 'tail')} />
        <div className={concat(prefix, 'icon')}>
          {
            icon || <div className={classNames(concat(prefix, 'node'), concat(prefix, color))} />
          }
        </div>
      </div>
      <div className={concat(prefix, 'wrapper')}>
        {placement === 'top' && mode === 'right' && (
          <div className={classNames(concat(prefix, 'label'), concat(prefix, 'top'))}>{label}</div>
        )}
        <div className={concat(prefix, 'content')}>
          {children}
        </div>
        {placement === 'bottom' && mode === 'right' && (
          <div className={classNames(concat(prefix, 'label'), concat(prefix, 'bottom'))}>{label}</div>
        )}
      </div>
    </li>
  )
}