"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.mapStateToProps = exports.mapDispatchToProps = exports.HomeComponent = exports.Home = void 0;
var _react = _interopRequireWildcard(require("react"));
var _store = require("../redux/store");
var _recompose = require("recompose");
var _reactstrap = require("reactstrap");
var _bundleCommon = require("@kineticdata/bundle-common");
var _PageTitle = require("./shared/PageTitle");
var _router = require("@reach/router");
var _appointments = require("../redux/modules/appointments");
var _walkIns = require("../redux/modules/walkIns");
var _techBarApp = require("../redux/modules/techBarApp");
var _constants = require("../constants");
var _moment = _interopRequireDefault(require("moment"));
var _react2 = require("@kineticdata/react");
var _techBarHero = _interopRequireDefault(require("../../assets/images/tech-bar-hero.jpg"));
var HomeComponent = exports.HomeComponent = function HomeComponent(_ref) {
  var kapp = _ref.kapp,
    techBars = _ref.techBars,
    upcomingAppointments = _ref.upcomingAppointments,
    error = _ref.error,
    modalOpen = _ref.modalOpen,
    setModalOpen = _ref.setModalOpen,
    currentTechBar = _ref.currentTechBar,
    selectCurrentTechBar = _ref.selectCurrentTechBar,
    useLocationServices = _ref.useLocationServices,
    userLocation = _ref.userLocation,
    getUserLocation = _ref.getUserLocation,
    openDropdown = _ref.openDropdown,
    toggleDropdown = _ref.toggleDropdown,
    hasTechBarDisplayRole = _ref.hasTechBarDisplayRole,
    waitingUsers = _ref.waitingUsers;
  var selectedTechBar = currentTechBar || techBars.get(0);
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "page-container page-container--lg"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "page-panel"
  }, /*#__PURE__*/_react["default"].createElement(_PageTitle.PageTitle, {
    hero: true,
    image: true,
    heroImage: _techBarHero["default"],
    overlayColor: "rgba(0,0,0,0.6)",
    center: true,
    title: "Welcome to ".concat(selectedTechBar ? selectedTechBar.values['Name'] : kapp ? kapp.name : 'Tech Bar'),
    subtitle: selectedTechBar ? selectedTechBar.values['Description'] : 'We deliver in-person service that gets people back on track.',
    withCard: true
  }, /*#__PURE__*/_react["default"].createElement(_bundleCommon.Card, {
    bar: true,
    barColor: "warning",
    barSize: "xs"
  }, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardCol, {
    className: "overflow-auto"
  }, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, null, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
    type: "prepend"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-map-marker fa-3x"
  })), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardCol, null, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, null, /*#__PURE__*/_react["default"].createElement("strong", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, selectedTechBar.values['Name'])), techBars.size > 1 && /*#__PURE__*/_react["default"].createElement("button", {
    className: "btn btn-inverse btn-sm ml-auto",
    onClick: function onClick() {
      return setModalOpen(true);
    }
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Change"))), selectedTechBar.values['Location'] && /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
    type: "meta",
    className: "text-muted p-0"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, selectedTechBar.values['Location'])))), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
    type: "meta",
    className: "flex-grow-1 flex-shrink-1 overflow-auto my-2"
  }, selectedTechBar.values['Details'] && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, selectedTechBar.values['Details']))), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardCol, {
    className: "flex-grow-0 flex-shrink-0"
  }, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, null, /*#__PURE__*/_react["default"].createElement(_router.Link, {
    to: "appointment/".concat(selectedTechBar.values['Id']),
    className: "btn btn-primary flex-grow-1"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Schedule Now"), " \u2192")), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
    type: "meta",
    className: "pt-0"
  }, /*#__PURE__*/_react["default"].createElement("em", {
    className: "text-muted ".concat(waitingUsers === 0 ? '' : '')
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Currently awaiting assistance"), ": ", waitingUsers, ' ', /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
    render: function render(translate) {
      return waitingUsers === 1 ? translate('person') : translate('people');
    }
  }))))))), /*#__PURE__*/_react["default"].createElement("section", {
    className: "mt-4"
  }, selectedTechBar ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "info-tile__wrapper"
  }, /*#__PURE__*/_react["default"].createElement(_router.Link, {
    to: "appointment/".concat(selectedTechBar.values['Id']),
    className: "info-tile"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "icon"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-calendar-o fa-fw"
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "title"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-calendar-o fa-fw"
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Schedule")), /*#__PURE__*/_react["default"].createElement("p", {
    className: "description"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Schedule an appointment."))), /*#__PURE__*/_react["default"].createElement(_router.Link, {
    to: "past",
    className: "info-tile"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "icon"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-clock-o fa-fw"
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "title"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-clock-o fa-fw"
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "History")), /*#__PURE__*/_react["default"].createElement("p", {
    className: "description"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "View all of your past appointments."))), /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
    render: function render(translate) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "info-tile actionable",
        onClick: function onClick() {
          return (0, _bundleCommon.openModalForm)({
            formSlug: 'general-feedback',
            kappSlug: kapp.slug,
            values: {
              'Scheduler Id': selectedTechBar.values['Id']
            },
            title: "".concat(translate(selectedTechBar.values['Name']), " ").concat(translate('Feedback')),
            confirmationMessage: translate('Thank you for your feedback.')
          });
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "icon"
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "fa fa-comment-o fa-fw"
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: "title"
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "fa fa-comment-o fa-fw"
      }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Feedback")), /*#__PURE__*/_react["default"].createElement("p", {
        className: "description"
      }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Questions, comments, or concerns.")));
    }
  })) : /*#__PURE__*/_react["default"].createElement("div", {
    className: "alert alert-warning alert-bar"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "h5"
  }, "There are no Tech Bars configured."), /*#__PURE__*/_react["default"].createElement("div", null, "Please contact an administrator."))), /*#__PURE__*/_react["default"].createElement("section", {
    className: "mt-4"
  }, /*#__PURE__*/_react["default"].createElement("h2", {
    className: "section__title"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "title"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Upcoming Appointments"))), /*#__PURE__*/_react["default"].createElement(_bundleCommon.StateListWrapper, {
    data: upcomingAppointments,
    error: error,
    emptyTitle: "You have no upcoming appointments.",
    emptyMessage: "As you schedule appointments, they'll appear here."
  }, function (data) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "cards mb-3"
    }, data.map(function (appt) {
      var techBar = techBars.find(function (t) {
        return t.values['Id'] === appt.values['Scheduler Id'];
      });
      var date = _moment["default"].utc(appt.values['Event Date'], _constants.DATE_FORMAT);
      var start = _moment["default"].utc(appt.values['Event Time'], _constants.TIME_FORMAT);
      var end = start.clone().add(appt.values['Event Duration'], 'minute');
      return /*#__PURE__*/_react["default"].createElement(_bundleCommon.Card, {
        key: appt.id,
        to: "appointment/".concat(appt.values['Scheduler Id'], "/").concat(appt.id),
        components: {
          Link: _router.Link
        }
      }, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, null, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
        type: "prepend"
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "fa fa-calendar fa-rounded",
        style: {
          background: 'rgb(255, 74, 94)'
        }
      })), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardCol, null, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
        type: "multi"
      }, /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
        type: "subtitle"
      }, /*#__PURE__*/_react["default"].createElement(_react2.Moment, {
        timestamp: date,
        format: _react2.Moment.formats.dateWithDay
      })), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
        className: "text-muted"
      }, /*#__PURE__*/_react["default"].createElement(_react2.Moment, {
        timestamp: start,
        format: _react2.Moment.formats.time
      }), " - ", /*#__PURE__*/_react["default"].createElement(_react2.Moment, {
        timestamp: end,
        format: _react2.Moment.formats.time
      })), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
        type: "meta"
      }, /*#__PURE__*/_react["default"].createElement("strong", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, techBar.values['Name']))), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
        type: "meta"
      }, appt.values['Summary']))), /*#__PURE__*/_react["default"].createElement(_bundleCommon.CardRow, {
        type: "append"
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "badge badge-stylized badge-".concat(appt.coreState === 'Closed' ? 'dark' : 'success')
      }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, appt.values['Status'])))));
    }));
  })))), modalOpen && /*#__PURE__*/_react["default"].createElement(_reactstrap.Modal, {
    isOpen: !!modalOpen,
    toggle: function toggle() {
      return setModalOpen(false);
    },
    size: "sm",
    className: "tech-bar-modal"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "modal-header"
  }, /*#__PURE__*/_react["default"].createElement("h4", {
    className: "modal-title"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    className: "btn btn-link",
    onClick: function onClick() {
      return setModalOpen(false);
    }
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Cancel")), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Location")), /*#__PURE__*/_react["default"].createElement(_router.Link, {
    to: "tech-bars",
    className: "btn btn-link"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "View All")))), useLocationServices && !userLocation && /*#__PURE__*/_react["default"].createElement("div", {
    className: "modal-header"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "px-3 py-1 text-center"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    className: "btn btn-link",
    onClick: getUserLocation
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-fw fa-map-marker"
  }), ' ', /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "use my current location")))), /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react["default"].createElement("ul", null, techBars.map(function (techBar) {
    return /*#__PURE__*/_react["default"].createElement("li", {
      key: techBar.id,
      onClick: function onClick() {
        return selectCurrentTechBar(techBar.id);
      }
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "title"
    }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, techBar.values['Name'])), techBar.values['Location'] && /*#__PURE__*/_react["default"].createElement("div", {
      className: "subtitle"
    }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, techBar.values['Location'])), userLocation && /*#__PURE__*/_react["default"].createElement("div", {
      className: "subtitle"
    }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
      render: function render(translate) {
        return techBar.distance ? "(".concat(techBar.distance.toFixed(1), " ").concat(translate('miles'), ")") : "(".concat(translate('Distance Unknown'), ")");
      }
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "details"
    }, techBar.values['Description'] && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, techBar.values['Description'])), techBar.values['Details'] && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, techBar.values['Details']))));
  })))));
};
var mapStateToProps = exports.mapStateToProps = function mapStateToProps(state, props) {
  var techBars = state.techBarApp.schedulers.filter(function (s) {
    return s.values['Status'] === 'Active';
  });
  var useLocationServices = (0, _techBarApp.enableLocationServices)(techBars);
  return {
    kappSlug: state.app.kappSlug,
    kapp: state.app.kapp,
    profile: state.app.profile,
    techBars: useLocationServices && props.userLocation ? techBars.map((0, _techBarApp.mapTechBarsForDistance)(props.userLocation)).sort(_techBarApp.sortTechBarsByDistance) : techBars,
    error: state.appointments.error,
    upcomingAppointments: state.appointments.upcoming,
    waitingUsers: (state.appointments.overview ? state.appointments.overview.size : 0) + (state.walkIns.overview ? state.walkIns.overview.size : 0),
    useLocationServices: useLocationServices
  };
};
var mapDispatchToProps = exports.mapDispatchToProps = {
  fetchUpcomingAppointmentsRequest: _appointments.actions.fetchUpcomingAppointmentsRequest,
  fetchAppointmentsOverviewRequest: _appointments.actions.fetchAppointmentsOverviewRequest,
  fetchWalkInsOverviewRequest: _walkIns.actions.fetchWalkInsOverviewRequest
};
var selectCurrentTechBar = function selectCurrentTechBar(_ref2) {
  var techBars = _ref2.techBars,
    setCurrentTechBar = _ref2.setCurrentTechBar,
    setModalOpen = _ref2.setModalOpen;
  return function (id) {
    setModalOpen(false);
    sessionStorage.setItem(_constants.SESSION_ITEM_CURRENT_TECH_BAR, id);
    setCurrentTechBar(techBars.find(function (t) {
      return t.id === id;
    }));
  };
};
var getUserLocation = function getUserLocation(_ref3) {
  var setUserLocation = _ref3.setUserLocation;
  return function () {
    navigator.geolocation.getCurrentPosition(function (position) {
      if (position && position.coords) {
        var userLocObj = {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        };
        setUserLocation(userLocObj);
        sessionStorage.setItem(_constants.SESSION_ITEM_USER_LOCATION, JSON.stringify(userLocObj));
      }
    });
  };
};
var toggleDropdown = function toggleDropdown(_ref4) {
  var setOpenDropdown = _ref4.setOpenDropdown,
    openDropdown = _ref4.openDropdown;
  return function (dropdownSlug) {
    return function () {
      return setOpenDropdown(dropdownSlug === openDropdown ? false : dropdownSlug);
    };
  };
};
var hasTechBarDisplayRole = function hasTechBarDisplayRole(_ref5) {
  var profile = _ref5.profile;
  return function (techBarName) {
    return _bundleCommon.Utils.isMemberOf(profile, "Role::Tech Bar Display::".concat(techBarName));
  };
};
var Home = exports.Home = (0, _recompose.compose)((0, _recompose.withState)('userLocation', 'setUserLocation', function () {
  try {
    var locObj = JSON.parse(sessionStorage.getItem(_constants.SESSION_ITEM_USER_LOCATION));
    if (locObj && locObj.latitude != null && locObj.longitude != null) {
      return locObj;
    }
  } catch (e) {}
  return null;
}), (0, _store.connect)(mapStateToProps, mapDispatchToProps), (0, _recompose.withState)('currentTechBar', 'setCurrentTechBar', function (_ref6) {
  var techBars = _ref6.techBars;
  var techBarId = sessionStorage.getItem(_constants.SESSION_ITEM_CURRENT_TECH_BAR);
  return techBarId ? techBars.find(function (t) {
    return t.id === techBarId;
  }) : null;
}), (0, _recompose.withState)('modalOpen', 'setModalOpen', false), (0, _recompose.withState)('openDropdown', 'setOpenDropdown', false), (0, _recompose.withHandlers)({
  selectCurrentTechBar: selectCurrentTechBar,
  getUserLocation: getUserLocation,
  toggleDropdown: toggleDropdown,
  hasTechBarDisplayRole: hasTechBarDisplayRole
}), (0, _recompose.lifecycle)({
  componentDidMount: function componentDidMount() {
    // If not loading, fetch upcoming appointments
    this.props.fetchUpcomingAppointmentsRequest();
    // Ask for user location if enabled and not already saved
    if (this.props.useLocationServices && this.props.userLocation === null) {
      this.props.getUserLocation();
    }
    // Fetch count of checked in customers at the current techbar
    if (this.props.techBars.size > 0) {
      var selectedTechBar = this.props.currentTechBar || this.props.techBars.get(0);
      this.props.fetchAppointmentsOverviewRequest({
        id: selectedTechBar.values['Id']
      });
      this.props.fetchWalkInsOverviewRequest({
        id: selectedTechBar.values['Id']
      });
    }
  },
  componentDidUpdate: function componentDidUpdate(prevProps) {
    if (this.props.techBars.size > 0 && this.props.currentTechBar !== prevProps.currentTechBar) {
      var selectedTechBar = this.props.currentTechBar || this.props.techBars.get(0);
      this.props.fetchAppointmentsOverviewRequest({
        id: selectedTechBar.values['Id']
      });
      this.props.fetchWalkInsOverviewRequest({
        id: selectedTechBar.values['Id']
      });
    }
  }
}))(HomeComponent);