"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.CheckInComponent = exports.CheckIn = void 0;
var _react = _interopRequireWildcard(require("react"));
var _store = require("../redux/store");
var _recompose = require("recompose");
var _bundleCommon = require("@kineticdata/bundle-common");
var _Display = require("./Display");
var _constants = require("../constants");
var _appointments = require("../redux/modules/appointments");
var _moment = _interopRequireDefault(require("moment"));
var _react2 = require("@kineticdata/react");
var CheckInComponent = exports.CheckInComponent = function CheckInComponent(_ref) {
  var crosslink = _ref.crosslink,
    kapp = _ref.kapp,
    techBarId = _ref.techBarId,
    techBar = _ref.techBar,
    appointments = _ref.appointments,
    error = _ref.error,
    showDetails = _ref.showDetails,
    toggleShowDetails = _ref.toggleShowDetails,
    input = _ref.input,
    setInput = _ref.setInput,
    getFilteredAppointments = _ref.getFilteredAppointments;
  var filteredAppointments = showDetails === 'appointment' && input.length > 2 ? getFilteredAppointments() : null;
  return /*#__PURE__*/_react["default"].createElement("section", {
    className: "tech-bar-display tech-bar-display--checkin"
  }, !showDetails ? /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "full-screen-container"
  }, crosslink && /*#__PURE__*/_react["default"].createElement(_Display.DisplayTabs, {
    techBarId: techBarId,
    checkInClassName: 'bg-dark',
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "header bg-dark"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "body"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "form"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    className: "btn btn--checkin btn-success",
    onClick: function onClick() {
      return toggleShowDetails('appointment');
    }
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "I have an appointment")), techBar.settings.allowWalkIns && /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    className: "btn btn--checkin btn-info",
    onClick: function onClick() {
      return toggleShowDetails('walkin');
    }
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "I am a walk-in")))))) : /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, showDetails === 'appointment' && /*#__PURE__*/_react["default"].createElement("div", {
    className: "full-screen-container"
  }, crosslink && /*#__PURE__*/_react["default"].createElement(_Display.DisplayTabs, {
    techBarId: techBarId,
    checkInClassName: 'bg-success',
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "header bg-success"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "body"
  }, /*#__PURE__*/_react["default"].createElement("h1", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "I have an appointment"), /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    className: "btn btn-outline-danger",
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Cancel"))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "form"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "appointment-search-input"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Find Appointment by Name or Email")), /*#__PURE__*/_react["default"].createElement("input", {
    type: "text",
    name: "appointment-search-input",
    id: "appointment-search-input",
    className: "form-control",
    autoComplete: "off",
    value: input,
    onChange: function onChange(e) {
      return setInput(e.target.value);
    }
  }))), filteredAppointments && /*#__PURE__*/_react["default"].createElement("div", {
    className: "form-group"
  }, filteredAppointments.map(function (appt) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "tech-bar-appointment-card",
      key: appt.id
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "details"
    }, /*#__PURE__*/_react["default"].createElement("div", null, appt.values['Requested For Display Name']), /*#__PURE__*/_react["default"].createElement("div", {
      className: "text-muted"
    }, /*#__PURE__*/_react["default"].createElement(_react2.Moment, {
      timestamp: (0, _moment["default"])(appt.values['Event Time'], _constants.TIME_FORMAT),
      format: _react2.Moment.formats.time
    }), ' - ', /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, appt.values['Event Type']))), /*#__PURE__*/_react["default"].createElement("button", {
      type: "button",
      className: "btn btn-primary",
      onClick: function onClick() {
        return _bundleCommon.TaskActions.createAction({
          action: "Tech Bar Check In - ".concat(appt.values['Scheduler Id']),
          type: 'submission',
          operation: 'update',
          relatedId: appt.id,
          jsonInput: {
            values: {
              Status: 'Checked In'
            }
          },
          successCallback: function successCallback() {
            toggleShowDetails(null);
            (0, _bundleCommon.addToastAlert)({
              severity: 'success',
              title: "".concat(appt.values['Requested For Display Name'], " has been successfully checked in."),
              duration: 5000
            });
          },
          errorCallback: function errorCallback() {
            toggleShowDetails(null);
            (0, _bundleCommon.addToastAlert)({
              title: 'There was an error while checking you in.',
              duration: 5000
            });
          }
        });
      }
    }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Check In")));
  }), filteredAppointments.size === 0 && (!error && !appointments ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "text-center"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-spinner fa-spin"
  })) : /*#__PURE__*/_react["default"].createElement("div", {
    className: "alert alert-warning text-center"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "No appointments found.")))))), showDetails === 'walkin' && /*#__PURE__*/_react["default"].createElement("div", {
    className: "full-screen-container"
  }, crosslink && /*#__PURE__*/_react["default"].createElement(_Display.DisplayTabs, {
    techBarId: techBarId,
    checkInClassName: 'bg-info',
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "header bg-info"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "body form-unstyled"
  }, /*#__PURE__*/_react["default"].createElement("h1", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "I am a walk-in"), /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    className: "btn btn-outline-danger",
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Cancel"))), /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
    context: "kapps.".concat(kapp.slug, ".forms.walk-in")
  }, /*#__PURE__*/_react["default"].createElement(_react2.CoreForm, {
    className: "body",
    kapp: kapp.slug,
    form: "walk-in",
    values: {
      'Scheduler Id': techBarId
    },
    completed: function completed() {
      toggleShowDetails(null);
      (0, _bundleCommon.addToastAlert)({
        severity: 'success',
        title: 'You have successfully checked in.',
        duration: 5000
      });
    },
    notFoundComponent: _bundleCommon.ErrorNotFound,
    unauthorizedComponent: _bundleCommon.ErrorUnauthorized,
    unexpectedErrorComponent: _bundleCommon.ErrorUnexpected
  }))))));
};
var mapStateToProps = exports.mapStateToProps = function mapStateToProps(state, props) {
  return {
    kapp: state.app.kapp,
    error: state.appointments.error,
    appointments: state.appointments.today
  };
};
var mapDispatchToProps = exports.mapDispatchToProps = {
  fetchTodayAppointmentsRequest: _appointments.actions.fetchTodayAppointmentsRequest
};
var toggleShowDetails = function toggleShowDetails(_ref2) {
  var showDetails = _ref2.showDetails,
    setShowDetails = _ref2.setShowDetails,
    setInput = _ref2.setInput,
    fetchTodayAppointmentsRequest = _ref2.fetchTodayAppointmentsRequest,
    techBarId = _ref2.techBarId;
  return function (name) {
    setShowDetails(showDetails === name ? null : name);
    setInput('');
    if (name === 'appointment') {
      fetchTodayAppointmentsRequest({
        schedulerId: techBarId,
        status: 'Scheduled'
      });
    }
  };
};
var getFilteredAppointments = function getFilteredAppointments(_ref3) {
  var input = _ref3.input,
    appointments = _ref3.appointments;
  return function () {
    return appointments ? appointments.filter(function (appt) {
      return appt.values['Requested For Display Name'].toLowerCase().includes(input.toLowerCase()) || appt.values['Requested For'].toLowerCase().includes(input.toLowerCase());
    }) : null;
  };
};
var CheckIn = exports.CheckIn = (0, _recompose.compose)((0, _recompose.withProps)(function (_ref4) {
  var techBar = _ref4.techBar;
  return {
    techBarId: techBar.values['Id']
  };
}), (0, _store.connect)(mapStateToProps, mapDispatchToProps), (0, _recompose.withState)('showDetails', 'setShowDetails', null), (0, _recompose.withState)('input', 'setInput', ''), (0, _recompose.withHandlers)({
  toggleShowDetails: toggleShowDetails,
  getFilteredAppointments: getFilteredAppointments
}))(CheckInComponent);