import Taro from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsStepStatusProps } from 'types/step-status'

let done = `${Taro['common'].imgUrlSgd}done.png`

/**
 * 步骤条状态组件（仅支持4种状态）
 */
export default class CtsStepStatus extends CtsComponent<CtsStepStatusProps> {
  // static options = {
  //   addGlobalClass: true
  // }

  public static defaultProps: CtsStepStatusProps
  public static propTypes: InferProps<CtsStepStatusProps>

  public constructor(props: CtsStepStatusProps) {
    super(props)
    this.state = {}
  }

  public render(): JSX.Element {
    const { className, current, items, onChange } = this.props

    return (
      <View className={classNames('cts-step-status', className, 'cts-step-status-' + items.length)}>
        {items.map((item, index) => {
          return (
            <View
              className={classNames(
                "step-item",
                { success: index < current },
                { process: index === current },
                { wait: index > current }
              )}
              key={String(index)}
            >
              <View className={classNames("item-status")}>
                {index < current && (
                  <Image className="done-img" src={done} mode="widthFix" />
                )}
                {index === current && null}
                {index > current && (
                  <Text className="item-status-text">{index + 1}</Text>
                )}
              </View>
              <View className="item-text">
                <Text>{item.text || ""}</Text>
              </View>
            </View>
          );
        })}
      </View>
    )
  }
}

CtsStepStatus.defaultProps = {
  current: 0,
  items: [],
  onChange() { }
}

CtsStepStatus.propTypes = {
  current: PropTypes.number,
  items: PropTypes.array,
  onChange: PropTypes.func
}