"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RouteName = exports.ModeIconElement = exports.OperatorImg = exports.RouteRowElement = exports.RouteRowButton = exports.StyledRouteRow = exports.RouteRow = void 0;

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _velocityReact = require("velocity-react");

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

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

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

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 RouteRow extends _react.PureComponent {
  constructor(props) {
    super(props); // Create a ref used to scroll to

    _defineProperty(this, "componentDidMount", () => {
      const {
        getVehiclePositionsForRoute,
        isActive,
        route
      } = this.props;

      if (isActive && (route === null || route === void 0 ? void 0 : route.id)) {
        // Update data to populate map
        getVehiclePositionsForRoute(route.id); // This is fired when coming back from the route details view

        this.activeRef.current.scrollIntoView();
      }
    });

    _defineProperty(this, "_onClick", () => {
      const {
        findRoute,
        getVehiclePositionsForRoute,
        isActive,
        route,
        setViewedRoute
      } = this.props;

      if (isActive) {
        // Deselect current route if active.
        setViewedRoute({
          patternId: null,
          routeId: null
        });
      } else {
        // Otherwise, set active and fetch route patterns.
        findRoute({
          routeId: route.id
        });
        getVehiclePositionsForRoute(route.id);
        setViewedRoute({
          routeId: route.id
        });
      }
    });

    this.activeRef = /*#__PURE__*/_react.default.createRef();
  }

  componentDidUpdate() {
    /*
       If the initial route row list is being rendered and there is an active
       route, scroll to it. The initialRender prop prohibits the row being scrolled to
       if the user has clicked on a route
    */
    if (this.props.isActive && this.props.initialRender) {
      this.activeRef.current.scrollIntoView();
    }
  }

  render() {
    const {
      intl,
      isActive,
      operator,
      route
    } = this.props;
    const {
      ModeIcon
    } = this.context;
    return /*#__PURE__*/_react.default.createElement(StyledRouteRow, {
      isActive: isActive,
      ref: this.activeRef
    }, /*#__PURE__*/_react.default.createElement(RouteRowButton, {
      className: "clear-button-formatting",
      isActive: isActive,
      onClick: this._onClick
    }, /*#__PURE__*/_react.default.createElement(RouteRowElement, null, operator && operator.logo && /*#__PURE__*/_react.default.createElement(OperatorImg, {
      alt: intl.formatMessage({
        id: 'components.RouteRow.operatorLogoAltText'
      }, {
        operatorName: operator.name
      }),
      src: operator.logo
    })), /*#__PURE__*/_react.default.createElement(ModeIconElement, null, /*#__PURE__*/_react.default.createElement(ModeIcon, {
      "aria-label": (0, _viewer.getModeFromRoute)(route),
      height: 22,
      mode: (0, _viewer.getModeFromRoute)(route),
      width: 22
    })), /*#__PURE__*/_react.default.createElement(RouteName, {
      operator: operator,
      route: route
    })), /*#__PURE__*/_react.default.createElement(_velocityReact.VelocityTransitionGroup, {
      enter: {
        animation: 'slideDown'
      },
      leave: {
        animation: 'slideUp'
      }
    }, isActive && /*#__PURE__*/_react.default.createElement(_routeDetails.default, {
      operator: operator,
      route: route
    })));
  }

}

exports.RouteRow = RouteRow;

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

const StyledRouteRow = _styledComponents.default.div`
  background-color: white;
  border-bottom: 1px solid gray;
`;
exports.StyledRouteRow = StyledRouteRow;
const RouteRowButton = (0, _styledComponents.default)(_reactBootstrap.Button)`
  align-items: center;
  display: flex;
  padding: 6px;
  width: 100%;
  transition: all ease-in-out 0.1s;
`;
exports.RouteRowButton = RouteRowButton;
const RouteRowElement = _styledComponents.default.span``;
exports.RouteRowElement = RouteRowElement;
const OperatorImg = _styledComponents.default.img`
  height: 25px;
  margin-right: 8px;
`;
exports.OperatorImg = OperatorImg;
const ModeIconElement = _styledComponents.default.span`
  display: inline-block;
  vertical-align: bottom;
  height: 22px;
`;
exports.ModeIconElement = ModeIconElement;
const RouteNameElement = (0, _styledComponents.default)(_reactBootstrap.Label)`
  background-color: ${props => props.backgroundColor === '#ffffff' || props.backgroundColor === 'white' ? 'rgba(0,0,0,0)' : props.backgroundColor};
  color: ${props => props.color};
  flex: 0 1 auto;
  font-size: medium;
  font-weight: 400;
  margin-left: ${props => props.backgroundColor === '#ffffff' || props.backgroundColor === 'white' ? 0 : '8px'};
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const RouteName = ({
  operator,
  route
}) => {
  const {
    backgroundColor,
    color,
    longName
  } = (0, _viewer.getColorAndNameFromRoute)(operator, route);
  return /*#__PURE__*/_react.default.createElement(RouteNameElement, {
    backgroundColor: backgroundColor,
    color: color,
    title: `${route.shortName} ${longName}`
  }, /*#__PURE__*/_react.default.createElement("b", null, route.shortName), " ", longName);
};

exports.RouteName = RouteName;

//# sourceMappingURL=RouteRow.js