import React from 'react';
import FreezeLayer from '../freezelayer/FreezeLayer.skeleton';
import Modal from './Modal';


export default class ModalConsumer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showModal: false,
        textValue: '',
        showTopModal: false,
        showModalWithoutOverlay: false
      };
  
      this.handleShow = this.handleShow.bind(this);
      this.handleTopModal = this.handleTopModal.bind(this);
      this.handleHide = this.handleHide.bind(this);
      this.changeHandler = this.changeHandler.bind(this);
      this.handleModalWithoutOverlay = this.handleModalWithoutOverlay.bind(this);
      this.escapeHandler = this.escapeHandler.bind(this);
      this.focusTextBox = this.focusTextBox.bind(this);
      this.elementRef = React.createRef();
      this.overlayRef = React.createRef();
      this.pageRef = React.createRef();
    }
    handleModalWithoutOverlay() {
      let toggleState = !this.state.showModalWithoutOverlay;
      console.log('Inside handleModalWithoutOverlay CBF');
      // this.setState({ showModalWithoutOverlay: toggleState });
      this.setState(
        function (state, props) {
          return {
            showModalWithoutOverlay: toggleState
          };
        },
        () => {
          // this.callAutoCloseFn();
        }
      );
    }
    handleTopModal() {
      let toggleState = !this.state.showTopModal;
      this.setState({ showTopModal: toggleState });
    }
    handleShow() {
      this.setState({ showModal: true });
    }
  
    handleHide() {
      console.log('Inside Handle Hide Method of App');
      let textBoxValue = this.state.textValue;
      let lengthOfTextValue = textBoxValue.length;
      console.log(lengthOfTextValue);
      if (lengthOfTextValue === 0) {
        this.setState({ showModal: false });
      }
    }
    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: '' });
      }
    }
    changeHandler(event) {
      this.setState({ textValue: event.target.value });
    }
    focusTextBox()
    {
        this.elementRef.current.focus();
    }
  
    render() {
      // Show a Modal on click.
      // (In a real app, don't forget to use ARIA attributes
      // for accessibility!)
      console.log(this.props);
      const modal = this.state.showModal ? (
        <Modal
        freezeLayer ={ (props)=> {
            return <FreezeLayer {...props}/> 
        }}
        {...this.props}
        modalrootNode={document.getElementById('modal-root')}
        modalContainerNode={document.createElement('div')}
         focusDialogReference={() => {
              this.focusTextBox();
          }}
          pageElementNode={this.pageRef}
          closeDialogReference={() => {
            this.handleHide();
          }}
          
        >
          <div
            className="modal"
            role="dialog"
            style={{
              border: '1px solid red',
              height: '250px',
              width:'400px'
            }}
          >
            <div style={{ textAlign: 'center', fontWeight: 'bold' }}>
              Dialog 1
            </div>
            <p style={{display: 'inline-block' }}>
              Triggered by Open a Dialog button.
            </p>
            <p>
              {' '}
              <button
                key="1"
                onClick={this.handleHide}
                style={{
                  float: 'right',
                  cursor: 'pointer'
                  
                }}
              >
                <b>X</b>
              </button>
              <input
                type="text"
                key="exp_text"
                ref={this.elementRef}
                value={this.state.textValue}
                onChange={this.changeHandler}
                onKeyDown={this.escapeHandler}
              />
            </p>
            <br />
            <p>
              <button
                key="2"
                style={{ cursor: 'pointer' }}
                onClick={this.handleTopModal}
              >
                {' '}
                Open Dialog 2{' '}
              </button>
            </p>
            <br />
            <p>
              <button key="3">Dummy Button 2</button>
            </p>
          </div>
        </Modal>
      ) : null;
  
      return (
        <>
            <div id="modal-root"></div>  
            
            <div id="modal-root1"></div>
          <div id="overlay" ref={this.overlayRef}></div>
          <div className="app">
            {' '}
            <h3>Modal Support For UCL using react portal technique:</h3>
            <p>
              {' '}
              This implementation supports the rendering of floating UIs like
              Alert,Confirm Dialogs, Notification Messages, Pop-overs,etc..
            </p>
            <b> Why Modal Implementation exists? </b>
            <p>
              {' '}
              <span style={{ backgroundColor: 'yellow' }}>
                {' '}
                Reusable technique to avoid the duplication in the implementation
                of the required features of floating UIs like{' '}
              </span>
              <ul>
                <li>Trapping keyboard focus within the top most floating UI.</li>
                <li> Closes the floating UI when user presses the escape key </li>
                <li>
                  Maintaining the focus order, to correctly focus on the initiator
                  UI, when a floating UI got closed.
                </li>
                <li>
                  {' '}
                  Overlay Support to prevent accessing the underlying application
                  while floating UI exists.{' '}
                </li>
              </ul>{' '}
            </p>
            <br />
            <button
              ref={this.pageRef}
              onClick={this.handleShow}
              style={{ cursor: 'pointer' }}
            >
              Open a Dialog
            </button>
            {modal}
            {this.state.showTopModal ? (
              <TopModal
                toggleHandler={this.handleModalWithoutOverlay}
                closeDialogReference={() => {
                  this.handleTopModal();
                }}
              />
            ) : null}
            {this.state.showModalWithoutOverlay ? (
              <TopMostModal
              closeDialogReference={() => {
                  this.handleModalWithoutOverlay();
                }}
              />
            ) : null}
          </div>
        </>
      );
    }
  }

  export class TopModal extends React.Component {
    constructor(props) {
      super(props);
  
      this.elementRef = React.createRef();
      this.focusElement = this.focusElement.bind(this);
    }
  focusElement()
  {
    this.elementRef.current.focus();   
  }
    render() {
      console.log(this.props);
      return (
        <div>
          <Modal
            {...this.props}
            freezeLayer ={ (props)=> {
            return <FreezeLayer {...props}/> 
        }}
            modalrootNode={document.getElementById('modal-root1')}
            focusDialogReference={()=>{this.focusElement();
            }}
            modalContainerNode={document.createElement('div')}
            closeDialogReference={() => {
              this.props.closeDialogReference();
            }}
          >
            <Dialog
              elementRef={this.elementRef}
              closeDialogReference={this.props.closeDialogReference}
              toggleHandler={this.props.toggleHandler}
            ></Dialog>
          </Modal>
        </div>
      );
    }
  }

  export class TopMostModal extends React.Component {
    constructor(props) {
      super(props);
  
      this.withoutoverlayref = React.createRef();
      this.focusElement = this.focusElement.bind(this);
    }
    focusElement()
    {
        this.withoutoverlayref.current.focus();
    }
    render() {
      console.log(this.props);
      return (
        <div>
          <Modal
              {...this.props}
              freezeLayer ={ (props)=> {
            return <FreezeLayer {...props}/> 
        }}
            modalrootNode={document.getElementById('modal-root1')} 
            focusDialogReference={()=>{this.focusElement();
            }} 
            closeDialogReference={() => {
              this.props.closeDialogReference();
            }}
            
            modalContainerNode={document.createElement('div')}
          >
            <DialogTwo
              elementRef={this.withoutoverlayref}
              closeDialogReference={this.props.closeDialogReference}
            ></DialogTwo>
          </Modal>
        </div>
      );
    }
  }
  export function Dialog(props) {
    console.log(props);
    return (
      <div
        className="modal1"
        role="dialog"
        style={{
          border: '1px solid green',
          height: '200px',
          width:'500px'
        }}
      >
        <div>
          Sample Input
          <input type="text" ref={props.elementRef} key="exp1_text" />
          <button
            key="2"
            onClick={props.closeDialogReference}
            style={{
              float: 'right',
              cusrsor: 'pointer',
              position: 'relative',
              top: '-20px'
            }}
          >
            <b>X</b>
          </button>
          <p>
            <button
              key="4"
              style={{ cursor: 'pointer' }}
              onClick={props.toggleHandler}
            >
              Open Dialog Without Freeze{' '}
            </button>
          </p>
        </div>
  
        <br />
      </div>
    );
  }

  
export function DialogTwo(props) {
  return (
    <div
      className="modal2"
      role="dialog"
      style={{
        border: '1px solid yellow',
        height: '200px',
        width:'500px'
      }}
    >
      <div>
        Sample Input 2
        <input type="text" ref={props.elementRef} key="exp2_text" />
        <button
          key="22"
          onClick={props.closeDialogReference}
          style={{
            float: 'right',
            cusrsor: 'pointer',
            position: 'relative',
            top: '-20px'
          }}
        >
          <b>X</b>
        </button>
      </div>

      <br />
    </div>
  );
}

  
