"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 _reactBootstrap = require("react-bootstrap");

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

var _coreUtils = _interopRequireDefault(require("@opentripplanner/core-utils"));

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

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

var _contexts = require("../../util/contexts");

var _viewer = require("../../util/viewer");

var _api = require("../../actions/api");

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

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

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

var _routeDetails = _interopRequireDefault(require("./route-details"));

var _RouteRow = require("./RouteRow");

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

class RouteViewer extends _react.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      /** Used to track if all routes have been rendered */
      initialRender: true
    });

    _defineProperty(this, "_backClicked", () => this.props.viewedRoute === null ? this.props.setMainPanelContent(null) : this.props.setViewedRoute({ ...this.props.viewedRoute,
      patternId: null
    }));

    _defineProperty(this, "onFilterChange", event => {
      const {
        eventPhase,
        target
      } = event; // If the dropdown changes without user interaction, don't update!
      // see https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase

      if (eventPhase !== Event.BUBBLING_PHASE) {
        return;
      }

      const {
        id,
        value
      } = target; // id will be either 'agency' or 'mode' based on the dropdown used

      this.props.setRouteViewerFilter({
        [id]: value
      });
    });

    _defineProperty(this, "onSearchChange", event => {
      const {
        target
      } = event;
      const {
        value
      } = target;
      this.props.setRouteViewerFilter({
        search: value
      });
    });
  }

  componentDidMount() {
    const {
      findRoutes
    } = this.props;
    findRoutes();
  }
  /** Used to scroll to actively viewed route on load */


  componentDidUpdate() {
    const {
      routes
    } = this.props;
    const {
      initialRender
    } = this.state; // Wait until more than the one route is present.
    // This ensures that there is something to scroll past!

    if (initialRender && routes.length > 1) {
      // Using requestAnimationFrame() ensures that the scroll only happens once
      // paint is complete
      window.requestAnimationFrame(() => {
        // Setting initialRender to false ensures that routeRow will not initiate
        // any more scrolling
        this.setState({
          initialRender: false
        });
      });
    }
  }
  /**
   * Handle filter dropdown change. Id of the filter is equivalent to the key in the
   * route object
   */


  render() {
    const {
      agencies,
      filter,
      findRoute,
      getVehiclePositionsForRoute,
      hideBackButton,
      intl,
      modes,
      routes: sortedRoutes,
      setViewedRoute,
      transitOperators,
      viewedRoute,
      viewedRouteObject
    } = this.props;
    const {
      initialRender
    } = this.state;
    const {
      ModeIcon
    } = this.context; // If patternId is present, we're looking at a specific pattern's stops

    if ((viewedRoute === null || viewedRoute === void 0 ? void 0 : viewedRoute.patternId) && viewedRouteObject) {
      var _route$patterns;

      const {
        patternId
      } = viewedRoute;
      const route = viewedRouteObject; // Find operator based on agency_id (extracted from OTP route ID).

      const operator = _coreUtils.default.route.getTransitOperatorFromOtpRoute(route, transitOperators) || {};
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "route-viewer"
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "route-viewer-header"
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "back-button-container"
      }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
        bsSize: "small",
        onClick: this._backClicked
      }, /*#__PURE__*/_react.default.createElement(_icon.default, {
        type: "arrow-left"
      }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "common.navigation.back"
      }))), /*#__PURE__*/_react.default.createElement("div", {
        className: "header-text route-expanded"
      }, route && ModeIcon && /*#__PURE__*/_react.default.createElement(ModeIcon, {
        "aria-label": (0, _viewer.getModeFromRoute)(route),
        mode: (0, _viewer.getModeFromRoute)(route),
        width: 22
      }), /*#__PURE__*/_react.default.createElement(_RouteRow.RouteName, {
        operator: operator,
        route: route
      }))), /*#__PURE__*/_react.default.createElement(_routeDetails.default, {
        operator: operator,
        pattern: route === null || route === void 0 ? void 0 : (_route$patterns = route.patterns) === null || _route$patterns === void 0 ? void 0 : _route$patterns[patternId],
        route: route
      }));
    }

    const {
      search
    } = filter;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "route-viewer"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "route-viewer-header"
    }, !hideBackButton && /*#__PURE__*/_react.default.createElement("div", {
      className: "back-button-container"
    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
      bsSize: "small",
      onClick: this._backClicked
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      type: "arrow-left"
    }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "common.navigation.back"
    }))), /*#__PURE__*/_react.default.createElement("div", {
      className: "header-text"
    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "components.RouteViewer.title"
    })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "components.RouteViewer.details"
    })), /*#__PURE__*/_react.default.createElement("section", {
      className: "search-and-filter"
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: "routeFilter"
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      type: "filter"
    }), /*#__PURE__*/_react.default.createElement("select", {
      "aria-label": intl.formatMessage({
        id: 'components.RouteViewer.agencyFilter'
      }),
      id: "agency",
      onBlur: this.onFilterChange,
      onChange: this.onFilterChange,
      value: filter.agency || ''
    }, /*#__PURE__*/_react.default.createElement("option", {
      value: ''
    }, intl.formatMessage({
      id: 'components.RouteViewer.allAgencies'
    })), agencies.map(agency => /*#__PURE__*/_react.default.createElement("option", {
      key: agency,
      value: agency
    }, agency))), /*#__PURE__*/_react.default.createElement("select", {
      "aria-label": intl.formatMessage({
        id: 'components.RouteViewer.modeFilter'
      }),
      id: "mode",
      onBlur: this.onFilterChange,
      onChange: this.onFilterChange,
      value: filter.mode || ''
    }, /*#__PURE__*/_react.default.createElement("option", {
      value: ''
    }, intl.formatMessage({
      id: 'components.RouteViewer.allModes'
    })), modes.map(mode => /*#__PURE__*/_react.default.createElement("option", {
      key: mode,
      value: mode.toUpperCase()
    }, intl.formatMessage({
      id: `common.otpTransitModes.${mode.toLowerCase()}`
    }))))), /*#__PURE__*/_react.default.createElement("span", {
      className: "routeSearch"
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      type: "search"
    }), /*#__PURE__*/_react.default.createElement("input", {
      onChange: this.onSearchChange,
      placeholder: intl.formatMessage({
        id: 'components.RouteViewer.findARoute'
      }),
      type: "search",
      value: search
    })))), /*#__PURE__*/_react.default.createElement("div", {
      className: "route-viewer-body"
    }, sortedRoutes.map(route => {
      // Find operator based on agency_id (extracted from OTP route ID).
      const operator = _coreUtils.default.route.getTransitOperatorFromOtpRoute(route, transitOperators) || {};
      return /*#__PURE__*/_react.default.createElement(_RouteRow.RouteRow, {
        findRoute: findRoute,
        getVehiclePositionsForRoute: getVehiclePositionsForRoute,
        initialRender: initialRender,
        intl: intl,
        isActive: viewedRoute && viewedRoute.routeId === route.id,
        key: route.id,
        operator: operator,
        route: route,
        setViewedRoute: setViewedRoute
      });
    }), modes.length > 0 && sortedRoutes.length === 0 && /*#__PURE__*/_react.default.createElement("span", {
      className: "noRoutesFoundMessage"
    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: 'components.RouteViewer.noFilteredRoutesFound'
    }))));
  }

} // connect to redux store


_defineProperty(RouteViewer, "propTypes", {
  agencies: _propTypes.default.array,
  filter: _propTypes.default.shape({
    agency: _propTypes.default.string,
    mode: _propTypes.default.string,
    search: _propTypes.default.string
  }),
  findRoute: _api.findRoute.type,
  getVehiclePositionsForRoute: _api.getVehiclePositionsForRoute.type,
  hideBackButton: _propTypes.default.bool,
  modes: _propTypes.default.array,
  routes: _propTypes.default.array,
  setViewedRoute: _ui.setViewedRoute.type,
  transitOperators: _propTypes.default.array,
  viewedRoute: _propTypes.default.shape({
    patternId: _propTypes.default.string,
    routeId: _propTypes.default.string
  }),
  // Routes have many more properties, but none are guaranteed
  viewedRouteObject: _propTypes.default.shape({
    id: _propTypes.default.string
  })
});

_defineProperty(RouteViewer, "contextType", _contexts.ComponentContext);

const mapStateToProps = (state, ownProps) => {
  var _state$otp$transitInd, _state$otp$ui$viewedR;

  return {
    agencies: (0, _state.getAgenciesFromRoutes)(state),
    filter: state.otp.ui.routeViewer.filter,
    modes: (0, _state.getModesForActiveAgencyFilter)(state),
    routes: (0, _state.getSortedFilteredRoutes)(state),
    transitOperators: state.otp.config.transitOperators,
    viewedRoute: state.otp.ui.viewedRoute,
    viewedRouteObject: (_state$otp$transitInd = state.otp.transitIndex.routes) === null || _state$otp$transitInd === void 0 ? void 0 : _state$otp$transitInd[(_state$otp$ui$viewedR = state.otp.ui.viewedRoute) === null || _state$otp$ui$viewedR === void 0 ? void 0 : _state$otp$ui$viewedR.routeId]
  };
};

const mapDispatchToProps = {
  findRoute: _api.findRoute,
  findRoutes: _api.findRoutes,
  getVehiclePositionsForRoute: _api.getVehiclePositionsForRoute,
  setMainPanelContent: _ui.setMainPanelContent,
  setRouteViewerFilter: _ui.setRouteViewerFilter,
  setViewedRoute: _ui.setViewedRoute
};

var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _reactIntl.injectIntl)(RouteViewer));

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

//# sourceMappingURL=route-viewer.js