"use strict";

require("core-js/modules/web.dom.iterable");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactRedux = require("react-redux");

var _reactIntl = require("react-intl");

var _reactBootstrap = require("react-bootstrap");

var _reactRouter = require("react-router");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _qs = _interopRequireDefault(require("qs"));

var _reactSlidingPane = _interopRequireDefault(require("react-sliding-pane"));

var _velocityTransitionGroup = _interopRequireDefault(require("velocity-react/velocity-transition-group"));

var _config = require("../../util/config");

var _ui = require("../../actions/ui");

var callTakerActions = _interopRequireWildcard(require("../../actions/call-taker"));

var fieldTripActions = _interopRequireWildcard(require("../../actions/field-trip"));

var _icon = _interopRequireDefault(require("../util/icon"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * Sidebar which appears to show user list of options and links
 */
class AppMenu extends _react.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      expandedSubmenus: {},
      isPaneOpen: false
    });

    _defineProperty(this, "_showRouteViewer", () => {
      this.props.setMainPanelContent(_ui.MainPanelContent.ROUTE_VIEWER);

      this._togglePane();
    });

    _defineProperty(this, "_startOver", () => {
      const {
        location,
        reactRouterConfig
      } = this.props;
      const {
        search
      } = location;
      let startOverUrl = '/';

      if (reactRouterConfig && reactRouterConfig.basename) {
        startOverUrl += reactRouterConfig.basename;
      } // If search contains sessionId, preserve this so that the current session
      // is not lost when the page reloads.


      if (search) {
        const params = _qs.default.parse(search, {
          ignoreQueryPrefix: true
        });

        const {
          sessionId
        } = params;

        if (sessionId) {
          startOverUrl += `?${_qs.default.stringify({
            sessionId
          })}`;
        }
      }

      window.location.href = startOverUrl;
    });

    _defineProperty(this, "_togglePane", () => {
      const {
        isPaneOpen
      } = this.state;
      this.setState({
        isPaneOpen: !isPaneOpen
      });
    });

    _defineProperty(this, "_toggleSubmenu", id => {
      const {
        expandedSubmenus
      } = this.state;
      const currentlyOpen = expandedSubmenus[id] || false;
      this.setState({
        expandedSubmenus: {
          [id]: !currentlyOpen
        }
      });
    });

    _defineProperty(this, "_addExtraMenuItems", menuItems => {
      return menuItems && menuItems.map(menuItem => {
        const {
          children,
          href,
          iconType,
          iconUrl,
          id,
          label: configLabel,
          subMenuDivider
        } = menuItem;
        const {
          expandedSubmenus
        } = this.state;
        const {
          intl
        } = this.props;
        const isSubmenuExpanded = expandedSubmenus[id];
        const localizationId = `config.menuItems.${id}`;
        const localizedLabel = intl.formatMessage({
          id: localizationId
        }); // Override the config label if a localized label exists

        const label = localizedLabel === localizationId ? configLabel : localizedLabel;

        if (children) {
          return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
            key: id
          }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.MenuItem, {
            className: "expansion-button-container menu-item expand-submenu-button",
            onSelect: () => this._toggleSubmenu(id)
          }, /*#__PURE__*/_react.default.createElement(IconAndLabel, {
            iconType: iconType,
            iconUrl: iconUrl,
            label: label
          }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_icon.default, {
            className: "expand-menu-chevron",
            type: `chevron-${isSubmenuExpanded ? 'up' : 'down'}`
          }))), /*#__PURE__*/_react.default.createElement(_velocityTransitionGroup.default, {
            enter: {
              animation: 'slideDown'
            },
            leave: {
              animation: 'slideUp'
            }
          }, isSubmenuExpanded && /*#__PURE__*/_react.default.createElement("div", {
            className: "sub-menu-container"
          }, this._addExtraMenuItems(children))));
        }

        return /*#__PURE__*/_react.default.createElement(_reactBootstrap.MenuItem, {
          className: subMenuDivider ? 'app-menu-divider menu-item' : 'menu-item',
          href: href,
          key: id
        }, /*#__PURE__*/_react.default.createElement(IconAndLabel, {
          iconType: iconType,
          iconUrl: iconUrl,
          label: label
        }));
      });
    });
  }

  render() {
    const {
      callTakerEnabled,
      extraMenuItems,
      fieldTripEnabled,
      intl,
      mailablesEnabled,
      resetAndToggleCallHistory,
      resetAndToggleFieldTrips,
      toggleMailables
    } = this.props;
    const {
      isPaneOpen
    } = this.state;
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
      "aria-label": isPaneOpen ? intl.formatMessage({
        id: 'components.AppMenu.closeMenu'
      }) : intl.formatMessage({
        id: 'components.AppMenu.openMenu'
      }),
      className: "app-menu-icon",
      onClick: this._togglePane,
      onKeyDown: this._togglePane,
      role: "button",
      tabIndex: 0
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: isPaneOpen ? 'menu-left-x' : 'menu-top-line'
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: isPaneOpen ? '' : 'menu-middle-line'
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: isPaneOpen ? 'menu-right-x' : 'menu-bottom-line'
    })), /*#__PURE__*/_react.default.createElement(_reactSlidingPane.default, {
      from: "left",
      isOpen: isPaneOpen,
      onRequestClose: this._togglePane,
      width: "320px"
    }, /*#__PURE__*/_react.default.createElement("ul", {
      className: "app-menu"
    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.MenuItem, {
      className: "app-menu-route-viewer-link",
      onClick: this._showRouteViewer
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      type: "bus"
    }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "components.RouteViewer.shortTitle"
    })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.MenuItem, {
      className: "menu-item",
      onClick: this._startOver
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      name: "undo"
    }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "common.navigation.startOver"
    })), callTakerEnabled && /*#__PURE__*/_react.default.createElement(_reactBootstrap.MenuItem, {
      className: "menu-item",
      onClick: resetAndToggleCallHistory
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      name: "history"
    }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "components.AppMenu.callHistory"
    })), fieldTripEnabled && /*#__PURE__*/_react.default.createElement(_reactBootstrap.MenuItem, {
      className: "menu-item",
      onClick: resetAndToggleFieldTrips
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      name: "graduation-cap"
    }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "components.AppMenu.fieldTrip"
    })), mailablesEnabled && /*#__PURE__*/_react.default.createElement(_reactBootstrap.MenuItem, {
      className: "menu-item",
      onClick: toggleMailables
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      name: "envelope-o"
    }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "components.AppMenu.mailables"
    })), this._addExtraMenuItems(extraMenuItems))));
  }

} // connect to the redux store


_defineProperty(AppMenu, "propTypes", {
  setMainPanelContent: _propTypes.default.func
});

const mapStateToProps = (state, ownProps) => {
  const {
    extraMenuItems
  } = state.otp.config;
  return {
    callTakerEnabled: (0, _config.isModuleEnabled)(state, _config.Modules.CALL_TAKER),
    extraMenuItems,
    fieldTripEnabled: (0, _config.isModuleEnabled)(state, _config.Modules.FIELD_TRIP),
    mailablesEnabled: (0, _config.isModuleEnabled)(state, _config.Modules.MAILABLES)
  };
};

const mapDispatchToProps = {
  resetAndToggleCallHistory: callTakerActions.resetAndToggleCallHistory,
  resetAndToggleFieldTrips: fieldTripActions.resetAndToggleFieldTrips,
  setMainPanelContent: _ui.setMainPanelContent,
  toggleMailables: callTakerActions.toggleMailables
};

var _default = (0, _reactRouter.withRouter)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _reactIntl.injectIntl)(AppMenu)));
/**
 * Renders a label and icon either from url or font awesome type
 */


exports.default = _default;

const IconAndLabel = ({
  iconType,
  iconUrl,
  label
}) => {
  const intl = (0, _reactIntl.useIntl)();
  return /*#__PURE__*/_react.default.createElement("span", null, iconUrl ? /*#__PURE__*/_react.default.createElement("img", {
    alt: intl.formatMessage({
      id: 'components.AppMenu.menuItemIconAlt'
    }, {
      label
    }),
    src: iconUrl
  }) : /*#__PURE__*/_react.default.createElement(_icon.default, {
    name: iconType || 'external-link-square'
  }), label);
};

module.exports = exports.default;

//# sourceMappingURL=app-menu.js