"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Dialog = Dialog;
exports.DialogTwo = DialogTwo;
exports["default"] = exports.TopMostModal = exports.TopModal = void 0;

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

var _FreezeLayer = _interopRequireDefault(require("../freezelayer/FreezeLayer.skeleton"));

var _Modal = _interopRequireDefault(require("./Modal"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var ModalConsumer = /*#__PURE__*/function (_React$Component) {
  _inherits(ModalConsumer, _React$Component);

  var _super = _createSuper(ModalConsumer);

  function ModalConsumer(props) {
    var _this;

    _classCallCheck(this, ModalConsumer);

    _this = _super.call(this, props);
    _this.state = {
      showModal: false,
      textValue: '',
      showTopModal: false,
      showModalWithoutOverlay: false
    };
    _this.handleShow = _this.handleShow.bind(_assertThisInitialized(_this));
    _this.handleTopModal = _this.handleTopModal.bind(_assertThisInitialized(_this));
    _this.handleHide = _this.handleHide.bind(_assertThisInitialized(_this));
    _this.changeHandler = _this.changeHandler.bind(_assertThisInitialized(_this));
    _this.handleModalWithoutOverlay = _this.handleModalWithoutOverlay.bind(_assertThisInitialized(_this));
    _this.escapeHandler = _this.escapeHandler.bind(_assertThisInitialized(_this));
    _this.focusTextBox = _this.focusTextBox.bind(_assertThisInitialized(_this));
    _this.elementRef = /*#__PURE__*/_react["default"].createRef();
    _this.overlayRef = /*#__PURE__*/_react["default"].createRef();
    _this.pageRef = /*#__PURE__*/_react["default"].createRef();
    return _this;
  }

  _createClass(ModalConsumer, [{
    key: "handleModalWithoutOverlay",
    value: function handleModalWithoutOverlay() {
      var toggleState = !this.state.showModalWithoutOverlay;
      console.log('Inside handleModalWithoutOverlay CBF'); // this.setState({ showModalWithoutOverlay: toggleState });

      this.setState(function (state, props) {
        return {
          showModalWithoutOverlay: toggleState
        };
      }, function () {// this.callAutoCloseFn();
      });
    }
  }, {
    key: "handleTopModal",
    value: function handleTopModal() {
      var toggleState = !this.state.showTopModal;
      this.setState({
        showTopModal: toggleState
      });
    }
  }, {
    key: "handleShow",
    value: function handleShow() {
      this.setState({
        showModal: true
      });
    }
  }, {
    key: "handleHide",
    value: function handleHide() {
      console.log('Inside Handle Hide Method of App');
      var textBoxValue = this.state.textValue;
      var lengthOfTextValue = textBoxValue.length;
      console.log(lengthOfTextValue);

      if (lengthOfTextValue === 0) {
        this.setState({
          showModal: false
        });
      }
    }
  }, {
    key: "escapeHandler",
    value: function escapeHandler(event) {
      console.log('inside keydown handler consumer.js', event.key);

      if (event.key === 'Escape') {
        console.log('Inside Escape Key Down case for Text Box');
        this.setState({
          textValue: ''
        });
      }
    }
  }, {
    key: "changeHandler",
    value: function changeHandler(event) {
      this.setState({
        textValue: event.target.value
      });
    }
  }, {
    key: "focusTextBox",
    value: function focusTextBox() {
      this.elementRef.current.focus();
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      // Show a Modal on click.
      // (In a real app, don't forget to use ARIA attributes
      // for accessibility!)
      console.log(this.props);
      var modal = this.state.showModal ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], _extends({
        freezeLayer: function freezeLayer(props) {
          return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], props);
        }
      }, this.props, {
        modalrootNode: document.getElementById('modal-root'),
        modalContainerNode: document.createElement('div'),
        focusDialogReference: function focusDialogReference() {
          _this2.focusTextBox();
        },
        pageElementNode: this.pageRef,
        closeDialogReference: function closeDialogReference() {
          _this2.handleHide();
        }
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: "modal",
        role: "dialog",
        style: {
          border: '1px solid red',
          height: '250px',
          width: '400px'
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          textAlign: 'center',
          fontWeight: 'bold'
        }
      }, "Dialog 1"), /*#__PURE__*/_react["default"].createElement("p", {
        style: {
          display: 'inline-block'
        }
      }, "Triggered by Open a Dialog button."), /*#__PURE__*/_react["default"].createElement("p", null, ' ', /*#__PURE__*/_react["default"].createElement("button", {
        key: "1",
        onClick: this.handleHide,
        style: {
          "float": 'right',
          cursor: 'pointer'
        }
      }, /*#__PURE__*/_react["default"].createElement("b", null, "X")), /*#__PURE__*/_react["default"].createElement("input", {
        type: "text",
        key: "exp_text",
        ref: this.elementRef,
        value: this.state.textValue,
        onChange: this.changeHandler,
        onKeyDown: this.escapeHandler
      })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
        key: "2",
        style: {
          cursor: 'pointer'
        },
        onClick: this.handleTopModal
      }, ' ', "Open Dialog 2", ' ')), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
        key: "3"
      }, "Dummy Button 2")))) : null;
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
        id: "modal-root"
      }), /*#__PURE__*/_react["default"].createElement("div", {
        id: "modal-root1"
      }), /*#__PURE__*/_react["default"].createElement("div", {
        id: "overlay",
        ref: this.overlayRef
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: "app"
      }, ' ', /*#__PURE__*/_react["default"].createElement("h3", null, "Modal Support For UCL using react portal technique:"), /*#__PURE__*/_react["default"].createElement("p", null, ' ', "This implementation supports the rendering of floating UIs like Alert,Confirm Dialogs, Notification Messages, Pop-overs,etc.."), /*#__PURE__*/_react["default"].createElement("b", null, " Why Modal Implementation exists? "), /*#__PURE__*/_react["default"].createElement("p", null, ' ', /*#__PURE__*/_react["default"].createElement("span", {
        style: {
          backgroundColor: 'yellow'
        }
      }, ' ', "Reusable technique to avoid the duplication in the implementation of the required features of floating UIs like", ' '), /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Trapping keyboard focus within the top most floating UI."), /*#__PURE__*/_react["default"].createElement("li", null, " Closes the floating UI when user presses the escape key "), /*#__PURE__*/_react["default"].createElement("li", null, "Maintaining the focus order, to correctly focus on the initiator UI, when a floating UI got closed."), /*#__PURE__*/_react["default"].createElement("li", null, ' ', "Overlay Support to prevent accessing the underlying application while floating UI exists.", ' ')), ' '), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("button", {
        ref: this.pageRef,
        onClick: this.handleShow,
        style: {
          cursor: 'pointer'
        }
      }, "Open a Dialog"), modal, this.state.showTopModal ? /*#__PURE__*/_react["default"].createElement(TopModal, {
        toggleHandler: this.handleModalWithoutOverlay,
        closeDialogReference: function closeDialogReference() {
          _this2.handleTopModal();
        }
      }) : null, this.state.showModalWithoutOverlay ? /*#__PURE__*/_react["default"].createElement(TopMostModal, {
        closeDialogReference: function closeDialogReference() {
          _this2.handleModalWithoutOverlay();
        }
      }) : null));
    }
  }]);

  return ModalConsumer;
}(_react["default"].Component);

exports["default"] = ModalConsumer;

var TopModal = /*#__PURE__*/function (_React$Component2) {
  _inherits(TopModal, _React$Component2);

  var _super2 = _createSuper(TopModal);

  function TopModal(props) {
    var _this3;

    _classCallCheck(this, TopModal);

    _this3 = _super2.call(this, props);
    _this3.elementRef = /*#__PURE__*/_react["default"].createRef();
    _this3.focusElement = _this3.focusElement.bind(_assertThisInitialized(_this3));
    return _this3;
  }

  _createClass(TopModal, [{
    key: "focusElement",
    value: function focusElement() {
      this.elementRef.current.focus();
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      console.log(this.props);
      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Modal["default"], _extends({}, this.props, {
        freezeLayer: function freezeLayer(props) {
          return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], props);
        },
        modalrootNode: document.getElementById('modal-root1'),
        focusDialogReference: function focusDialogReference() {
          _this4.focusElement();
        },
        modalContainerNode: document.createElement('div'),
        closeDialogReference: function closeDialogReference() {
          _this4.props.closeDialogReference();
        }
      }), /*#__PURE__*/_react["default"].createElement(Dialog, {
        elementRef: this.elementRef,
        closeDialogReference: this.props.closeDialogReference,
        toggleHandler: this.props.toggleHandler
      })));
    }
  }]);

  return TopModal;
}(_react["default"].Component);

exports.TopModal = TopModal;

var TopMostModal = /*#__PURE__*/function (_React$Component3) {
  _inherits(TopMostModal, _React$Component3);

  var _super3 = _createSuper(TopMostModal);

  function TopMostModal(props) {
    var _this5;

    _classCallCheck(this, TopMostModal);

    _this5 = _super3.call(this, props);
    _this5.withoutoverlayref = /*#__PURE__*/_react["default"].createRef();
    _this5.focusElement = _this5.focusElement.bind(_assertThisInitialized(_this5));
    return _this5;
  }

  _createClass(TopMostModal, [{
    key: "focusElement",
    value: function focusElement() {
      this.withoutoverlayref.current.focus();
    }
  }, {
    key: "render",
    value: function render() {
      var _this6 = this;

      console.log(this.props);
      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Modal["default"], _extends({}, this.props, {
        freezeLayer: function freezeLayer(props) {
          return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], props);
        },
        modalrootNode: document.getElementById('modal-root1'),
        focusDialogReference: function focusDialogReference() {
          _this6.focusElement();
        },
        closeDialogReference: function closeDialogReference() {
          _this6.props.closeDialogReference();
        },
        modalContainerNode: document.createElement('div')
      }), /*#__PURE__*/_react["default"].createElement(DialogTwo, {
        elementRef: this.withoutoverlayref,
        closeDialogReference: this.props.closeDialogReference
      })));
    }
  }]);

  return TopMostModal;
}(_react["default"].Component);

exports.TopMostModal = TopMostModal;

function Dialog(props) {
  console.log(props);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "modal1",
    role: "dialog",
    style: {
      border: '1px solid green',
      height: '200px',
      width: '500px'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", null, "Sample Input", /*#__PURE__*/_react["default"].createElement("input", {
    type: "text",
    ref: props.elementRef,
    key: "exp1_text"
  }), /*#__PURE__*/_react["default"].createElement("button", {
    key: "2",
    onClick: props.closeDialogReference,
    style: {
      "float": 'right',
      cusrsor: 'pointer',
      position: 'relative',
      top: '-20px'
    }
  }, /*#__PURE__*/_react["default"].createElement("b", null, "X")), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
    key: "4",
    style: {
      cursor: 'pointer'
    },
    onClick: props.toggleHandler
  }, "Open Dialog Without Freeze", ' '))), /*#__PURE__*/_react["default"].createElement("br", null));
}

function DialogTwo(props) {
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "modal2",
    role: "dialog",
    style: {
      border: '1px solid yellow',
      height: '200px',
      width: '500px'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", null, "Sample Input 2", /*#__PURE__*/_react["default"].createElement("input", {
    type: "text",
    ref: props.elementRef,
    key: "exp2_text"
  }), /*#__PURE__*/_react["default"].createElement("button", {
    key: "22",
    onClick: props.closeDialogReference,
    style: {
      "float": 'right',
      cusrsor: 'pointer',
      position: 'relative',
      top: '-20px'
    }
  }, /*#__PURE__*/_react["default"].createElement("b", null, "X"))), /*#__PURE__*/_react["default"].createElement("br", null));
}