import React, { PropTypes } from 'react/addons'
import { isEmpty, contains, without } from 'lodash'
import classNames from 'classnames'
import { toDate } from 'shared/utils/date-utils'
import {
  Pagination
} from 'client/admin/components/widget'
const { CSSTransitionGroup } = React.addons

if (process.env.BROWSER) {
}

export default class MembersTableWidget extends React.Component {

  static propTypes = {
    collect: PropTypes.object.isRequired,
    action: PropTypes.func.isRequired,
    selected: PropTypes.number
  }

  static defaultProps = {
    selected: 0
  }

  constructor (props) {
    super(props)

    this.state = { checked: [], page: 1 }
  }

  handleChange (id, e) {
    let checked = this.state.checked
    if (e.target.checked) {
      if (!contains(checked, id)) {
        checked.push(id)
        this.setState({ checked: checked })
      }
    } else {
      if (contains(checked, id)) {
        checked = without(checked, id)
      }
      this.setState({ checked: checked })
    }
  }

  handleClick () {
    const checked = this.state.checked

    this.props.action(checked, this.state.page).then(() => {
      this.setState({ checked: [] })
    })
  }

  isChecked (id) {
    return contains(this.state.checked, id)
  }

  renderActionBtn () {
    const ActionBtnClasses = classNames(
      'ui',
      {'red': !this.props.selected },
      {'green': this.props.selected },
      'button',
      {'loading': !this.props.collect.done },
      {'disabled': isEmpty(this.state.checked) }
    )
    const btnLabel = (!this.props.selected) ? '凍結' : '啟用'
    return (
      <div
        onClick={::this.handleClick}
        className={ActionBtnClasses}>
        { btnLabel }
      </div>
    )
  }

  render () {
    const { items, isFetching } = this.props.collect
    const handleChange = ::this.handleChange
    const isChecked = ::this.isChecked

    const TableClasses = classNames(
      'ui',
      'definition',
      'compact',
      'stackable',
      'striped',
      'table'
    )

    const Message = isFetching
      ? (
        <div className="ui warning message">
          <div className="header">
            資料更新中請稍候...
          </div>
        </div> )
      : null

    return (
      <div>
        <CSSTransitionGroup transitionName="MessageTransition">
          {Message}
        </CSSTransitionGroup>
        <table className={TableClasses}>
          <thead className="full-width">
            <tr>
              <th></th>
              <th className="table email">電子郵件信箱</th>
              <th className="table ocname">所屬組織</th>
              <th className="table name">名稱</th>
              <th className="table date">加入日期</th>
            </tr>
          </thead>
          <tbody>
          {!isEmpty(items) && items.map(function(item, i) {
            const checked = isChecked(item.id)
            return (
            <tr>
              <td className="collapsing">
                <div className="ui checkbox">
                  <input
                    type="checkbox"
                    defaultChecked="false"
                    checked={checked}
                    onChange={handleChange.bind(this, item.id)} />
                  <label></label>
                </div>
              </td>
              <td className="table email">
                { (checked)
                  && (<a className="delete" target="_blank" href={`../w/p/${item.id}`}>
                    { item.email }
                  </a>)
                }
                { (!checked)
                  && (<a target="_blank" href={`/ring/members/${item.id}`}>
                    { item.email }
                  </a>)
                }
              </td>
              <td className="table ocname">
                { (!!item['userInfo.url']) &&
                  <a target="_blank" href={`../w/p/${item['userInfo.url']}`}>
                    { item['usersInfo.ocname'] }
                  </a>
                }
                { !(!!item['userInfo.url']) &&
                  item['usersInfo.ocname']
                }
              </td>
              <td className="table name">{ item.name }</td>
              <td className="table date">{ toDate(item.created_at, true) }</td>
            </tr>
            )
          })}
          </tbody>
          <tfoot className="full-width">
            <tr>
              <th colSpan="5">
                {::this.renderActionBtn()}
                <Pagination {...this.props} />
              </th>
            </tr>
          </tfoot>
        </table>
      </div>
    )
  }
}



@@ -2085,15 +2085,12 @@
 %22ui 
-warning
+icon
  mes
@@ -2092,24 +2092,120 @@
 n message%22%3E%0A
+          %3Ci className=%22notched circle loading icon%22%3E%3C/i%3E%0A          %3Cdiv className=%22content%22%3E%0A  
           %3Cd
@@ -2243,20 +2243,15 @@
     
-%E8%B3%87%E6%96%99%E6%9B%B4%E6%96%B0%E4%B8%AD%E8%AB%8B%E7%A8%8D%E5%80%99...%0A
+  %E8%AB%8B%E7%A8%8D%E5%80%99%0A 
     
@@ -2248,32 +2248,33 @@
  %E8%AB%8B%E7%A8%8D%E5%80%99%0A           
+ 
 %3C/div%3E%0A        %3C
@@ -2276,51 +2276,55 @@
     
-%3C/div%3E )%0A      : null%0A%0A    return (%0A
+    %3Cp%3E%E8%B3%87%E6%96%99%E8%BC%89%E5%85%A5%E4%B8%AD...%3C/p%3E%0A          %3C/div%3E%0A  
       %3C
+/
 div%3E
@@ -2336,112 +2336,47 @@
     
-%3CCSSTransitionGroup transitionName=%22MessageTransition%22%3E%0A          %7BMessage%7D%0A        %3C/CSSTransitionGroup
+)%0A      : null%0A%0A    return (%0A      %3Cdiv
 %3E%0A  
@@ -4559,16 +4559,130 @@
 /table%3E%0A
+        %3CCSSTransitionGroup transitionName=%22MessageTransition%22%3E%0A          %7BMessage%7D%0A        %3C/CSSTransitionGroup%3E%0A
       %3C/

add loader