import React from 'react'
import toClassName from 'classnames'
import { node, any, string, boolean } from 'prop-types'
import { createPortal } from 'react-dom'
import { isObj, isFunction, isElement, isUndefined, isString } from 'exotic'
// import { Measure } from 'uxui/interface/InterfaceEvents/Measure'

// breaks for fixed position, dark
// .portal {
//   transition: transform .1s;
//   transform: scale(1);
//   &.hidden {
//     transform: scale(0);
//   }
// }
// transform: translateZ(99px);
// const styles = styled.todo `
//   .portal {
//     transition: opacity .1s, max-height .1s;
//     opacity: 1;
//     max-height: 100vh;
//     &.hidden {
//       opacity: 0;
//       pointer-events: none;
//       max-height: 0;
//       overflow: hidden;
//     }
//   }
// `

// @styles
/**
 * @api https://reactjs.org/docs/portals.html
 * @property {HTMLDivElement} defaultNode
 */
class VirtualPortal extends React.PureComponent {
  static propTypes = {
    className: string,
    children: node.isRequired,
    node: any,
    id: string,
    isVisible: boolean,
  }

  // or @computed?
  getClassName() {
    return toClassName('virtual-portal', this.props.className, {
      visible: this.props.isVisible,
      hidden: this.props.isVisible === false,
    })
  }
  render() {
    return <div className={this.getClassName()} id={this.props.id}>{this.props.children}</div>
  }
}

export { VirtualPortal }
export default VirtualPortal