"use strict";

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

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

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

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

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

var callTakerActions = _interopRequireWildcard(require("../../actions/call-taker"));

var _config = require("../../util/config");

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

var _mailables = require("../../util/mailables");

var _styled = require("./styled");

var _draggableWindow = _interopRequireDefault(require("./draggable-window"));

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

/**
 * A window enabled through the Mailables module that allows Call Taker users
 * to generate a PDF with an invoice of items to be mailed to transit customers.
 */
class MailablesWindow extends _react.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "_addMailable", mailable => {
      if (!this.state.mailables.find(m => m.name === mailable.name)) {
        const mailables = [...this.state.mailables];
        mailables.push({ ...mailable,
          quantity: 1
        });
        this.setState({
          mailables
        });
      }
    });

    _defineProperty(this, "_removeMailable", mailable => {
      const mailables = [...this.state.mailables];
      const removeIndex = mailables.findIndex(m => m.name === mailable.name);
      mailables.splice(removeIndex, 1);
      this.setState({
        mailables
      });
    });

    _defineProperty(this, "_updateMailableField", (index, fieldName, value) => {
      const mailables = [...this.state.mailables];
      mailables[index] = { ...mailables[index],
        [fieldName]: value
      };
      this.setState({
        mailables
      });
    });

    _defineProperty(this, "_onClickCreateLetter", () => (0, _mailables.createLetter)(this.state, this.props.mailablesConfig));

    _defineProperty(this, "_updateLetterField", evt => {
      this.setState({
        [evt.target.id]: evt.target.value
      });
    });

    this.state = {
      mailables: []
    };
  }

  render() {
    const {
      callTaker,
      mailablesConfig,
      mailablesEnabled,
      toggleMailables
    } = this.props;
    if (!mailablesEnabled) return null;
    const {
      mailables: selectedMailables
    } = this.state;
    const {
      items
    } = mailablesConfig;
    if (!callTaker.mailables.visible) return null;
    const selectableMailables = items.filter(m => !selectedMailables.find(mailable => mailable.name === m.name));
    return /*#__PURE__*/_react.default.createElement(_draggableWindow.default, {
      footer: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
        bsSize: "xsmall",
        className: "pull-right",
        onClick: this._onClickCreateLetter,
        style: {
          marginRight: '5px',
          verticalAlign: 'bottom'
        }
      }, "Create Letter"),
      header: /*#__PURE__*/_react.default.createElement(_styled.WindowHeader, null, /*#__PURE__*/_react.default.createElement(_icon.default, {
        type: "envelope"
      }), " Mailables"),
      height: "300px",
      onClickClose: toggleMailables,
      scroll: false,
      style: {
        width: '600px'
      }
    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", null, "Customer Address"), _mailables.LETTER_FIELDS.map((row, r) => /*#__PURE__*/_react.default.createElement("div", {
      key: r
    }, row.map(f => /*#__PURE__*/_react.default.createElement("input", {
      id: f.fieldName,
      key: f.fieldName,
      onChange: this._updateLetterField,
      placeholder: f.placeholder,
      style: {
        margin: '5px'
      },
      value: this.state[f.fieldName]
    }))))), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        display: 'flex'
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: '50%'
      }
    }, /*#__PURE__*/_react.default.createElement("h4", {
      // Styling hack: extra pixel of padding so that the element height
      // matches the mirroring h4 that has a badge (which increases its
      // height ever so slightly).
      style: {
        paddingBottom: '1px'
      }
    }, "All Mailables"), /*#__PURE__*/_react.default.createElement(_styled.MailablesList, null, selectableMailables.map(mailable => /*#__PURE__*/_react.default.createElement(SelectableMailable, {
      key: mailable.name,
      mailable: mailable,
      onClick: this._addMailable
    })))), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: '50%'
      }
    }, /*#__PURE__*/_react.default.createElement("h4", null, "Selected Mailables ", /*#__PURE__*/_react.default.createElement(_reactBootstrap.Badge, null, selectedMailables.length)), /*#__PURE__*/_react.default.createElement(_styled.MailablesList, null, selectedMailables.length > 0 ? selectedMailables.map((mailable, i) => /*#__PURE__*/_react.default.createElement(SelectedMailable, {
      index: i,
      key: mailable.name,
      mailable: mailable,
      onRemove: this._removeMailable,
      updateField: this._updateMailableField
    })) : /*#__PURE__*/_react.default.createElement("div", {
      className: "text-muted"
    }, "No mailables selected.")))));
  }

}

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

    _defineProperty(this, "_onClick", () => this.props.onClick(this.props.mailable));
  }

  render() {
    const {
      mailable
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_styled.SelectableMailableButton, {
      className: "clear-button-formatting",
      onClick: this._onClick
    }, /*#__PURE__*/_react.default.createElement(MailableLabel, {
      mailable: mailable
    }));
  }

}

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

    _defineProperty(this, "_changeLargeFormat", evt => {
      const {
        index,
        updateField
      } = this.props;
      updateField(index, 'largeFormat', evt.target.checked);
    });

    _defineProperty(this, "_changeQuantity", evt => {
      const {
        index,
        updateField
      } = this.props;
      updateField(index, 'quantity', evt.target.value);
    });

    _defineProperty(this, "_onRemove", () => this.props.onRemove(this.props.mailable));
  }

  render() {
    const {
      index,
      mailable
    } = this.props;
    const id = `largeFormat-${index}`;
    return /*#__PURE__*/_react.default.createElement(_styled.SelectedMailableContainer, null, /*#__PURE__*/_react.default.createElement(MailableLabel, {
      mailable: mailable
    }), /*#__PURE__*/_react.default.createElement(_styled.SelectedMailableOptionsContainer, null, /*#__PURE__*/_react.default.createElement("input", {
      min: 0,
      onChange: this._changeQuantity,
      step: 1,
      style: {
        marginRight: '5px',
        width: '50px'
      },
      type: "number",
      value: mailable.quantity
    }), mailable.largePrint && /*#__PURE__*/_react.default.createElement("div", {
      style: {
        marginTop: '5px'
      }
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: id,
      onChange: this._changeLargeFormat,
      type: "checkbox",
      value: mailable.largeFormat
    }), /*#__PURE__*/_react.default.createElement("label", {
      htmlFor: id,
      style: {
        marginLeft: '5px'
      }
    }, "Large format?")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
      bsStyle: "link",
      onClick: this._onRemove
    }, "Remove")));
  }

}

function MailableLabel({
  mailable
}) {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "overflow-ellipsis",
    title: mailable.name
  }, mailable.name);
}

const mapStateToProps = (state, ownProps) => {
  return {
    callTaker: state.callTaker,
    mailablesConfig: (0, _config.getModuleConfig)(state, _config.Modules.MAILABLES),
    mailablesEnabled: (0, _config.isModuleEnabled)(state, _config.Modules.MAILABLES)
  };
};

const mapDispatchToProps = {
  toggleMailables: callTakerActions.toggleMailables
};

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

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

//# sourceMappingURL=mailables-window.js