function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }

import React, { useState, useCallback, useMemo } from 'react';
import FreezeLayer from '../freezelayer/FreezeLayer.skeleton';
import Modal from './Modal';
export default function ModalConsumer(props) {
  const [showmodal, setShowModal] = useState(false);
  const [showtopmodal, setShowTopModal] = useState(false);
  const [showmodalwithoutoverlay, setShowModalWithoutOverlay] = useState(false);
  let pageRef = /*#__PURE__*/React.createRef();
  const handleModalWithoutOverlay = useCallback(() => {
    let toggleState = !showmodalwithoutoverlay;
    setShowModalWithoutOverlay(toggleState);
  }, [showmodalwithoutoverlay]);
  const toggleTopModal = useCallback(() => {
    let toggleState = !showtopmodal;
    setShowTopModal(toggleState);
  }, [showtopmodal]);
  const handleShow = useCallback(() => {
    setShowModal(true);
  }, [showmodal]);
  const handleHide = useCallback(() => {
    setShowModal(false);
  }, [showmodal]); // Show a Modal on click.
  // (In a real app, don't forget to use ARIA attributes
  // for accessibility!)

  console.log('showmodal is', showmodal);
  console.log('showtopmodal is', showtopmodal);
  console.log('showmodalwithoutoverlay is', showmodalwithoutoverlay);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    id: "modal-root"
  }), /*#__PURE__*/React.createElement("div", {
    id: "modal-root1"
  }), /*#__PURE__*/React.createElement("div", {
    className: "app"
  }, ' ', /*#__PURE__*/React.createElement("h3", null, "Modal Support For UCL using react portal technique:"), /*#__PURE__*/React.createElement("p", null, ' ', "This implementation supports the rendering of floating UIs like Alert,Confirm Dialogs, Notification Messages, Pop-overs,etc.."), /*#__PURE__*/React.createElement("b", null, " Why Modal Implementation exists? "), /*#__PURE__*/React.createElement("div", null, ' ', /*#__PURE__*/React.createElement("span", null, ' ', "Reusable technique to avoid the duplication in the implementation of the required features of floating UIs like", ' '), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Trapping keyboard focus within the top most floating UI."), /*#__PURE__*/React.createElement("li", null, " Closes the floating UI when user presses the escape key "), /*#__PURE__*/React.createElement("li", null, "Maintaining the focus order, to correctly focus on the initiator UI, when a floating UI got closed."), /*#__PURE__*/React.createElement("li", null, ' ', "Overlay Support to prevent accessing the underlying application while floating UI exists.", ' ')), ' '), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("button", {
    ref: pageRef,
    onClick: handleShow,
    style: {
      cursor: 'pointer'
    },
    role: "modalrootbutton"
  }, "Open a Dialog"), showmodal ? /*#__PURE__*/React.createElement(ModalOne, _extends({
    handleHide: handleHide,
    toggleTopModal: toggleTopModal
  }, props)) : null, showtopmodal ? /*#__PURE__*/React.createElement(TopModal, {
    toggleHandler: handleModalWithoutOverlay,
    closeDialogReference: toggleTopModal
  }) : null, showmodalwithoutoverlay ? /*#__PURE__*/React.createElement(TopMostModal, {
    closeDialogReference: handleModalWithoutOverlay
  }) : null));
}
export function ModalOne(props) {
  const freezeFn = useCallback(props => /*#__PURE__*/React.createElement(FreezeLayer, props), [props.freezeLayer]);
  const modalrootNode = useMemo(() => document.getElementById('modal-root'), ["modal-root"]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, _extends({
    freezeLayer: freezeFn,
    modalname: "modal1"
  }, props, {
    modalrootNode: modalrootNode,
    closeDialogReference: props.handleHide
  }), /*#__PURE__*/React.createElement("div", {
    className: "modal",
    role: "dialog",
    style: {
      border: '1px solid red',
      height: '250px',
      width: '400px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'center',
      fontWeight: 'bold'
    },
    role: "dialogheader1"
  }, "Dialog 1"), /*#__PURE__*/React.createElement("p", {
    style: {
      display: 'inline-block'
    }
  }, "Triggered by Open a Dialog button."), /*#__PURE__*/React.createElement("p", null, ' ', /*#__PURE__*/React.createElement("button", {
    key: "1",
    onClick: props.handleHide,
    style: {
      float: 'right',
      cursor: 'pointer'
    },
    role: "closedialog1"
  }, /*#__PURE__*/React.createElement("b", null, "X"))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
    key: "2",
    style: {
      cursor: 'pointer'
    },
    onClick: props.toggleTopModal,
    role: "modalinitiator"
  }, ' ', "Open Dialog 2", ' ')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
    key: "3"
  }, "Dummy Button 2")))));
}
export function TopModal(props) {
  let elementRef = /*#__PURE__*/React.createRef();
  const freezeFn = useCallback(props => /*#__PURE__*/React.createElement(FreezeLayer, props), [props.freezeLayer]);
  const focusDialogReference = useCallback(() => {
    elementRef.current && elementRef.current.focus();
  }, [elementRef]);
  const closeDialogReference = useCallback(() => {
    let refValue = elementRef.current && elementRef.current.value;
    let refValueLength = 0;

    if (refValue != null) {
      refValueLength = refValue.length;
    }

    return refValueLength === 0 ? props.closeDialogReference() : null;
  }, [props.closeDialogReference]);
  const modalrootNode = useMemo(() => document.getElementById('modal-root1'), ["modal-root1"]); // console.log('Inside Top Modal Render', this.props);

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
    freezeLayer: freezeFn,
    modalname: "modal2",
    modalrootNode: modalrootNode,
    focusDialogReference: focusDialogReference,
    closeDialogReference: closeDialogReference
  }), /*#__PURE__*/React.createElement(Dialog, {
    elementRef: elementRef,
    closeDialogReference: closeDialogReference,
    toggleHandler: props.toggleHandler
  })));
}
export function Dialog(props) {
  //console.log(props);
  let [textBoxValue, setTextBoxValue] = useState('');

  function handleTextValueChange(event) {
    let value = event.target.value;
    setTextBoxValue(value);
  }

  function handleKeyDown(event) {
    let characterCount = textBoxValue.length;

    if (event.key === 'Escape') {
      setTextBoxValue("");
    }
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "modal1",
    role: "dialog",
    style: {
      border: '1px solid green',
      height: '200px',
      width: '500px'
    }
  }, /*#__PURE__*/React.createElement("div", null, "Sample Input", /*#__PURE__*/React.createElement("input", {
    type: "text",
    value: textBoxValue,
    onChange: handleTextValueChange,
    onKeyDown: handleKeyDown,
    ref: props.elementRef,
    key: "exp1_text"
  }), /*#__PURE__*/React.createElement("button", {
    key: "2",
    onClick: props.closeDialogReference,
    style: {
      float: 'right',
      cusrsor: 'pointer',
      position: 'relative',
      top: '-20px'
    },
    role: "closedialog2"
  }, /*#__PURE__*/React.createElement("b", null, "X")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
    key: "4",
    style: {
      cursor: 'pointer'
    },
    onClick: props.toggleHandler,
    role: "modalinitiatorwithoutoverlay"
  }, "Open Dialog Without Freeze", ' '))), /*#__PURE__*/React.createElement("br", null));
}
export function TopMostModal(props) {
  let withoutoverlayref = /*#__PURE__*/React.createRef();
  const freezeFn = useCallback(props => /*#__PURE__*/React.createElement(FreezeLayer, props), [props.freezeLayer]);
  const focusDialogReference = useCallback(() => {
    withoutoverlayref.current && withoutoverlayref.current.focus();
  }, [withoutoverlayref]);
  const closeDialogReference = useCallback(() => {
    props.closeDialogReference();
  }, [props.closeDialogReference]);
  const modalrootNode = useMemo(() => document.getElementById('modal-root1'), ["modal-root1"]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
    freezeLayer: freezeFn,
    modalname: "modal3",
    modalrootNode: modalrootNode,
    focusDialogReference: focusDialogReference,
    closeDialogReference: closeDialogReference
  }), /*#__PURE__*/React.createElement(DialogTwo, {
    elementRef: withoutoverlayref,
    closeDialogReference: closeDialogReference
  })));
}
export function DialogTwo(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "modal2",
    role: "dialog",
    style: {
      border: '1px solid yellow',
      height: '200px',
      width: '500px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    role: "innercontainerforlastdialog"
  }, "Last Dialog", /*#__PURE__*/React.createElement("input", {
    type: "text",
    ref: props.elementRef,
    key: "exp2_text"
  }), /*#__PURE__*/React.createElement("button", {
    key: "22",
    onClick: props.closeDialogReference,
    style: {
      float: 'right',
      cusrsor: 'pointer',
      position: 'relative',
      top: '-20px'
    },
    role: "closedialog3"
  }, /*#__PURE__*/React.createElement("b", null, "X"))), /*#__PURE__*/React.createElement("br", null));
}