"use strict";

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

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

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

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

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

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

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

// If shown, keep the '5 min' portion of the status string on the same line.
const DelayText = _styledComponents.default.span`
  white-space: nowrap;
`;
exports.DelayText = DelayText;
const MainContent = _styledComponents.default.div``;
exports.MainContent = MainContent;
const Container = _styledComponents.default.div`
${props => props.withBackground ? `background-color: ${props.color};` : `color: ${props.color};`}
`;
const TimeStruck = _styledComponents.default.div`
  text-decoration: line-through;
`;
const TimeBlock = _styledComponents.default.div`
  line-height: 1em;
  margin-bottom: 4px;
`;
const STATUS = {
  EARLY: {
    color: '#337ab7',
    label: 'early'
  },
  LATE: {
    color: '#D92923',
    label: 'late'
  },
  ON_TIME: {
    color: '#028602',
    label: 'on time'
  },
  SCHEDULED: {
    label: 'scheduled'
  }
};
/**
 * This component renders a string such as '5 min late' or 'on time'
 * while keeping the '5 min' portion on the same line.
 *
 * If the formatted time/original time values (e.g. 5:11 pm) are provided, they
 * will be rendered above the status. Also, this can optionally be rendered with
 * a background color for a label-like presentation.
 */

const RealtimeStatusLabel = ({
  className,
  delay,
  isRealtime,
  onTimeThresholdSeconds,
  originalTime,
  time,
  withBackground
}) => {
  const status = (0, _viewer.getTripStatus)(isRealtime, delay, onTimeThresholdSeconds);
  const isEarlyOrLate = status === _viewer.REALTIME_STATUS.EARLY || status === _viewer.REALTIME_STATUS.LATE; // Use a default background color if the status object doesn't set a color
  // (e.g. for 'Scheduled' status), but only in withBackground mode.

  const color = STATUS[status].color || withBackground && '#6D6C6C'; // Render time if provided.

  let renderedTime;

  if (time) {
    // If transit vehicle is not on time, strike the original scheduled time
    // and display the updated time underneath.
    renderedTime = isEarlyOrLate ? /*#__PURE__*/_react.default.createElement(TimeBlock, null, /*#__PURE__*/_react.default.createElement(TimeStruck, null, originalTime), /*#__PURE__*/_react.default.createElement("div", null, time)) : /*#__PURE__*/_react.default.createElement("div", null, time);
  }

  return /*#__PURE__*/_react.default.createElement(Container, {
    className: className,
    color: color,
    withBackground: withBackground
  }, renderedTime, /*#__PURE__*/_react.default.createElement(MainContent, null, isEarlyOrLate && /*#__PURE__*/_react.default.createElement(DelayText, null, (0, _time.formatDuration)(Math.abs(delay)), ' '), STATUS[status].label));
};

const mapStateToProps = state => ({
  onTimeThresholdSeconds: state.otp.config.onTimeThresholdSeconds
});

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

exports.default = _default;

//# sourceMappingURL=realtime-status-label.js