"use strict";

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

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

var _formik = require("formik");

var _formikErrorFocus = _interopRequireDefault(require("formik-error-focus"));

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

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

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

var _reactRouter = require("react-router");

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

var userActions = _interopRequireWildcard(require("../../../actions/user"));

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

var _tripStatus = _interopRequireDefault(require("./trip-status"));

var _tripSummary = _interopRequireDefault(require("./trip-summary"));

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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

// Styles.
const TripDayLabel = _styledComponents.default.label`
  border: 1px solid #ccc;
  border-left: none;
  box-sizing: border-box;
  display: inline-block;
  font-weight: inherit;
  float: left;
  height: 3em;
  max-width: 150px;
  min-width: 14.28%;
  text-align: center;
  & > span:first-of-type {
    display: block;
    width: 100%;
  }
  &:first-of-type {
    border-left: 1px solid #ccc;
  }
`;
const allDays = [{
  fullText: 'Mondays',
  name: 'monday',
  text: 'Mon.'
}, {
  fullText: 'Tuesdays',
  name: 'tuesday',
  text: 'Tue.'
}, {
  fullText: 'Wednesdays',
  name: 'wednesday',
  text: 'Wed.'
}, {
  fullText: 'Thursdays',
  name: 'thursday',
  text: 'Thu.'
}, {
  fullText: 'Fridays',
  name: 'friday',
  text: 'Fri.'
}, {
  fullText: 'Saturdays',
  name: 'saturday',
  text: 'Sat.'
}, {
  fullText: 'Sundays',
  name: 'sunday',
  text: 'Sun.'
}];
/**
 * This component shows summary information for a trip
 * and lets the user edit the trip name and day.
 */

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

    _defineProperty(this, "_updateNewTripItineraryExistence", prevProps => {
      const {
        isCreating,
        itineraryExistence,
        setFieldValue
      } = this.props;

      if (isCreating && itineraryExistence && itineraryExistence !== prevProps.itineraryExistence) {
        allDays.forEach(({
          name
        }) => {
          if (!itineraryExistence[name].valid) {
            setFieldValue(name, false);
          }
        });
      }
    });
  }

  componentDidMount() {
    // Check itinerary availability (existence) for all days.
    const {
      checkItineraryExistence,
      values: monitoredTrip
    } = this.props;
    checkItineraryExistence(monitoredTrip);
  }

  componentDidUpdate(prevProps) {
    this._updateNewTripItineraryExistence(prevProps);
  }

  componentWillUnmount() {
    this.props.clearItineraryExistence();
  }

  render() {
    const {
      canceled,
      dirty,
      errors,
      isCreating,
      isSubmitting,
      itineraryExistence,
      values: monitoredTrip
    } = this.props;
    const {
      itinerary
    } = monitoredTrip; // Prevent user from leaving when form has been changed,
    // but don't show it when they click submit or cancel.

    const unsavedChanges = dirty && !isSubmitting && !canceled; // Message changes depending on if the new or existing trip is being edited

    const unsavedChangesNewTripMessage = 'You haven\'t saved your new trip yet. If you leave, it will be lost.';
    const unsavedChangesExistingTripMessage = 'You haven\'t saved your trip yet. If you leave, changes will be lost.';
    const unsavedChangesMessage = isCreating ? unsavedChangesNewTripMessage : unsavedChangesExistingTripMessage;

    if (!itinerary) {
      return /*#__PURE__*/_react.default.createElement("div", null, "No itinerary to display.");
    } else {
      // Show an error indication when
      // - monitoredTrip.tripName is not blank and that tripName is not already used.
      // - no day is selected (show a combined error indication).
      const errorStates = (0, _ui.getErrorStates)(this.props);
      let monitoredDaysValidationState = null;
      allDays.forEach(({
        name
      }) => {
        if (!monitoredDaysValidationState) {
          monitoredDaysValidationState = errorStates[name];
        }
      });
      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactRouter.Prompt, {
        message: unsavedChangesMessage,
        when: unsavedChanges
      }), !isCreating && /*#__PURE__*/_react.default.createElement(_tripStatus.default, {
        monitoredTrip: monitoredTrip
      }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ControlLabel, null, "Selected itinerary:"), /*#__PURE__*/_react.default.createElement(_tripSummary.default, {
        monitoredTrip: monitoredTrip
      }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, {
        validationState: errorStates.tripName
      }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ControlLabel, null, "Please provide a name for this trip:"), /*#__PURE__*/_react.default.createElement(_formik.Field, {
        as: _reactBootstrap.FormControl,
        name: "tripName"
      }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormControl.Feedback, null), errors.tripName && /*#__PURE__*/_react.default.createElement(_reactBootstrap.HelpBlock, null, errors.tripName)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, {
        validationState: monitoredDaysValidationState
      }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ControlLabel, null, "What days do you take this trip?"), /*#__PURE__*/_react.default.createElement("div", null, allDays.map(({
        fullText,
        name,
        text
      }, index) => {
        const isDayDisabled = itineraryExistence && !itineraryExistence[name].valid;
        const boxClass = isDayDisabled ? 'alert-danger' : monitoredTrip[name] ? 'bg-primary' : '';
        const notAvailableText = isDayDisabled ? `Trip not available on ${fullText}` : null;
        return /*#__PURE__*/_react.default.createElement(TripDayLabel, {
          className: boxClass,
          key: index,
          title: notAvailableText
        }, /*#__PURE__*/_react.default.createElement("span", null, text), // Let users save an existing trip, even though it may not be available on some days.
        // TODO: improve checking trip availability.
        isDayDisabled && isCreating ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Glyphicon, {
          "aria-label": notAvailableText,
          glyph: "ban-circle"
        }) : /*#__PURE__*/_react.default.createElement(_formik.Field, {
          name: name,
          type: "checkbox"
        }));
      }), /*#__PURE__*/_react.default.createElement("div", {
        style: {
          clear: 'both'
        }
      })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.HelpBlock, null, itineraryExistence ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Your trip is available on the days of the week as indicated above.") : /*#__PURE__*/_react.default.createElement(_reactBootstrap.ProgressBar, {
        active: true,
        label: "Checking itinerary existence for each day of the week...",
        now: 100
      })), monitoredDaysValidationState && /*#__PURE__*/_react.default.createElement(_reactBootstrap.HelpBlock, null, "Please select at least one day to monitor."), /*#__PURE__*/_react.default.createElement(_formikErrorFocus.default, {
        align: "middle",
        duration: 200
      })));
    }
  }

} // Connect to redux store


const mapStateToProps = (state, ownProps) => {
  const {
    itineraryExistence
  } = state.user;
  return {
    itineraryExistence
  };
};

const mapDispatchToProps = {
  checkItineraryExistence: userActions.checkItineraryExistence,
  clearItineraryExistence: userActions.clearItineraryExistence
};

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

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

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