"use strict";

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

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

var _time = require("@opentripplanner/core-utils/lib/time");

var _storage = require("@opentripplanner/core-utils/lib/storage");

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

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

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

var apiActions = _interopRequireWildcard(require("../../actions/api"));

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

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

var formActions = _interopRequireWildcard(require("../../actions/form"));

var _addPlaceButton = _interopRequireDefault(require("../form/add-place-button"));

var _advancedOptions = _interopRequireDefault(require("../form/call-taker/advanced-options"));

var _dateTimeOptions = _interopRequireDefault(require("../form/call-taker/date-time-options"));

var _modeDropdown = _interopRequireDefault(require("../form/call-taker/mode-dropdown"));

var _intermediatePlaceField = _interopRequireDefault(require("../form/intermediate-place-field"));

var _connectedLocationField = _interopRequireDefault(require("../form/connected-location-field"));

var _switchButton = _interopRequireDefault(require("../form/switch-button"));

var _userSettings = _interopRequireDefault(require("../form/user-settings"));

var _narrativeItineraries = _interopRequireDefault(require("../narrative/narrative-itineraries"));

var _callTaker2 = require("../../util/call-taker");

var _state = require("../../util/state");

var _viewerContainer = _interopRequireDefault(require("../viewers/viewer-container"));

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; }

/**
 * This is the main panel/sidebar for the Call Taker/Field Trip module. It
 * currently also serves as the main panel for the FDOT RMCE trip comparison view
 * which depends on the BATCH trip planning mode.
 */
class CallTakerPanel extends _react.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "_planTrip", () => {
      const {
        beginCallIfNeeded,
        currentQuery,
        routingQuery
      } = this.props;
      const issues = [];
      if (!(0, _state.hasValidLocation)(currentQuery, 'from')) issues.push('from');
      if (!(0, _state.hasValidLocation)(currentQuery, 'to')) issues.push('to');

      if (issues.length > 0) {
        // TODO: replace with less obtrusive validation.
        window.alert(`Please define the following fields to plan a trip: ${issues.join(', ')}`);
        return;
      }

      if (this.state.expandAdvanced) this.setState({
        expandAdvanced: false
      }); // Ensure call is started, or start a new one.

      beginCallIfNeeded();
      routingQuery();
    });

    _defineProperty(this, "_addPlace", (result, index) => {
      const intermediatePlaces = [...this.props.currentQuery.intermediatePlaces] || [];

      if (result && index !== undefined) {
        // If adding an actual intermediate place with location. Overwrite the
        // placeholder with the new value.
        intermediatePlaces.splice(index, 1, result.location);
      } else {
        // Otherwise, we're just adding a dummy place.
        intermediatePlaces.push({});
      }

      this.props.setQueryParam({
        intermediatePlaces
      });
    });

    _defineProperty(this, "_removePlace", ({
      index
    }) => {
      const intermediatePlaces = [...this.props.currentQuery.intermediatePlaces] || [];
      intermediatePlaces.splice(index, 1);
      this.props.setQueryParam({
        intermediatePlaces
      });
    });

    _defineProperty(this, "_onHideAdvancedClick", () => {
      const expandAdvanced = !this.state.expandAdvanced; // FIXME move logic to action

      (0, _storage.storeItem)('expandAdvanced', expandAdvanced);
      this.setState({
        expandAdvanced
      });
    });

    _defineProperty(this, "_handleFormKeyDown", evt => {
      switch (evt.keyCode) {
        case 13:
          // Enter
          evt.preventDefault(); // Submit routing query.

          this._planTrip();

          break;

        default:
          // Do nothing.
          break;
      }
    });

    _defineProperty(this, "_updateGroupSize", evt => this.props.setGroupSize(+evt.target.value));

    this.state = {
      expandAdvanced: props.expandAdvanced,
      transitModes: props.modes.transitModes.map(m => m.mode)
    };
  }

  render() {
    const {
      activeSearch,
      currentQuery,
      groupSize,
      mainPanelContent,
      maxGroupSize,
      mobile,
      modes,
      routes,
      setQueryParam,
      showUserSettings,
      timeFormat
    } = this.props; // FIXME: Remove showPlanTripButton

    const showPlanTripButton = mainPanelContent === 'EDIT_DATETIME' || mainPanelContent === 'EDIT_SETTINGS';
    const {
      date,
      departArrive,
      from,
      intermediatePlaces,
      mode,
      time,
      to
    } = currentQuery;
    const actionText = mobile ? 'tap' : 'click';
    const {
      expandAdvanced
    } = this.state;
    const advancedSearchStyle = {
      background: 'white',
      display: expandAdvanced ? undefined : 'none',
      left: '0px',
      padding: '0px 8px 5px',
      position: 'absolute',
      right: '0px',
      zIndex: 99999
    };
    return /*#__PURE__*/_react.default.createElement(_viewerContainer.default, null, /*#__PURE__*/_react.default.createElement("div", {
      className: "main-panel",
      style: {
        bottom: showPlanTripButton ? 55 : 0,
        left: 0,
        overflow: 'hidden',
        padding: '10px',
        paddingBottom: 15,
        position: 'absolute',
        right: 0,
        top: 0
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form"
    }, /*#__PURE__*/_react.default.createElement(_connectedLocationField.default, {
      inputPlaceholder: `Enter start location or ${actionText} on map...`,
      locationType: "from",
      showClearButton: true
    }), Array.isArray(intermediatePlaces) && intermediatePlaces.map((place, i) => {
      return /*#__PURE__*/_react.default.createElement(_intermediatePlaceField.default, {
        index: i,
        inputPlaceholder: `Enter intermediate destination`,
        key: i,
        location: place // FIXME: allow intermediate location type.
        ,
        locationType: "to",
        onLocationCleared: this._removePlace // FIXME: function def
        ,
        onLocationSelected: result => this._addPlace(result, i),
        showClearButton: !mobile
      });
    }), /*#__PURE__*/_react.default.createElement(_connectedLocationField.default, {
      inputPlaceholder: `Enter destination or ${actionText} on map...`,
      locationType: "to",
      showClearButton: !mobile
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "switch-button-container",
      style: {
        top: '20px'
      }
    }, /*#__PURE__*/_react.default.createElement(_switchButton.default, {
      content: /*#__PURE__*/_react.default.createElement("i", {
        className: "fa fa-exchange fa-rotate-90"
      })
    })), /*#__PURE__*/_react.default.createElement(_addPlaceButton.default, {
      from: from,
      intermediatePlaces: intermediatePlaces,
      onClick: this._addPlace,
      to: to
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "search-options"
    }, /*#__PURE__*/_react.default.createElement(_dateTimeOptions.default, {
      date: date,
      departArrive: departArrive,
      onKeyDown: this._handleFormKeyDown,
      setQueryParam: setQueryParam,
      time: time,
      timeFormat: timeFormat
    }), /*#__PURE__*/_react.default.createElement(_modeDropdown.default, {
      mode: mode,
      modes: modes,
      onChange: setQueryParam,
      onKeyDown: this._handleFormKeyDown,
      selectedTransitModes: this.state.transitModes,
      updateTransitModes: transitModes => this.setState({
        transitModes
      })
    }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
      bsSize: "small",
      bsStyle: "default",
      onClick: this._planTrip,
      style: {
        fontSize: '13px',
        padding: '1px 10px'
      }
    }, "Plan")), /*#__PURE__*/_react.default.createElement("div", {
      className: "advanced-search-options-container"
    }, groupSize !== null && maxGroupSize && /*#__PURE__*/_react.default.createElement("span", {
      className: "pull-right"
    }, "Group size:", ' ', /*#__PURE__*/_react.default.createElement("input", {
      max: maxGroupSize,
      min: 0,
      onChange: this._updateGroupSize,
      onKeyDown: this._handleFormKeyDown,
      step: 1,
      style: {
        lineHeight: '0.8em'
      },
      type: "number",
      value: groupSize
    })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
      className: "hide-button clear-button-formatting",
      onClick: this._onHideAdvancedClick
    }, /*#__PURE__*/_react.default.createElement("i", {
      className: `fa fa-caret-${expandAdvanced ? 'up' : 'down'}`
    }), " Advanced options"), /*#__PURE__*/_react.default.createElement("div", {
      className: "advanced-search-options",
      style: advancedSearchStyle
    }, /*#__PURE__*/_react.default.createElement(_advancedOptions.default, {
      currentQuery: currentQuery,
      findRoutes: this.props.findRoutes,
      modes: modes,
      onKeyDown: this._handleFormKeyDown,
      routes: routes,
      setQueryParam: setQueryParam
    })))), !activeSearch && !showPlanTripButton && showUserSettings && /*#__PURE__*/_react.default.createElement(_userSettings.default, null), /*#__PURE__*/_react.default.createElement("div", {
      className: "desktop-narrative-container"
    }, /*#__PURE__*/_react.default.createElement(_narrativeItineraries.default, {
      containerStyle: {
        bottom: '0',
        display: 'flex',
        flexDirection: 'column',
        left: '0',
        position: 'absolute',
        right: '0',
        // FIXME: This top pixel value can be variable dependent on
        // height of the form above. It may need to be specified differently
        top: 210 + intermediatePlaces.length * 45
      }
    }))));
  }

} // connect to the redux store


const mapStateToProps = (state, ownProps) => {
  const {
    activeId,
    requests
  } = state.callTaker.fieldTrip;
  const request = requests.data.find(req => req.id === activeId);
  const showUserSettings = (0, _state.getShowUserSettings)(state);
  return {
    activeSearch: (0, _state.getActiveSearch)(state),
    currentQuery: state.otp.currentQuery,
    expandAdvanced: state.otp.user.expandAdvanced,
    groupSize: state.callTaker.fieldTrip.groupSize,
    mainPanelContent: state.otp.ui.mainPanelContent,
    maxGroupSize: (0, _callTaker2.getGroupSize)(request),
    modes: state.otp.config.modes,
    routes: state.otp.transitIndex.routes,
    showUserSettings,
    timeFormat: (0, _time.getTimeFormat)(state.otp.config)
  };
};

const mapDispatchToProps = {
  beginCallIfNeeded: callTakerActions.beginCallIfNeeded,
  findRoutes: apiActions.findRoutes,
  routingQuery: apiActions.routingQuery,
  setGroupSize: fieldTripActions.setGroupSize,
  setQueryParam: formActions.setQueryParam
};

var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(CallTakerPanel);

exports.default = _default;
module.exports = exports.default;

//# sourceMappingURL=call-taker-panel.js