import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Label } from '@tarojs/components'
import './index.scss'
import SdFormid from '../sdFormid';
interface DataInterface {
  key: any
  value: string
}
type PageOwnProps = {
  className?: string
  data: DataInterface[]
  active: any
  onClick?: any
  size?: 'large' | 'normal'
}

type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  handleNav = e => {
    this.props.onClick(e)
  }

  render() {
    const { data = [], active, size } = this.props
    const className = 'sd-navbar ' + (this.props.className || '') + (size ? ` sd-navbar-${size}` : '')
    return (
      <View className={className}>
        {
          data.map(e => {
            return <View key={e.key} className='sd-navbar-item'>
              <SdFormid onClick={this.handleNav.bind(this, e.key)}>
                <Label
                  className={'sd-navbar-value ' + (active === e.key ? 'sd-navbar-active' : '')}
                >{e.value}</Label>
              </SdFormid>
            </View>
          })
        }
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>