import React from 'react';
import { connect } from 'react-redux';
import ContentHeading from 'components/ContentHeading/ContentHeading';
import * as actionCreators from 'redux/modules/reportConfiguration';
import harvestLogo from './harvest_logo.png';
import { Link, push } from 'react-router';
import formattedDate from 'helpers/formattedDate';
import Confirm from 'components/Confirm/Confirm';
import ReactPaginate from 'react-paginate';

class ReportConfigurationList extends React.Component {
  static propTypes = {
    loadReportConfigurations: React.PropTypes.func.isRequired,
    deleteReportConfiguration: React.PropTypes.func.isRequired,
    reportConfiguration: React.PropTypes.object.isRequired,
  };

  static contextTypes = {
    router: React.PropTypes.object.isRequired,
  }

  state= {
    perPage: 4,
    pageNum: 1,
    currentPage: 1,
    total: 0,
  }

  componentWillMount() {
    this.setState({
      currentPage: this.props.location.query.currentPage || this.state.currentPage,
    }, () => {
      this.props.loadReportConfigurations(this.state)
      .then(({ meta, reportConfigurations }) => {
        if (!reportConfigurations.length && this.props.location.query.currentPage !== 1) {
          this.context.router.push('/reports');
        } else {
          this.setState({
            total: meta.count,
            pageNum: Math.ceil(meta.count / this.state.perPage),
          });
        }
      });
    });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.query.currentPage == 1 || !nextProps.location.query.currentPage) {
      this.setState({
        currentPage: 1,
      });
    }
  }

  onDeleteClick = (id) => {
    this.props.deleteReportConfiguration(id);
  }

  handlePageClick = (data) => {
    this.setState({
      currentPage: data.selected + 1,
    }, () => {
      this.props.loadReportConfigurations(this.state)
      .then(() => this.context.router.push(`/reports/?currentPage=${this.state.currentPage}`));
    });
  };

  render() {
    const dataTable = (this.props.reportConfiguration.reportConfigurations)
    ? this.props.reportConfiguration.reportConfigurations.map((reportConf) => {
      let contacts = reportConf.contacts.map((c) => c.fullName).slice(0, 3).join(', ');
      if (reportConf.contacts.length > 3) contacts += '...';
      return (<tr key={reportConf._id}>
        <td>{reportConf.name}</td>
        <td>
          <Link to="/integrations/harvest/">
            <img
              className="integration-favicon img-rounded"
              src={harvestLogo}
              alt="Harvest Logo"
            />
          </Link>
        </td>
        <td>{(reportConf.schedule.typeScheduling === 'automated')
          ? formattedDate.getSchedulingToString(reportConf.schedule.settings)
          : '-'}</td>
        <td>{(reportConf.approve)
            ? (<i className="fa fa-eye" aria-hidden="true" title="Yes"></i>)
            : (<i className="fa fa-eye-slash" aria-hidden="true" title="No"></i>)
          }</td>
        <td>{contacts}</td>
        <td className="actions">
          <div className="btn-group btn-group-sm" role="group">
            <Link
              to={`/reports/run/${reportConf._id}`}
              className="btn btn-default btn-actions"
              title="Generate report"
            >
              <i className="fa fa-file-pdf-o" aria-hidden="true"></i>
            </Link>
            <Link
              to={{
                pathname: '/reports-history/', query: {
                  reportConfigurationId: reportConf._id, reportConfigurationName: reportConf.name,
                },
              }}
              className="btn btn-default btn-actions"
              title="History"
            >
              <i className="fa fa-hourglass" aria-hidden="true"></i>
            </Link>
            <Link
              to={`/reports/${reportConf._id}`}
              className="btn btn-default btn-actions"
              title="Edit"
            >
              <i className="fa fa-pencil" />
            </Link>
            <Confirm
              onConfirm={this.onDeleteClick.bind(this, reportConf._id)}
              body="Are you sure you want to delete this report?"
              confirmText="Delete"
              title="Deleting report"
            >
              <button
                className="btn btn-default btn-actions"
                title="Delete"
              >
                <i className="fa fa-trash" />
              </button>
            </Confirm>
          </div>
        </td>
      </tr>);
    })
    : null;
    const table = (this.props.reportConfiguration.reportConfigurations.length > 0)
    ? (
      <div className="panel-body">
        <div>
          <table className="table table-responsive table-bordered table-hover">
            <thead>
              <tr>
                <th className="text-center">Name</th>
                <th className="text-center">Type</th>
                <th className="text-center">Schedule</th>
                <th className="text-center">Approval</th>
                <th className="text-center">Send to</th>
                <th className="text-center">Actions</th>
              </tr>
            </thead>
            <tbody>
              {dataTable}
            </tbody>
          </table>
        </div>

      </div>)
      : (<div className="no-data">
        <strong>Heads up! </strong>You haven't got created reports.
      </div>);

    const pagination = (this.props.reportConfiguration.reportConfigurations.length)
      ? (<div className="col-md-12 text-center">
        <ReactPaginate
          previousLabel={"previous"}
          nextLabel={"next"}
          breakLabel={<a href="">...</a>}
          breakClassName={"break-me"}
          pageNum={this.state.pageNum}
          marginPagesDisplayed={2}
          pageRangeDisplayed={5}
          clickCallback={this.handlePageClick}
          containerClassName={"pagination"}
          subContainerClassName={"pages pagination"}
          activeClassName={"active"}
        />
      </div>)
    : null;

    return (
      <div className="wrapper">
        <div className="content-wrapper">
          <ContentHeading name="Reports" />
          {(this.props.reportConfiguration.isLoading)
            ? (<h2><i className="fa fa-spin fa-spinner"></i> Wait...</h2>)
            :
              (<div className="row">
                <div className="panel panel-default">
                  <div className="panel-heading clearfix">
                    <div className="pull-right">
                      <Link
                        to="/new-report"
                        className="btn btn-success"
                      >
                        <em className="fa fa-plus"> </em>
                        Add report
                      </Link>
                    </div>
                  </div>
                  {table}
                </div>
              </div>)
        }
        {pagination}
        </div>
      </div>
    );
  }
}
export default connect(
  (store) => ({
    reportConfiguration: store.reportConfiguration,
  }), actionCreators)(ReportConfigurationList);