"use strict";

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

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

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

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

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

var _planFirstLastButtons = _interopRequireDefault(require("./plan-first-last-buttons"));

var _saveTripButton = _interopRequireDefault(require("./save-trip-button"));

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

const IssueButton = _styledComponents.default.button`
  background-color: #ECBE03;
  border: none;
  border-radius: 5px;
  display: inline-block;
  font-size: 12px;
  padding: 2px 4px;
`;

function NarrativeItinerariesHeader({
  errors,
  itineraries,
  itineraryIsExpanded,
  onSortChange,
  onSortDirChange,
  onToggleShowErrors,
  onViewAllOptions,
  pending,
  showingErrors,
  sort
}) {
  const intl = (0, _reactIntl.useIntl)();
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "options header",
    style: {
      alignItems: 'end',
      display: 'flex',
      flexWrap: 'wrap'
    }
  }, itineraryIsExpanded || showingErrors ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
    className: "clear-button-formatting",
    onClick: onViewAllOptions
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    type: "arrow-left"
  }), " ", /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
    id: "components.NarrativeItinerariesHeader.viewAll"
  })), itineraryIsExpanded &&
  /*#__PURE__*/
  // marginLeft: auto is a way of making something "float right"
  // within a flex container
  // see https://stackoverflow.com/a/36182782/269834
  _react.default.createElement("div", {
    style: {
      marginLeft: 'auto'
    }
  }, /*#__PURE__*/_react.default.createElement(_saveTripButton.default, null))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      flexGrow: 1
    },
    title: intl.formatMessage({
      id: 'components.NarrativeItinerariesHeader.titleText',
      values: {
        issueNum: errors.length,
        itineraryNum: itineraries.length,
        pending: pending ? 'true' : 'false'
      }
    })
  }, /*#__PURE__*/_react.default.createElement("span", {
    style: {
      marginRight: '10px'
    }
  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
    id: "components.NarrativeItinerariesHeader.resultText",
    values: {
      itineraryNum: itineraries.length,
      pending: pending ? 'true' : 'false'
    }
  })), errors.length > 0 && /*#__PURE__*/_react.default.createElement(IssueButton, {
    onClick: onToggleShowErrors
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    style: {
      fontSize: 11,
      marginRight: 2
    },
    type: "warning"
  }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
    id: "components.NarrativeItinerariesHeader.numIssues",
    values: {
      issueNum: errors.length
    }
  })))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      float: 'right'
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    className: "clear-button-formatting",
    onClick: onSortDirChange,
    style: {
      marginRight: '5px'
    }
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    type: `sort-amount-${sort.direction.toLowerCase()}`
  })), /*#__PURE__*/_react.default.createElement("select", {
    onBlur: onSortChange,
    onChange: onSortChange,
    value: sort.type
  }, /*#__PURE__*/_react.default.createElement("option", {
    value: "BEST"
  }, intl.formatMessage({
    id: 'components.NarrativeItinerariesHeader.selectBest'
  })), /*#__PURE__*/_react.default.createElement("option", {
    value: "DURATION"
  }, intl.formatMessage({
    id: 'components.NarrativeItinerariesHeader.selectDuration'
  })), /*#__PURE__*/_react.default.createElement("option", {
    value: "ARRIVALTIME"
  }, intl.formatMessage({
    id: 'components.NarrativeItinerariesHeader.selectArrivalTime'
  })), /*#__PURE__*/_react.default.createElement("option", {
    value: "DEPARTURETIME"
  }, intl.formatMessage({
    id: 'components.NarrativeItinerariesHeader.selectDepartureTime'
  })), /*#__PURE__*/_react.default.createElement("option", {
    value: "WALKTIME"
  }, intl.formatMessage({
    id: 'components.NarrativeItinerariesHeader.selectWalkTime'
  })), /*#__PURE__*/_react.default.createElement("option", {
    value: "COST"
  }, intl.formatMessage({
    id: 'components.NarrativeItinerariesHeader.selectCost'
  })))), /*#__PURE__*/_react.default.createElement(_planFirstLastButtons.default, null)));
}

module.exports = exports.default;

//# sourceMappingURL=narrative-itineraries-header.js