import React, { Component, PropTypes } from 'react'
import Tcell from './Tcell.js'
import Spinner from './spinner.js'

import CSSModules from 'react-css-modules'
import styles from './index.styl'
import 'fe-reset'

@CSSModules(styles, { allowMultiple: true, errorWhenNotFound: false })

export class Etable extends Component {

  changeCell (map, value, e) {
    let name = this.props.map
    let m = map
    m.unshift(name)
    this.props.onChange(m, value, e)
  }

  handleClick (e) {
    if (this.props.onClick) {
      if (e.target.dataset.map) {
        let arg = e.target.dataset.map.split('-')
        arg.unshift(this.props.map)
        this.props.onClick(e, ...arg)
      } else {
        this.props.onClick(e)
      }
    }
  }

  renderTitle (title) {
    return title ? <caption data-map={'caption'}>{title}</caption> : null
  }

  renderHead (head) {
    return (
      head.map(
        (h, i) =>
          <th
            style={Object.assign({}, {width: h.width, minWidth: h.width}, h.style)}
            data-map={'head-' + i}
            key={i}>
            <Tcell
              data-map={'head-' + i}
              onChange={this.changeCell.bind(this)}
              editing={this.props.data.editing}
              data={h}
              action={this.props.action}
              loading={this.props.data.loading} />
          </th>
      )
    )
  }

  renderBody () {
    let data = this.props.data

    if (data.error) {
      return <tr><td colSpan={data.head.length} styleName='noDataMsg'>{this.props.data.errorMsg}</td></tr>
    }
    if (data.body.length === 0) {
      return <tr><td colSpan={data.head.length} styleName='noDataMsg'>该条件下暂无数据</td></tr>
    }

    return data.body.map((row, i) => row.isShow !== false ? <tr style={Object.assign({}, row.style, (data.activeRow ? data.activeRow : '').indexOf(i) > -1 ? data.activeStyle : null)} key={i}>{this.renderRow(row.data, i)}</tr> : null)
  }

  renderRow (row, i) {
    if (this.props.data.error) {
      return <td colSpan={this.props.data.length} styleName='noDataMsg'>{this.props.data.errorMsg}</td>
    }
    if (row.length === 0) {
      return <td colSpan={this.props.data.length} styleName='noDataMsg'>该条件下暂无数据</td>
    }
    return (
      row.map(
        (r, j) =>
          <td
            key={j}
            data-map={'body-' + i + '-' + j}
            colSpan={r.colSpan}
            rowSpan={r.rowSpan} >
            <Tcell
              data-map={'body-' + i + '-' + j}
              onChange={this.changeCell.bind(this)}
              editing={this.props.data.editing}
              action={this.props.action}
              data={r} />
          </td>
      )
    )
  }

  render () {
    let data = this.props.data
    return (
      <div styleName='warp'>
        {data.loading ? <div styleName='tableLoading'><Spinner /></div> : null}
        <table onClickCapture={this.handleClick.bind(this)} onDoubleClickCapture={this.handleClick.bind(this)}>
          {this.renderTitle(data.title)}
          <thead>
            <tr>
            {this.renderHead(data.head)}
            </tr>
          </thead>
          <tbody>
            {this.renderBody()}
          </tbody>
        </table>
      </div>
    )
  }
}

Etable.propTypes = {
  onClick: PropTypes.func,
  onChange: PropTypes.func,
  action: PropTypes.object,
  data: PropTypes.shape({
    loading: PropTypes.bool,
    editing: PropTypes.bool,
    error: PropTypes.bool,
    errorMsg: PropTypes.string,
    head: PropTypes.arrayOf(PropTypes.object),
    body: PropTypes.arrayOf(
      PropTypes.shape({
        isShow: PropTypes.bool,
        data: PropTypes.arrayOf(PropTypes.object)
      }))
  })
}
export default Etable