import React, { Fragment } from 'react';
import { connect } from '../redux/store';
import { compose, lifecycle } from 'recompose';
import { StateListWrapper } from '@kineticdata/bundle-common';
import { PageTitle } from './shared/PageTitle';
import { Link } from '@reach/router';
import { actions } from '../redux/modules/appointments';
import moment from 'moment';
import { I18n, Moment } from '@kineticdata/react';
import { DATE_FORMAT, TIME_FORMAT } from '../constants';
export var PastComponent = function PastComponent(_ref) {
  var techBars = _ref.techBars,
      error = _ref.error,
      pastAppointments = _ref.pastAppointments;
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PageTitle, {
    parts: ['Past Appointments']
  }), /*#__PURE__*/React.createElement("div", {
    className: "page-container page-container--tech-bar container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-panel"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-title"
  }, /*#__PURE__*/React.createElement("div", {
    role: "navigation",
    "aria-label": "breadcrumbs",
    className: "page-title__breadcrumbs"
  }, /*#__PURE__*/React.createElement("span", {
    className: "breadcrumb-item"
  }, /*#__PURE__*/React.createElement(Link, {
    to: "../"
  }, /*#__PURE__*/React.createElement(I18n, null, "tech bar")), ' ', "/", ' '), /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement(I18n, null, "Past Appointments")))), /*#__PURE__*/React.createElement("section", {
    className: "mb-4"
  }, /*#__PURE__*/React.createElement(StateListWrapper, {
    data: pastAppointments,
    error: error,
    emptyTitle: "You have no past appointments.",
    emptyMessage: "Your completed and cancelled appointments will appear here."
  }, function (data) {
    return /*#__PURE__*/React.createElement("div", {
      className: "cards"
    }, data.map(function (appt) {
      var techBar = techBars.find(function (t) {
        return t.values['Id'] === appt.values['Scheduler Id'];
      });
      var date = moment.utc(appt.values['Event Date'], DATE_FORMAT);
      var start = moment.utc(appt.values['Event Time'], TIME_FORMAT);
      var end = start.clone().add(appt.values['Event Duration'], 'minute');
      return /*#__PURE__*/React.createElement(Link, {
        to: "appointment/".concat(appt.values['Scheduler Id'], "/").concat(appt.id),
        className: "card",
        key: appt.id
      }, /*#__PURE__*/React.createElement("div", {
        className: "card__row"
      }, /*#__PURE__*/React.createElement("div", {
        className: "card__row-prepend"
      }, /*#__PURE__*/React.createElement("span", {
        className: "fa fa-calendar fa-rounded",
        style: {
          background: 'rgb(255, 74, 94)'
        }
      })), /*#__PURE__*/React.createElement("div", {
        className: "card__col"
      }, /*#__PURE__*/React.createElement("div", {
        className: "card__row-multi"
      }, /*#__PURE__*/React.createElement("div", {
        className: "card__row-subtitle"
      }, /*#__PURE__*/React.createElement(Moment, {
        timestamp: date,
        format: Moment.formats.dateWithDay
      })), /*#__PURE__*/React.createElement("div", {
        className: "card__row text-muted"
      }, /*#__PURE__*/React.createElement(Moment, {
        timestamp: start,
        format: Moment.formats.time
      }), " - ", /*#__PURE__*/React.createElement(Moment, {
        timestamp: end,
        format: Moment.formats.time
      })), /*#__PURE__*/React.createElement("div", {
        className: "card__row-meta"
      }, /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement(I18n, null, techBar.values['Name']))), /*#__PURE__*/React.createElement("div", {
        className: "card__row-meta"
      }, appt.values['Summary']))), /*#__PURE__*/React.createElement("div", {
        className: "card__row-append"
      }, /*#__PURE__*/React.createElement("span", {
        className: "badge badge-pill badge-".concat(appt.coreState === 'Closed' ? 'dark' : 'success')
      }, /*#__PURE__*/React.createElement(I18n, null, appt.values['Status'])))));
    }));
  })))));
};
export var mapStateToProps = function mapStateToProps(state) {
  return {
    techBars: state.techBarApp.schedulers.filter(function (s) {
      return s.values['Status'] === 'Active';
    }),
    error: state.appointments.error,
    pastAppointments: state.appointments.past
  };
};
export var mapDispatchToProps = {
  fetchPastAppointmentsRequest: actions.fetchPastAppointmentsRequest
};
export var Past = compose(connect(mapStateToProps, mapDispatchToProps), lifecycle({
  componentDidMount: function componentDidMount() {
    this.props.fetchPastAppointmentsRequest();
  }
}))(PastComponent);