"use strict";

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

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

var _formik = require("formik");

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

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

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

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

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

const notificationChannelLabels = {
  email: 'email',
  sms: 'SMS'
}; // Element styles

const SettingsList = _styledComponents.default.ul`
  border-spacing: 0 10px;
  display: table;
  padding-left: 0;
  width: 100%;
  label {
    font-weight: inherit;
  }
  & > li {
    align-items: center;
    display: block;
  }
`; // Using table display for this element, so that all dropdowns occupy the same width.
// (Bootstrap already sets them to occupy 100% of the width of the parent, i.e. the logical cell.)

const SettingsListWithAlign = (0, _styledComponents.default)(SettingsList)`
  & > li {
    display: table-row;
    & > * {
      display: table-cell;
    }
    & > label {
      padding-right: 10px;
    }
  }
`;
const InlineFormControl = (0, _styledComponents.default)(_reactBootstrap.FormControl)`
  display: inline-block;
  margin: 0 0.5em;
  width: auto;
`;
const SettingsToggle = _styledComponents.default.button`
  background: none;
  border: none;
  padding: 0;
  & span.fa {
    line-height: 150%;
  }
`;
/**
 * A label followed by a dropdown control.
 */

const Select = ({
  children,
  Control = _reactBootstrap.FormControl,
  label,
  name
}) =>
/*#__PURE__*/
// <Field> is kept outside of <label> to accommodate layout in table/grid cells.
_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
  htmlFor: name
}, label), /*#__PURE__*/_react.default.createElement(_formik.Field, {
  as: Control,
  componentClass: "select",
  id: name,
  name: name
}, children));
/**
 * This component wraps the elements to edit trip notification settings.
 */


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

    _defineProperty(this, "state", {
      showAdvancedSettings: false
    });

    _defineProperty(this, "_handleToggleAdvancedSettings", () => {
      this.setState({
        showAdvancedSettings: !this.state.showAdvancedSettings
      });
    });

    _defineProperty(this, "_handleDelayThresholdChange", e => {
      // To spare users the complexity of the departure/arrival delay thresholds,
      // set both the arrival and departure variance delays to the selected value.
      const {
        setFieldValue
      } = this.props;
      const threshold = e.target.value;
      setFieldValue('arrivalVarianceMinutesThreshold', threshold);
      setFieldValue('departureVarianceMinutesThreshold', threshold);
    });
  }

  render() {
    const {
      notificationChannel,
      values
    } = this.props;
    const areNotificationsDisabled = notificationChannel === 'none'; // Define a common trip delay field for simplicity, set to the smallest between the
    // retrieved departure/arrival delay attributes.

    const commonDelayThreshold = Math.min(values.arrivalVarianceMinutesThreshold, values.departureVarianceMinutesThreshold);
    let notificationSettingsContent;

    if (areNotificationsDisabled) {
      notificationSettingsContent = /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
        bsStyle: "warning"
      }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Glyphicon, {
        glyph: "alert"
      }), " ", /*#__PURE__*/_react.default.createElement("strong", null, "Notifications are turned off for your account.")), /*#__PURE__*/_react.default.createElement("p", null, "To receive alerts for your saved trips, enable notifications in your account settings, and try saving a trip again."));
    } else {
      const {
        showAdvancedSettings
      } = this.state;
      notificationSettingsContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h4", null, "Notify me via ", notificationChannelLabels[notificationChannel], " when:"), /*#__PURE__*/_react.default.createElement(SettingsListWithAlign, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(Select, {
        label: "There is a realtime alert flagged on my journey",
        name: "notifyOnAlert"
      }, /*#__PURE__*/_react.default.createElement("option", {
        value: true
      }, "Yes (default)"), /*#__PURE__*/_react.default.createElement("option", {
        value: false
      }, "No"))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(Select, {
        label: "An alternative route or transfer point is recommended",
        name: "notifyOnItineraryChange"
      }, /*#__PURE__*/_react.default.createElement("option", {
        value: true
      }, "Yes (default)"), /*#__PURE__*/_react.default.createElement("option", {
        value: false
      }, "No"))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("label", {
        htmlFor: "commonDelayThreshold"
      }, "There are delays or disruptions of more than"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormControl, {
        componentClass: "select",
        id: "commonDelayThreshold",
        onChange: this._handleDelayThresholdChange,
        value: commonDelayThreshold
      }, /*#__PURE__*/_react.default.createElement("option", {
        value: 5
      }, "5 min (default)"), /*#__PURE__*/_react.default.createElement("option", {
        value: 10
      }, "10 min"), /*#__PURE__*/_react.default.createElement("option", {
        value: 15
      }, "15 min")))), /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(SettingsToggle, {
        "aria-expanded": showAdvancedSettings,
        "aria-label": "Toggle advanced settings",
        onClick: this._handleToggleAdvancedSettings,
        type: "button"
      }, /*#__PURE__*/_react.default.createElement(_icon.default, {
        type: showAdvancedSettings ? 'caret-down' : 'caret-right'
      }), "Advanced settings")), showAdvancedSettings && /*#__PURE__*/_react.default.createElement(SettingsList, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(Select, {
        Control: InlineFormControl,
        label: "Monitor this trip",
        name: "leadTimeInMinutes"
      }, /*#__PURE__*/_react.default.createElement("option", {
        value: 15
      }, "15 min"), /*#__PURE__*/_react.default.createElement("option", {
        value: 30
      }, "30 min (default)"), /*#__PURE__*/_react.default.createElement("option", {
        value: 45
      }, "45 min"), /*#__PURE__*/_react.default.createElement("option", {
        value: 60
      }, "1 hour")), "before it begins until it ends.")));
    }

    return /*#__PURE__*/_react.default.createElement("div", null, notificationSettingsContent);
  }

}

var _default = TripNotificationsPane;
exports.default = _default;
module.exports = exports.default;

//# sourceMappingURL=trip-notifications-pane.js