import _ from "lodash"
import React, { ReactNode } from "react"
import ReactDOM from "react-dom"
import { useEffect, useRef, useState } from "react"

export interface PopoverHelpComponentProps {
  placement?: "top" | "right" | "bottom" | "left"

  /** hover is default */
  trigger?: "hover" | "click" | "focus"

  /** Override content. Defaults to gray question circle */
  content?: ReactNode
}

/** Shows a popover when help icon is clicked. Needs bootstrap */
const PopoverHelpComponent: React.FC<PopoverHelpComponentProps> = (props) => {
  const spanRef = useRef<HTMLAnchorElement | null>(null)
  const [Popover, setPopover] = useState<any>(null)

  // Load popover module (bootstrap which interferes with Node.js)
  useEffect(() => {
    import("bootstrap/js/dist/popover").then(PopoverModule => {
      setPopover(() => PopoverModule.default)
    })
  }, [])

  useEffect(() => {
    const el = spanRef.current
    let popoverInstance: any = null

    if (el && Popover) {
      // Create div with content
      const contentDiv = document.createElement("div")
      ReactDOM.render(props.children as any, contentDiv)
      popoverInstance = new Popover(el, {
        content: contentDiv,
        trigger: props.trigger || "hover",
        placement: props.placement || "top",
        html: true
      })
    }

    return () => {
      if (popoverInstance) {
        popoverInstance.dispose()
      }
    }
  }, [Popover, props.children, props.trigger, props.placement])

  return (
    <a ref={spanRef} tabIndex={0}>
      {
        props.content ? 
        props.content : 
        <span className="text-muted" style={{ cursor: "pointer" }}>
          <i className="fas fa-info-circle"/>
        </span>
      }
    </a>
  )
}

export default PopoverHelpComponent