import React, { PropTypes } from 'react'
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup'
import { connect } from 'react-redux'
import { check, checkRestart } from '../actions/check'
import { sendReport, closeReportMessage } from '../actions/report'
import { CHECK_ITEM_LABELS, STATUS_LABELS, STATUS_PASS, MESSAGE_REPORT_SUCCESS, MESSAGE_REPORT_DESC_SUCCESS } from '../constants'
import _ from 'lodash'
import UI from './ui'

const { Row } = UI

export const Dashboard = React.createClass({

  contextTypes: {
    router: PropTypes.object.isRequired
  },

  childContextTypes: {
    dispatch: PropTypes.func.isRequired
  },

  getChildContext: function() {
    return {
      dispatch: this.props.dispatch
    }
  },

  render: function() {
    const { user, check, report } = this.props

    return (
      <div>
        <ReactCSSTransitionGroup
          transitionName="dashboard-transition"
          transitionAppear={true}
          transitionAppearTimeout={500}
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>

          <div className="container dashboard">
            <Row>
              <DashboardCheckList
                user={user}
                check={check}
              />
            </Row>
          </div>
          <DashboardOver report={report} />
        </ReactCSSTransitionGroup>
      </div>
    )
  }
})

const DashboardCheckList = React.createClass({

  contextTypes: {
    dispatch: PropTypes.func.isRequired,
  },

  handleSendReport: function() {
    const { dispatch } = this.context
    dispatch(sendReport())
  },

  handleRestart: function() {
    const { dispatch } = this.context
    dispatch(checkRestart())
  },

  componentDidMount: function() {
    const { dispatch } = this.context
    dispatch(check(this.state))
  },

  handleReportMessageCLick: function() {
    const { dispatch } = this.context
    dispatch(closeReportMessage())
  },

  render: function() {
    const { user, check } = this.props
    const items = _.transform(check.targets,
      (result, value, key) => {
        result['components'] = result['components'] || []
        result['count'] = result['count'] || {all: 0, pass: 0}
        result['components'].push(<DashboardCheckItem key={key} title={key} {...value}/>)
        result['count']['pass'] += value.status === STATUS_PASS
        result['count']['all']++
        return result
      }, [])

    return (
      <div>
        <div className="dashboard-title">
          Идентификационный номер пользователя: {user.id}
        </div>

        <h5>Операции проверки ({items.count.pass}/{items.count.all}):</h5>

        {items.components}

        <div className="dashboard-controls">
          <button
            className="button-primary"
            disabled={check.status !== STATUS_PASS}
            onClick={this.handleSendReport}>
            Отправить
          </button>
          <button
            onClick={this.handleRestart}>
            Перезапустить проверку
          </button>
        </div>
      </div>
    )
  }
})

const DashboardCheckItem = React.createClass({
  render: function() {
    const { title, status, error } = this.props
    return (
      <div>
        <h5 className="dashboard-item__title">{CHECK_ITEM_LABELS[title]}</h5>
        <div className="dashboard-item__bar">
          <div className={"dashboard-item__percentage" + (status === STATUS_PASS ? " dashboard-item__percentage--100" : '')}></div>
        </div>
        <p>
          {STATUS_LABELS[status]}
        </p>
        {error ? <p>{error}</p> : false}
      </div>
    )
  }
})

const DashboardOver = React.createClass({

  contextTypes: {
    dispatch: PropTypes.func.isRequired,
  },

  handleReportMessageCLick: function() {
    const { dispatch } = this.context
    dispatch(closeReportMessage())
  },

  render: function() {
    const { report } = this.props
    return (
      <div className={"over" + (report.showOverMessage ? ' over--active' : '')}>
        <div className="over__content">
          <div className="over__close" onClick={this.handleReportMessageCLick}></div>
          <h1>{MESSAGE_REPORT_SUCCESS}</h1>
          <p>{MESSAGE_REPORT_DESC_SUCCESS}</p>
        </div>
      </div>
    )
  }
})

const mapStateToProps = (store) => {
  const { user, check, report } = store

  return { user, check, report }
}

export default connect(mapStateToProps)(Dashboard)