"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.mapStateToProps = exports.mapDispatchToProps = exports.FeedbackComponent = exports.Feedback = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
var _react = _interopRequireDefault(require("react"));
var _store = require("../redux/store");
var _recompose = require("recompose");
var _Display = require("./Display");
var _reactstrap = require("reactstrap");
var _react2 = require("@kineticdata/react");
var _bundleCommon = require("@kineticdata/bundle-common");
var _constants = require("../constants");
var _appointments = require("../redux/modules/appointments");
var _walkIns = require("../redux/modules/walkIns");
var _moment = _interopRequireDefault(require("moment"));
var FEEDBACK_FORM_SLUG = 'feedback';
var FeedbackComponent = exports.FeedbackComponent = function FeedbackComponent(_ref) {
  var crosslink = _ref.crosslink,
    techBarId = _ref.techBarId,
    loading = _ref.loading,
    getFilteredAppointments = _ref.getFilteredAppointments,
    handleExperienceClick = _ref.handleExperienceClick,
    experience = _ref.experience,
    input = _ref.input,
    setInput = _ref.setInput,
    appointment = _ref.appointment,
    setAppointment = _ref.setAppointment,
    disabled = _ref.disabled,
    feedbackIdentityRequired = _ref.feedbackIdentityRequired,
    resetExperience = _ref.resetExperience,
    handleSubmitFeedback = _ref.handleSubmitFeedback;
  var filteredAppointments = experience && input.length > 2 ? getFilteredAppointments() : null;
  return /*#__PURE__*/_react["default"].createElement("section", {
    className: "tech-bar-display tech-bar-display--feedback"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "full-screen-container"
  }, crosslink && /*#__PURE__*/_react["default"].createElement(_Display.DisplayTabs, {
    techBarId: techBarId,
    feedbackClassName: 'bg-dark'
  }), /*#__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("h1", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "How was your experience?")), /*#__PURE__*/_react["default"].createElement("div", {
    className: "experience-options"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    className: "btn btn-success",
    disabled: disabled,
    onClick: function onClick() {
      return handleExperienceClick('Positive');
    }
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "sr-only"
  }, "Postive"), /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-smile-o"
  })), /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    className: "btn btn-danger",
    disabled: disabled,
    onClick: function onClick() {
      return handleExperienceClick('Negative');
    }
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "sr-only"
  }, "Negative"), /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-frown-o"
  })))))), experience && /*#__PURE__*/_react["default"].createElement(_reactstrap.Modal, {
    isOpen: !!experience,
    toggle: resetExperience,
    size: "md",
    className: "feedback-identity-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: resetExperience
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Cancel")), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Tell Us Who You Are")))), /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalBody, {
    className: "modal-body--padding"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "form"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "form-group ".concat(feedbackIdentityRequired ? 'required' : '')
  }, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "appointment-search-input"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Find Your Appointment by Name or Email"), feedbackIdentityRequired ? /*#__PURE__*/_react["default"].createElement("span", {
    className: "text-danger"
  }, "*") : /*#__PURE__*/_react["default"].createElement("span", null, ' ', "(", /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Optional"), ")")), /*#__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) {
      setInput(e.target.value);
      setAppointment(null);
    }
  })), filteredAppointments && /*#__PURE__*/_react["default"].createElement("div", {
    className: "form-group"
  }, filteredAppointments.map(function (appt) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "tech-bar-appointment-card ".concat(appointment && appointment.id === appt.id ? 'selected' : ''),
      key: appt.id
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "details"
    }, /*#__PURE__*/_react["default"].createElement("div", null, appt.displayName, ' ', /*#__PURE__*/_react["default"].createElement("span", {
      className: "text-muted"
    }, "(", /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, appt.type), ")")), /*#__PURE__*/_react["default"].createElement("div", {
      className: "text-muted"
    }, /*#__PURE__*/_react["default"].createElement(_react2.Moment, {
      timestamp: (0, _moment["default"])(appt.eventTime, _constants.TIME_FORMAT),
      format: _react2.Moment.formats.time
    }), ' - ', /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, appt.eventType))), (!appointment || appointment.id !== appt.id) && /*#__PURE__*/_react["default"].createElement("button", {
      type: "button",
      className: "btn btn-primary",
      onClick: function onClick() {
        return setAppointment(appt);
      }
    }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Select")));
  }), filteredAppointments.size === 0 && (loading ? /*#__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.")))))), /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    className: "btn btn-primary",
    disabled: feedbackIdentityRequired && !appointment,
    onClick: function onClick() {
      return handleSubmitFeedback();
    }
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Submit Feedback")))));
};
var mapStateToProps = exports.mapStateToProps = function mapStateToProps(state, props) {
  return {
    kapp: (0, _bundleCommon.selectCurrentKapp)(state),
    loading: !state.appointments.today || !state.walkIns.today,
    errors: [state.appointments.error, state.walkIns.error].filter(function (e) {
      return e;
    }),
    appointments: state.appointments.today,
    walkIns: state.walkIns.today,
    records: (state.appointments.today || []).map(function (a) {
      return {
        id: a.id,
        type: 'Appointment',
        username: a.values['Requested For'],
        displayName: a.values['Requested For Display Name'],
        schedulerId: a.values['Scheduler Id'],
        eventType: a.values['Event Type'],
        eventDate: a.values['Event Date'],
        eventTime: a.values['Event Time']
      };
    }).concat((state.walkIns.today || []).map(function (w) {
      return {
        id: w.id,
        type: 'Walk-In',
        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']),
        schedulerId: w.values['Scheduler Id'],
        eventType: w.values['Event Type'],
        eventDate: w.values['Date'],
        eventTime: w.values['Time']
      };
    }))
  };
};
var mapDispatchToProps = exports.mapDispatchToProps = {
  fetchTodayAppointmentsRequest: _appointments.actions.fetchTodayAppointmentsRequest,
  fetchTodayWalkInsRequest: _walkIns.actions.fetchTodayWalkInsRequest
};
var getFilteredAppointments = function getFilteredAppointments(_ref2) {
  var input = _ref2.input,
    records = _ref2.records;
  return function () {
    return records.filter(function (appt) {
      return appt.username.toLowerCase().includes(input.toLowerCase()) || appt.displayName.toLowerCase().includes(input.toLowerCase());
    });
  };
};
var resetExperience = function resetExperience(_ref3) {
  var experience = _ref3.experience,
    setExperience = _ref3.setExperience,
    input = _ref3.input,
    setInput = _ref3.setInput;
  return function () {
    setExperience('');
    setInput('');
  };
};
var handleExperienceClick = function handleExperienceClick(_ref4) {
  var feedbackIdentityAvailable = _ref4.feedbackIdentityAvailable,
    setExperience = _ref4.setExperience,
    handleSubmitFeedback = _ref4.handleSubmitFeedback,
    techBarId = _ref4.techBarId,
    fetchTodayAppointmentsRequest = _ref4.fetchTodayAppointmentsRequest,
    fetchTodayWalkInsRequest = _ref4.fetchTodayWalkInsRequest;
  return function (value) {
    if (feedbackIdentityAvailable) {
      setExperience(value);
      fetchTodayAppointmentsRequest({
        schedulerId: techBarId
      });
      fetchTodayWalkInsRequest({
        schedulerId: techBarId
      });
    } else {
      handleSubmitFeedback({
        Experience: value
      });
    }
  };
};
var handleSubmitFeedback = function handleSubmitFeedback(_ref5) {
  var kapp = _ref5.kapp,
    techBarId = _ref5.techBarId,
    experience = _ref5.experience,
    appointment = _ref5.appointment,
    resetExperience = _ref5.resetExperience,
    setDisabled = _ref5.setDisabled;
  return function (values) {
    (0, _react2.createSubmission)({
      kappSlug: kapp.slug,
      formSlug: FEEDBACK_FORM_SLUG,
      values: values ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, values), {}, {
        'Scheduler Id': techBarId
      }) : (0, _objectSpread2["default"])({
        Experience: experience,
        'Scheduler Id': techBarId
      }, appointment ? {
        'Appointment Id': appointment.id,
        'Event Type': appointment.eventType,
        'Event Date': appointment.eventDate
      } : {}),
      completed: true
    }).then(function (_ref6) {
      var submission = _ref6.submission,
        error = _ref6.error;
      if (error) {
        (0, _bundleCommon.addToastAlert)({
          message: 'There was an error while submitting your feedback. Please consult an administrator.',
          duration: 5000
        });
      } else {
        (0, _bundleCommon.addToastAlert)({
          title: 'Thank You',
          message: 'Your feedback has been submitted.',
          severity: 'success',
          duration: 4000
        });
        setDisabled(true);
        setTimeout(function () {
          return setDisabled(false);
        }, 4000);
      }
      resetExperience();
    });
  };
};
var Feedback = exports.Feedback = (0, _recompose.compose)((0, _store.connect)(mapStateToProps, mapDispatchToProps), (0, _recompose.withProps)(function (_ref7) {
  var techBar = _ref7.techBar,
    kapp = _ref7.kapp;
  return {
    techBarId: techBar.values['Id'],
    feedbackIdentityAvailable: techBar.settings.feedbackIdentitifcation !== 'Hidden',
    feedbackIdentityRequired: techBar.settings.feedbackIdentitifcation === 'Required'
  };
}), (0, _recompose.withState)('experience', 'setExperience', null), (0, _recompose.withState)('input', 'setInput', ''), (0, _recompose.withState)('appointment', 'setAppointment', null), (0, _recompose.withState)('disabled', 'setDisabled', false), (0, _recompose.withHandlers)({
  resetExperience: resetExperience
}), (0, _recompose.withHandlers)({
  getFilteredAppointments: getFilteredAppointments,
  handleSubmitFeedback: handleSubmitFeedback
}), (0, _recompose.withHandlers)({
  handleExperienceClick: handleExperienceClick
}))(FeedbackComponent);