import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "../styled-jsx.es.js";
import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
import { createPortal } from 'react-dom';
import { useTheme, useClasses } from '@helpdice/theme';
var OFFSET = 8;
var Notetip = function Notetip(_ref) {
  var children = _ref.children,
    text = _ref.text,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
    _ref$delay = _ref.delay,
    delay = _ref$delay === void 0 ? 0 : _ref$delay,
    _ref$duration = _ref.duration,
    duration = _ref$duration === void 0 ? 200 : _ref$duration,
    _ref$animation = _ref.animation,
    animation = _ref$animation === void 0 ? 'fade' : _ref$animation,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    className = _ref.className;
  var theme = useTheme();
  var referenceRef = useRef(null);
  var tooltipRef = useRef(null);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    show = _useState4[0],
    setShow = _useState4[1];
  var _useState5 = useState({
      top: 0,
      left: 0
    }),
    _useState6 = _slicedToArray(_useState5, 2),
    coords = _useState6[0],
    setCoords = _useState6[1];
  useEffect(function () {
    var timer;
    if (open) timer = setTimeout(function () {
      return setShow(true);
    }, delay);else setShow(false);
    return function () {
      return clearTimeout(timer);
    };
  }, [open, delay]);
  useLayoutEffect(function () {
    if (!show || !referenceRef.current || !tooltipRef.current) return;
    var refRect = referenceRef.current.getBoundingClientRect();
    var tipRect = tooltipRef.current.getBoundingClientRect();
    var top = 0;
    var left = 0;
    switch (placement) {
      case 'top':
        top = refRect.top - tipRect.height - OFFSET;
        left = refRect.left + refRect.width / 2 - tipRect.width / 2;
        break;
      case 'bottom':
        top = refRect.bottom + OFFSET;
        left = refRect.left + refRect.width / 2 - tipRect.width / 2;
        break;
      case 'left':
        top = refRect.top + refRect.height / 2 - tipRect.height / 2;
        left = refRect.left - tipRect.width - OFFSET;
        break;
      case 'right':
        top = refRect.top + refRect.height / 2 - tipRect.height / 2;
        left = refRect.right + OFFSET;
        break;
    }

    // Viewport collision handling
    var padding = 5;
    top = Math.max(padding, Math.min(top, window.innerHeight - tipRect.height - padding));
    left = Math.max(padding, Math.min(left, window.innerWidth - tipRect.width - padding));
    setCoords({
      top: top,
      left: left
    });
  }, [show, placement]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    ref: referenceRef,
    onMouseEnter: function onMouseEnter() {
      return setOpen(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setOpen(false);
    },
    onTouchStart: function onTouchStart() {
      setOpen(true);
      setTimeout(function () {
        return setOpen(false);
      }, 2000);
    },
    className: _JSXStyle.dynamic([["633836393", [theme.palette.accents_1, duration, duration, duration]]]) + " " + (useClasses('', className) || "")
  }, children), show && !disabled ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
    ref: tooltipRef,
    style: {
      position: 'fixed',
      top: coords.top,
      left: coords.left,
      transitionDuration: "".concat(duration, "ms")
    },
    className: _JSXStyle.dynamic([["633836393", [theme.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
  }, text), document.body) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "633836393",
    dynamic: [theme.palette.accents_1, duration, duration, duration]
  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_1, ";padding:4px 10px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:9999;opacity:0;}.fade.__jsx-style-dynamic-selector{-webkit-animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}.scale.__jsx-style-dynamic-selector{-webkit-animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}.slide.__jsx-style-dynamic-selector{-webkit-animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{to{opacity:1;}}@-webkit-keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@-webkit-keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}")));
};
export default Notetip;