import React, { Component } from 'react'

import CSSModules from 'react-css-modules'

import Select from 'fe-select'

import styles from './index.styl'

@CSSModules(styles)

export default class extends Component {

renderValue (value) {

return typeof value === 'object' ? JSON.stringify(value) : value

}

handleChange (e) {

if (e === '') {

return false

}

let map = this.props['data-map'].split('-')

this.props.onChange(map, e)

}

handleClickAction (v, a, e) {

e.preventDefault()

this.props.action[a](v)

}

render () {

let props = this.props

let data = props.data

let value = data.value

switch (data.type) {

case 'input':

return <input

data-map={props['data-map']}

type='text'

{...data.props}

disabled={this.props.loading}

value={value}

onChange={this.handleChange.bind(this)} />

case 'select':

return <Select

{...data}

style={Object.assign({}, {width: '100%'}, data.style)}

inputWidth={data.inputWidth || '100%'}

onChange={this.handleChange.bind(this)} />

case 'links':

return <span>

{data.value.map((v, i) => <span key={i}><a {...v.props} target={v.target || '_blank'} href={v.url}>{v.value}</a>{i < data.value.length - 1 ? <span>&nbsp;&nbsp;</span> : null}</span>)}

</span>

case 'action':

return <span>

{data.value.map((v, i) => <span key={i}><a {...v.props} onClick={this.handleClickAction.bind(this, v, v.action)} href='#'>{v.value}</a>{i < data.value.length - 1 ? <span>&nbsp;&nbsp;</span> : null}</span>)}

</span>

default:

return <span data-map={props['data-map']}>{this.renderValue(value)}</span>

}

}

}