import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { Link } from 'react-router'
import { isEmpty } from 'lodash'
import {
  Menu
} from 'client/admin/components/widget'
import moment from 'moment'

export default class Statistics extends Component {

  static propTypes = {
    collect: PropTypes.object.isRequired,
    fetchData: PropTypes.func.isRequired
  }

  constructor (props) {
    super(props)
  }

  componentDidMount () {
    Plotly.newPlot('plot', [{
      x: this.props.collect.data.map((d,_)=>d.day),
      y: this.props.collect.data.map((d,_)=>d.count),
      type: 'bar',
      marker: {
        color: 'orange'
      }
    }], {
      height: 250,
      margin: {
        t: 0, r: 30, l: 30
      },
      xaxis: {
        gridcolor: 'transparent'
      }
    }, {
      displayModeBar: false
    });
  }

  componentDidUpdate() {
    Plotly.newPlot('plot', [{
      x: this.props.collect.data.map((d,_)=>moment(d.day).format()),
      y: this.props.collect.data.map((d,_)=>d.count),
      type: 'bar',
      marker: {
        color: 'orange'
      }
    }], {
      height: 250,
      margin: {
        t: 0, r: 30, l: 30
      },
      xaxis: {
        gridcolor: 'transparent'
      }
    }, {
      displayModeBar: false
    });
  }

  handleSubmit = (event) => {
    event.preventDefault()
    const year = +ReactDOM.findDOMNode(this.refs.year).value
    const month = +ReactDOM.findDOMNode(this.refs.month).value
    this.props.fetchData({year, month})
  }

  render () {
    const { items, count, year, month } = this.props.collect

    return (
      <main className="ui column page grid container">
        <div className="column">
          <div className="row">
            <div className="image logo admin"></div>
          </div>
          <Menu {...this.props} />
          <div className="ui grid">
            <div className="column">
              <div className="ui segment">
                <div className="ui mini form">
                  <div className="inline fields">
                    <div className="field">
                      <input ref="year" type="number" max="2038" min="1970" placeholder="年" defaultValue={year} />
                    </div>
                    <div className="field">
                      <input ref="month" type="number" max="12" min="1" placeholder="月" defaultValue={month} />
                    </div>
                    <button className="ui icon button" onClick={this.handleSubmit}>
                      <i className="search icon"></i>
                    </button>
                  </div>
                </div>
                <div className="ui horizontal statistic">
                  <div className="value">
                    {count}
                  </div>
                  <div className="label">
                    則文章
                  </div>
                </div>
                <div id="plot"></div>
                <table className="ui very basic  table">
                  <thead>
                    <tr><th>帳號</th>
                    <th>發文數</th>
                  </tr></thead>
                  <tbody>
                  {!isEmpty(items) && items.map((item, i) => {
                    return (
                    <tr>
                      <td>
                        <h4 className="ui image header">
                          <div className="content">
                            {item['user.email']}
                            <div className="sub header">{item['user.name']}
                          </div>
                        </div>
                      </h4></td>
                      <td>
                        {item.count}
                      </td>
                    </tr>
                    )
                  })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </main>
    )
  }
}

@@ -2847,10 +2847,14 @@
    %E5%89%87
-%E6%96%87%E7%AB%A0
+%E6%B4%BB%E5%8B%95%E8%A8%8A%E6%81%AF%E4%BD%88%E5%91%8A
 %0A   
@@ -3049,16 +3049,23 @@
 r%3E%3Cth%3E%E5%B8%B3%E8%99%9F
+%EF%BC%88Email%EF%BC%89
 %3C/th%3E%0A  
@@ -3089,16 +3089,17 @@
  %3Cth%3E%E7%99%BC%E6%96%87%E6%95%B8
+%E9%87%8F
 %3C/th%3E%0A  

update text