"use strict";

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

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const mobx_react_1 = require("xmobx/mobx-react");

const mobx_1 = require("xmobx/mobx");

const exotic_1 = require("exotic");

const forms_1 = require("../../..");

const words_1 = require("../../../../words");

const fixture_1 = require("./fixture");

const state_1 = require("./state");

const styled_1 = require("./styled");

class FormStateCard extends forms_1.FormState {
  constructor() {
    super(...arguments);
    this.inputsList = fixture_1.inputList;
  }

}

const SubmitButton = props => react_1.default.createElement(styled_1.StyledSubmitButton, Object.assign({}, props));

const CancelButton = props => react_1.default.createElement(styled_1.StyledCancel, Object.assign({}, props));

const fieldsToDisable = ['cardFirstName', 'cardLastName', 'cardNumber', 'expirationMonth', 'expirationYear', 'securityCode'];
/**
 * @todo this is missing typings!!!
 */

let FormCard = class FormCard extends forms_1.ObserverForm {
  constructor(props) {
    super(props);
    this.isSubmitButtonNeeded = !this.props.hasBlurValidation;
    this.isCancelButtonNeeded = !this.props.hasBlurValidation;
    this.SubmitButton = SubmitButton;
    this.CancelButton = CancelButton;

    this.handleSubmit = event => {
      const {
        isEditPayment,
        cardType,
        cardIdentifier
      } = this.props;
      event.preventDefault();
      const {
        hasSubmitValidation,
        onPaymentSubmit
      } = this.props;

      if (hasSubmitValidation === true) {
        state_1.paymentWithBillingAddressFormState.isValidForm = this.validateForm();

        if (state_1.paymentWithBillingAddressFormState.isValidForm && exotic_1.isFunction(onPaymentSubmit)) {
          const args = {
            cardType,
            cardIdentifier,
            state: this.state
          };
          const hasShippingAddress = onPaymentSubmit(args); // console.info('[PaymentWithBillingAddress] handleSubmit')
          // console.debug(hasShippingAddress)

          if (hasShippingAddress !== false && isEditPayment !== true) {
            this.state.inputsList.map(this.addFormReset);
          }
        }
      }
    };

    this.handleCancel = event => {
      event.preventDefault();
      const {
        onPaymentCancel
      } = this.props;

      if (exotic_1.isFunction(onPaymentCancel)) {
        onPaymentCancel(event);
      }
    };

    this.state = new FormStateCard();
  }

  setFormValue(inputState, item) {
    if (exotic_1.isObj(item) && exotic_1.isSafe(item[inputState.name]) && inputState.value !== item[inputState.name]) {
      inputState.setValue(item[inputState.name]);
    }
  }

  doPreFillForm(props, state) {
    const {
      item
    } = props;

    const toList = inputsList => exotic_1.isArray(inputsList) && inputsList;

    const list = toList(state.inputsList);
    list.map(inputState => {
      if (inputState.type === 'groupElements' && exotic_1.isArray(inputState.elementList)) {
        inputState.elementList.map(inputElementState => {
          this.setFormValue(inputElementState, item);
        });
      } else {
        this.setFormValue(inputState, item);
      }

      fieldsToDisable.map(fieldName => {
        if (inputState.name === fieldName) {
          inputState.isDisabled = true;
          inputState.validationType = 'none';
        }
      });
    });
  }

  setCheckBoxVisibility(state, isVisible) {
    state.isSelected = !isVisible;
    state.isHidden = isVisible;
  }

  setDefaultPaymentState() {
    const {
      isSelected
    } = this.props;
    const defaultPaymentState = this.state.get('defaultPaymentMethod');

    if (isSelected !== defaultPaymentState.isSelected) {
      defaultPaymentState.isSelected = isSelected;
    }
  }

  addFormReset(inputState) {
    if (inputState.type === 'text' || inputState.type === 'telephone') {
      inputState.setValue('');
      inputState.isValidInput = true;
    } else if (inputState.type === 'checkbox') {
      inputState.setValue(true);
      inputState.isValidInput = true;
    } // To reset groupElements


    if (inputState.elementList.length > 0) {
      inputState.elementList.forEach(inputElement => {
        this.addFormReset(inputElement);
      });
    }
  }

  componentWillMount() {
    state_1.paymentWithBillingAddressFormState.toggleBillingAddress(this);
    const {
      submitButtonLabel,
      cancelButtonLabel,
      submitButtonDataQa,
      cancelButtonDataQa
    } = this.props;
    this.defaultSubmitButtonLabel = exotic_1.isSafe(submitButtonLabel) ? submitButtonLabel : words_1.wording.submit;
    this.defaultCancelButtonLabel = exotic_1.isSafe(cancelButtonLabel) ? cancelButtonLabel : words_1.wording.cancel;
    this.submitDataQa = submitButtonDataQa;
    this.cancelDataQa = cancelButtonDataQa;
  }

  componentDidMount() {
    const {
      isEditPayment
    } = this.props;
    state_1.paymentWithBillingAddressFormState.setPaymentForm(this);

    if (isEditPayment === true) {
      this.doPreFillForm(this.props, this.state);
      const checkBoxState = this.state.get('billingAddressSameAsShipping');
      this.setCheckBoxVisibility(checkBoxState, true);
      this.setDefaultPaymentState();
    }
  }

  componentWillUpdate() {
    state_1.paymentWithBillingAddressFormState.toggleBillingAddress(this);
  }

  componentWillReceiveProps(nextProps) {
    const {
      isEditPayment,
      isExpanded
    } = nextProps;

    if (isEditPayment !== true && isExpanded === true) {
      this.state.inputsList.map(this.addFormReset);
    }

    if (isEditPayment === true) {
      this.setDefaultPaymentState();
      this.doPreFillForm(nextProps, this.state);
    }
  }

  componentWillUnmount() {
    this.state.inputsList.map(inputState => {
      this.resetFormState(inputState);
    });
  }

};
FormCard.defaultProps = {
  state: new FormStateCard()
};

tslib_1.__decorate([mobx_1.action.bound], FormCard.prototype, "doPreFillForm", null);

tslib_1.__decorate([mobx_1.action.bound], FormCard.prototype, "setCheckBoxVisibility", null);

tslib_1.__decorate([mobx_1.action.bound], FormCard.prototype, "setDefaultPaymentState", null);

tslib_1.__decorate([mobx_1.action.bound], FormCard.prototype, "addFormReset", null);

FormCard = tslib_1.__decorate([mobx_react_1.observer], FormCard);

class Form extends react_1.default.PureComponent {
  render() {
    const {
      className
    } = this.props;
    console.log('[PaymentWithBillingAddress] Form: ', this.props);
    return react_1.default.createElement(styled_1.Wrapper, {
      className: className
    }, react_1.default.createElement(FormCard, Object.assign({}, this.props)));
  }

}

exports.Form = Form;
exports.default = Form; //# sourceMappingURL=Form.js.map