"use strict";

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

const tslib_1 = require("tslib");

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

const react_dom_1 = require("react-dom");

const ally_1 = tslib_1.__importDefault(require("@skava/ally"));

const exotic_1 = require("exotic");

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

const Overlay_1 = require("../../../atoms/Overlay");

const Portal_1 = require("../../../features/Portal");

const CloseButton_1 = tslib_1.__importDefault(require("../CloseButton"));

const ModalContext_1 = require("../ModalContext");

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

const styled_2 = require("./styled"); // const Disabled = ally.maintain.disabled


const Hidden = ally_1.default.maintain.hidden;
const TabFocus = ally_1.default.maintain.tabFocus;
const FirstTab = ally_1.default.query.firstTabbable;
const Key = ally_1.default.when.key;
/**
 * @see https://christianheilmann.com/2015/08/30/quicky-fading-in-a-newly-created-element-using-css/
 */

let ModalOrganism = class ModalOrganism extends react_1.default.Component {
  /**
   * @see https://christianheilmann.com/2015/08/30/quicky-fading-in-a-newly-created-element-using-css/
   */
  constructor() {
    super(...arguments);
    /**
     * @todo why is this still here? just wcag?
     * do not use isHidden
     * @todo @name isVisible
     */

    this.state = {
      isHidden: true
    };

    this.setRef = dom => {
      this.dialog = dom;
    };
    /**
     * @todo probably want <Portal> here for id="modal"...
     */


    this.renderContext = context => {
      const allProps = Object.assign({}, this.props, context);

      const {
        className,
        isDefaultFocus,
        controller,
        onClose,
        state,
        children
      } = allProps,
            remainingProps = tslib_1.__rest(allProps
      /**
       * @todo renderOverlay, renderDialog, renderWrap, renderBoxWrap
       * @todo renderBox, renderCloseButton
       * @todo add `nowrap` for Portal...
       *
       * @todo innerRef={this.setRef} < currently using react findDOMNode
       */
      , ["className", "isDefaultFocus", "controller", "onClose", "state", "children"]);
      /**
       * @todo renderOverlay, renderDialog, renderWrap, renderBoxWrap
       * @todo renderBox, renderCloseButton
       * @todo add `nowrap` for Portal...
       *
       * @todo innerRef={this.setRef} < currently using react findDOMNode
       */


      return react_1.default.createElement(Portal_1.Portal, {
        id: "modal",
        className: className
      }, react_1.default.createElement(Overlay_1.Overlay, {
        key: "o",
        isVisible: state.isVisible,
        onClick: onClose
      }), react_1.default.createElement(styled_1.StyledDialog, Object.assign({
        open: state.isVisible,
        isVisible: state.isVisible,
        className: className
      }, remainingProps), react_1.default.createElement(styled_2.ModalBoxWrap, null, children)));
    };
  }
  /**
   * @deprecated
   */


  static get Title() {
    console.warn('@deprecated - do not use Modal.Title - import { ModalTitle } ');
    return styled_1.ModalTitle;
  }
  /**
   * @deprecated
   */


  static get CloseButton() {
    console.warn('@deprecated - do not use Modal.CloseButton - import { ModalCloseButton } ');
    return CloseButton_1.default;
  }

  static get Box() {
    console.warn('@deprecated - do not use Modal.Box - import { ModalBox } ');
    return styled_1.ModalBox;
  }

  static get ModalContext() {
    console.warn('@deprecated - do not use Modal.ModalContext - import { Provider } ');
    return props => react_1.default.createElement(ModalContext_1.Provider, Object.assign({}, props));
  }
  /* eslint-disable max-statements, react/no-find-dom-node, react/no-did-mount-set-state, react/no-set-state */


  componentDidMount() {
    this.setState({
      isHidden: false
    });
    this.bodyDOM = document.body;
    this.bodyDOM.classList.add('no-scroll');
    this.focusedElementBeforeDialogOpened = document.activeElement;

    try {
      const dialogDOM = react_dom_1.findDOMNode(this.dialog); // this.disabledHandle = Disabled({ filter: dialogDOM })

      this.focusHandle = TabFocus({
        context: dialogDOM
      });
      this.hiddenHandler = Hidden({
        filter: '#modal'
      });
      const element = FirstTab({
        context: dialogDOM,
        defaultToContext: true
      });
      this.keyHandler = Key({
        escape: (event, disengage) => {
          event.preventDefault();
          console.debug('pressed escape');
          disengage();
        }
      });

      if (exotic_1.isObj(element) && exotic_1.isFunction(element.focus) && this.props.isDefaultFocus) {
        element.focus();
      }
    } catch (allyException) {
      console.error(allyException);
    }
  }

  componentWillUnmount() {
    try {
      this.bodyDOM.classList.remove('no-scroll'); // this.disabledHandle.disengage()

      this.focusHandle.disengage();
      this.hiddenHandler.disengage();
      this.keyHandler.disengage();

      if (exotic_1.isObj(this.focusedElementBeforeDialogOpened)) {
        this.focusedElementBeforeDialogOpened.focus();
      }
    } catch (allyException) {
      console.error(allyException);
    }
  }

  render() {
    return react_1.default.createElement(ModalContext_1.Consumer, null, this.renderContext);
  }

};
ModalOrganism.defaultProps = {
  controller: {},
  isDefaultFocus: true
};
ModalOrganism = tslib_1.__decorate([mobx_react_1.observer], ModalOrganism);
exports.ModalOrganism = ModalOrganism;
exports.Modal = ModalOrganism;
exports.default = ModalOrganism; //# sourceMappingURL=ModalOrganism.js.map