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

import { usePrefix } from '../ConfigProvider'
import { concat } from '../utils'
import { CheckIcon, CloseIcon } from '../icons'
import { stepsContext, StepStatus } from '.'
import { WithRef } from '../utils/type'

export type StepProps = {
  /**
   * 步骤项标题
   */
  title?: ReactNode
  /**
   * 步骤项描述
   */
  description?: ReactNode
  /**
   * 步骤项图标
   */
  icon?: ReactNode
  /**
   * 步骤项序号，从 0 开始计数
   */
  number?: number
  className?: string
  style?: CSSProperties
  /**
   * 根元素的 html 属性
   */
  rootHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
}

function IconRenderer(props: {status: StepStatus, number: number }) {
  const { status, number } = props

  if (status === 'finish') {
    return <CheckIcon />
  }
  if (status === 'error') {
    return <CloseIcon />
  }

  return <>{number}</>
}

function calcStepStatus(status: StepStatus, current: number, number: number): StepStatus {
  if (number === current) {
    return status
  }
  if (number < current) {
    return 'finish'
  }

  return 'wait'
}

export default function Item(props: StepProps) {
  const {
    className,
    style,
    title,
    description,
    icon,
    number = 0,
    rootHtmlProps
  } = props
  const prefix = usePrefix('steps-item')
  const { status, current, onChange } = useContext(stepsContext)

  const stepStatus = calcStepStatus(status, current, number)
  const stepIcon = icon || <IconRenderer status={stepStatus} number={number + 1} />

  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    rootHtmlProps?.onClick?.(e)
    if (e.defaultPrevented) return
    if (onChange) onChange(number)
  }

  return (
    <div
      {...rootHtmlProps}
      className={classNames(prefix, className, concat(prefix, stepStatus), rootHtmlProps?.className)}
      style={{ ...style, ...rootHtmlProps?.style }}
      onClick={(rootHtmlProps?.onClick || onChange) && handleClick}
    >
      <div className={concat(prefix, 'container')}>
        <div className={concat(prefix, 'tail')} />
        <div className={concat(prefix, 'icon')}>
          <div className={concat(prefix, 'icon-inner')}>{stepIcon}</div>
        </div>
        <div className={concat(prefix, 'content')}>
          <div className={concat(prefix, 'title')}>{title}</div>
          <div className={concat(prefix, 'description')}>{description}</div>
        </div>
      </div>
    </div>
  )
}