import React from 'react'
import { Provider } from 'react-redux'
import ReactDOM from 'react-dom'
import { store } from '../store'

class ModalBase extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      component: null,
      componentProps: {},
      isHidden: true
    }
  }

  close() {
    if (modalBase != null)
      modalBase.setState({
        component: null,
        componentProps: null,
        isHidden: true
      })
    // Toggle overflow style on NoteList
    const list = document.querySelector(
      '.NoteList__list___browser-main-NoteList-'
    )
    list.style.overflow = 'auto'
  }

  render() {
    return (
      <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
        <div onClick={e => this.close(e)} className='modalBack' />
        {this.state.component == null ? null : (
          <Provider store={store}>
            <this.state.component
              {...this.state.componentProps}
              close={this.close}
            />
          </Provider>
        )}
      </div>
    )
  }
}

const el = document.createElement('div')
document.body.appendChild(el)
const modalBase = ReactDOM.render(<ModalBase />, el)

export function openModal(component, props) {
  if (modalBase == null) {
    return
  }
  // Hide scrollbar by removing overflow when modal opens
  const list = document.querySelector(
    '.NoteList__list___browser-main-NoteList-'
  )
  list.style.overflow = 'hidden'
  document.body.setAttribute('data-modal', 'open')
  modalBase.setState({
    component: component,
    componentProps: props,
    isHidden: false
  })
}

export function closeModal() {
  if (modalBase == null) {
    return
  }
  modalBase.close()
}

export function isModalOpen() {
  return !modalBase.state.isHidden
}

export default {
  open: openModal,
  close: closeModal,
  isOpen: isModalOpen
}