import React from 'react';
import { connect } from '../redux/store';
import { compose, lifecycle, withHandlers, withState, withProps } from 'recompose';
import { actions as appointmentActions } from '../redux/modules/appointments';
import { actions as walkInActions } from '../redux/modules/walkIns';
import { I18n, Moment } from '@kineticdata/react';
import moment from 'moment';
import { List } from 'immutable';
export var OverheadComponent = function OverheadComponent(_ref) {
  var errors = _ref.errors,
      records = _ref.records;
  return /*#__PURE__*/React.createElement("section", {
    className: "tech-bar-display tech-bar-display--overhead"
  }, /*#__PURE__*/React.createElement("div", {
    className: "full-screen-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "header bg-dark"
  }), /*#__PURE__*/React.createElement("div", {
    className: "body"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form"
  }, /*#__PURE__*/React.createElement("h1", null, errors.length > 0 && /*#__PURE__*/React.createElement("span", {
    className: "fa fa-fw fa-exclamation-triangle text-danger mr-2"
  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Checked In"))), /*#__PURE__*/React.createElement("ol", {
    className: "overhead-display-list"
  }, records.filter(function (r) {
    return r.status === 'Checked In';
  }).map(function (r) {
    return /*#__PURE__*/React.createElement("li", {
      key: r.id
    }, r.displayName, ' ', r.isWalkIn ? /*#__PURE__*/React.createElement("small", null, /*#__PURE__*/React.createElement(I18n, {
      render: function render(translate) {
        return "(".concat(translate('Walk-In'), ")");
      }
    })) : /*#__PURE__*/React.createElement("small", null, '(', /*#__PURE__*/React.createElement(Moment, {
      timestamp: r.appointmentTime,
      format: Moment.formats.time
    }), ')'));
  }))), /*#__PURE__*/React.createElement("div", {
    className: "form"
  }, /*#__PURE__*/React.createElement("h1", null, errors.length > 0 && /*#__PURE__*/React.createElement("span", {
    className: "fa fa-fw fa-exclamation-triangle text-danger mr-2"
  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Now Serving"))), /*#__PURE__*/React.createElement("ol", {
    className: "overhead-display-list"
  }, records.filter(function (r) {
    return r.status === 'In Progress';
  }).map(function (r) {
    return /*#__PURE__*/React.createElement("li", {
      key: r.id
    }, r.displayName, ' ', r.isWalkIn ? /*#__PURE__*/React.createElement("small", null, /*#__PURE__*/React.createElement(I18n, {
      render: function render(translate) {
        return "(".concat(translate('Walk-In'), ")");
      }
    })) : /*#__PURE__*/React.createElement("small", null, '(', /*#__PURE__*/React.createElement(Moment, {
      timestamp: r.appointmentTime,
      format: Moment.formats.time
    }), ')'));
  }))))));
};
export var mapStateToProps = function mapStateToProps(state, props) {
  return {
    errors: [state.appointments.error, state.walkIns.error].filter(function (e) {
      return e;
    }),
    records: (state.appointments.today || List()).map(function (a) {
      return {
        id: a.id,
        updatedAt: "".concat(a.values['Event Date'], " ").concat(a.values['Event Time']),
        appointmentTime: "".concat(a.values['Event Date'], " ").concat(a.values['Event Time']),
        username: a.values['Requested For'],
        displayName: a.values['Requested For Display Name'],
        status: a.values['Status']
      };
    }).concat((state.walkIns.today || List()).map(function (w) {
      return {
        id: w.id,
        updatedAt: moment.utc(w.updatedAt).tz(props.techBar.values['Timezone'] || moment.tz.guess()).format('YYYY-MM-DD HH:mm'),
        isWalkIn: true,
        username: w.values['Requested For'] || w.values['Email'],
        displayName: w.values['Requested For Display Name'] || "".concat(w.values['First Name'], " ").concat(w.values['Last Name']),
        status: w.values['Status']
      };
    })).sortBy(function (r) {
      return r.updatedAt;
    })
  };
};
export var mapDispatchToProps = {
  fetchTodayAppointmentsRequest: appointmentActions.fetchTodayAppointmentsRequest,
  fetchTodayWalkInsRequest: walkInActions.fetchTodayWalkInsRequest
};

var fetchData = function fetchData(_ref2) {
  var techBarId = _ref2.techBarId,
      fetchTodayAppointmentsRequest = _ref2.fetchTodayAppointmentsRequest,
      fetchTodayWalkInsRequest = _ref2.fetchTodayWalkInsRequest;
  return function () {
    fetchTodayAppointmentsRequest({
      schedulerId: techBarId,
      status: ['Checked In', 'In Progress']
    });
    fetchTodayWalkInsRequest({
      schedulerId: techBarId,
      status: ['Checked In', 'In Progress']
    });
  };
};

export var Overhead = compose(withProps(function (_ref3) {
  var techBar = _ref3.techBar;
  return {
    techBarId: techBar.values['Id']
  };
}), connect(mapStateToProps, mapDispatchToProps), withState('poller', 'setPoller', null), withHandlers({
  fetchData: fetchData
}), lifecycle({
  componentDidMount: function componentDidMount() {
    var _this = this;

    this.props.fetchData();
    this.props.setPoller(setInterval(function () {
      _this.props.fetchData();
    }, 10000));
  },
  componentWillUnmount: function componentWillUnmount() {
    clearInterval(this.props.poller);
  }
}))(OverheadComponent);