import { View } from '@tarojs/components'
import React from 'react'
import classNames from 'classnames'
import './index.scss'
import type { StepProps } from './components/step'

/**
 * 用法
 * <Steps direction="vertical">
 *  <Step
 *    status="finish"
 *    title="已下单"
 *    description="2021-08-09 15:00:00"
 *  />
 *  <Step
 *    status="finish"
 *    title="已下单"
 *    description="2021-08-09 15:00:00"
 *  />
 *  <Step
 *    title="已下单"
 *    status="error"
 *    description="2021-08-09 15:00:00"
 *  />
 *  <Step
 *    title="已下单"
 *    description="2021-08-09 15:00:00"
 *  />
 *</Steps>
 */

interface StepsProps {
  current?: number
  direction?: 'horizontal' | 'vertical'
  children: React.ReactNode
  customClassName?: string
  customStyle?: React.CSSProperties
}
// 步骤条
const Steps = (props: StepsProps) => {
  const {
    current = 0,
    direction = 'horizontal',
    children,
    customClassName,
    customStyle,
  } = props

  return <View className={classNames('steps', `steps-${direction}`, customClassName)} style={customStyle}>
    {
      React.Children.map(children, (child, index) => {
        console.log('child', child)
        if (!React.isValidElement(child)) {
          return child
        }
        const props = child.props as StepProps

        // eslint-disable-next-line react/prop-types
        let status = props.status || 'wait'

        if (index < current) {
          // eslint-disable-next-line react/prop-types
          status = props.status || 'finish'
        }
        else if (index === current) {
          // eslint-disable-next-line react/prop-types
          status = props.status || 'process'
        }
        console.log('status==>', status)
        return React.cloneElement(child, {
          // @ts-expect-error 无法推断
          status,
        })
      })
    }
  </View>
}
export default Steps
