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

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

/**
 * 步骤条组件
 */
export default class CtsStep extends CtsComponent<CtsStepProps> {
  // static options = {
  //   addGlobalClass: true
  // }

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

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

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

    let itemsList = items.filter(item => {
      return !item.hide
    })

    return (
      <View className={classNames('cts-step', className)}>
        {
          itemsList.map((item, index) => {
            return (
              <View className='cts-step-item' key={String(index)} onClick={() => { onChange && onChange(index) }}>
                <View className='cts-step-icon'>
                  {
                    <View className={'cts-step-border cts-step-prev ' + (index !== 0 && 'has_border')}></View>
                  }
                  <Image src={item.icon[current === index ? 'activeUrl' : 'inactiveUrl']} mode='widthFix' />
                  {
                    <View className={'cts-step-border cts-step-next ' + (index !== itemsList.length - 1 && 'has_border')}></View>
                  }
                </View>
                <View className={'cts-step-title ' + (current === index && 'active')}>{item.title}</View>
              </View>
            )
          })
        }
      </View>
    )
  }
}

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

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