import React, {Component} from "react";
import {Link} from "react-router";
import {bindActionCreators} from "redux";
import asyncConnect from "../helpers/asyncConnect";
import * as dashboardActions from "../redux/modules/auth";
import * as authActions from "../redux/modules/auth";
import {getAdminCompany} from "../redux/modules/companies";
import {setShowChatModal} from "../redux/modules/socket";
import * as alertBarActions from "../redux/modules/alerts";
import DashboardCard from "../components/dashboard/DashboardCard";
import _ from "lodash";
import moment from "moment";
import {connect} from "react-redux";

function fetchData(store) {
  const {getState,dispatch}=store;
  /*If you want to get a state
  const state = getState();*/
  const promises = [];
  promises.push(dispatch(dashboardActions.getDashboard()));
  return Promise.all(promises);
}
@asyncConnect(
  store=>fetchData(store)
)

@connect(
  state => ({
    user: state.auth.user,
    dashboard: state.auth.dashboard,
    dashStatistic: state.auth.dashStatistic,
    metadataList: state.athletes.metadataList
  }),
  dispatch => bindActionCreators({...dashboardActions, ...alertBarActions, ...authActions, setShowChatModal}, dispatch)
)

export default class DashboardPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFiltred: false,
      dashCategory: 'all'
    }
  }

  componentWillReceiveProps(nextProps) {

  }

  changeCategory(category) {
    this.setState({dashCategory: category});
  }


  filterDash(dashCategory) {
    const {dashboard} = this.props;

    if (dashCategory === 'all') {
      return dashboard;
    } else if (dashCategory === 'active') {
      return _.filter(dashboard, (athlete)=> {
        return moment(athlete.lastWorkout).isAfter(moment().subtract(10, 'days'))
      })
    } else if (dashCategory === 'notActive') {
      return _.filter(dashboard, (athlete)=> {
        return moment(athlete.lastWorkout).isBefore(moment().subtract(10, 'days')) || !athlete.programId || !athlete.lastWorkout
      })
    } else if (dashCategory === 'withoutProgram') {
      return _.filter(dashboard, (athlete)=> {
        return athlete.programId === null
      })
    } else if (dashCategory === 'injury') {
      return _.filter(dashboard, (athlete)=> {
        return athlete.daysFeedbackStatusId === 2 || athlete.daysFeedbackStatusId === 4
      })
    }

  }

  handleMessageClick(athleteId) {
    this.props.setShowChatModal(athleteId, true);
  }

  getEmptyMessage() {
    const {dashCategory} = this.state;
    switch (dashCategory) {
      case 'active' :
        return 'Your athletes do not have recent activity';
        break;
      case 'notActive':
        return 'You do not have any inactive athletes';
        break;
      case 'withoutProgram':
        return 'You do not have any athletes without a program';
        break;
      case 'injury':
        return 'You do not have injured athletes';
        break;
      default :
        return 'You do not have athletes =(';
        break
    }
  }


  render() {
    const {dashStatistic: {total, notActive, active, withoutProgram, injury}} = this.props;
    const {isFiltred, dashCategory} = this.state;
    let dashboard = this.filterDash(dashCategory);

    return (
      <div >

        <div className="">
          <div className="d-flex flex-row flex-wrap justify-content-center">
            <div onClick={this.changeCategory.bind(this, 'all')}
                 className={`widget ${dashCategory === 'all' ? 'active' : ''}`}>
              <span className="statistic">{total}</span>
              <label className="label">Total</label>
            </div>

            <div onClick={this.changeCategory.bind(this, 'active')}
                 className={`widget ${dashCategory === 'active' ? 'active' : ''}`}>
              <span className="statistic">{active}</span>
              <label className="label">Active</label>
            </div>

            <div onClick={this.changeCategory.bind(this, 'notActive')}
                 className={`widget ${dashCategory === 'notActive' ? 'active' : ''}`}>
              <span className="statistic">{notActive}</span>
              <label className="label">Not active</label>
            </div>

            <div onClick={this.changeCategory.bind(this, 'withoutProgram')}
                 className={`widget ${dashCategory === 'withoutProgram' ? 'active' : ''}`}>
              <span className="statistic">{withoutProgram} <sub
                className="percentage">{(withoutProgram > 0) ? Math.floor(withoutProgram * 100 / total) + '%' : ''}</sub></span>
              <label className="label">Without program</label>
            </div>
            <div onClick={this.changeCategory.bind(this, 'injury')}
                 className={`widget ${dashCategory === 'injury' ? 'active' : ''}`}>
              <span className="statistic">{injury} <sub
                className="percentage">{(injury > 0) ? Math.floor(injury * 100 / total) + '%' : ''}</sub> </span>
              <label className="label">Injury</label>
            </div>
          </div>

        </div>


        <div className="d-flex flex-row justify-content-around flex-wrap">
          {dashboard && dashboard.length && dashboard.map((athlete, i)=> {
            return (
              <DashboardCard
                athlete={athlete}
                key={i}
                handleMessageClick={this.handleMessageClick.bind(this, athlete.id)}
              />
            )
          }) ||
          <div>
            {(dashCategory === 'all') && <div className="container p-0">
              <div className="card no-list">
                <div className="card-block text-center">
                  <h2 className="text-main">Your athletes do not have recent activity. <Link
                    to="/athletes/create"><span>Invite </span></Link>
                    athletes!</h2>
                </div>
              </div>
            </div>}
            {(dashCategory !== 'all') && <div className="container">
              <div className="card no-list">
                <div className="card-block text-center">
                  <h2 className="text-main">{this.getEmptyMessage()}</h2>
                </div>
              </div>
            </div>}
          </div>
          }
        </div>

        <br/>
        <div className="new-dash">

        </div>

      </div>
    )
  }
}