import React, { CSSProperties, PropsWithChildren, isValidElement } from 'react'
import classnames from 'classnames'

import { usePrefix } from '../ConfigProvider'
import TimelineItem from './TimelineItem'
import { timelineContext } from './hook'
import { concat, isDev } from '../utils'

export interface TimelineProps {
  /**
   * 时间轴方向，horizontal 布局 mode、placement 属性无效
   * @default 'vertical'
   */
  layout?: 'vertical' | 'horizontal'
  /**
   * 时间轴和内容的相对位置
   * @default 'right'
   */
  mode?: 'left' | 'right'
  /**
   * label 的位置，mode 为 left 该属性无效
   * @default 'bottom'
   */
  placement?: 'bottom' | 'top'
  className?: string
  style?: CSSProperties
}

export default function Timeline({
  children,
  layout = 'vertical',
  mode = 'right',
  placement = 'bottom',
  className,
  style
}: PropsWithChildren<TimelineProps>) {
  const prefix = usePrefix('timeline')

  const timeLineItems = React.Children.toArray(children)
  const items = React.Children.map(timeLineItems, ele => {
    if (!isValidElement(ele)) {
      return null
    }

    if (ele.type !== TimelineItem) {
      if (isDev) {
        console.warn('`Timeline` only accepts children of type `TimelineItem`.')
      } else {
        return null
      }
    }
    return ele
  })

  return (
    <timelineContext.Provider value={{
      mode: layout === 'horizontal' ? 'right' : mode,
      placement: layout === 'horizontal' ? 'top' : placement,
      layout
    }}
    >
      <ul className={classnames(prefix, className, concat(prefix, layout))} style={style}>
        {items}
      </ul>
    </timelineContext.Provider>
  )
}