import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "../styled-jsx.es.js";
import React, { useState, useRef, useEffect } from 'react';
import { useFloating, offset, flip, shift, arrow } from '@floating-ui/react-dom';
import { useTheme } from '@helpdice/theme';
import { createPortal } from 'react-dom';
var Tooltip = function Tooltip(_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;
  var theme = useTheme();
  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 arrowRef = useRef(null);
  var _useFloating = useFloating({
      placement: placement,
      middleware: [offset(8), flip(), shift({
        padding: 5
      }), arrow({
        element: arrowRef
      })]
    }),
    x = _useFloating.x,
    y = _useFloating.y,
    refs = _useFloating.refs,
    strategy = _useFloating.strategy;
  useEffect(function () {
    var timer;
    if (open) {
      timer = setTimeout(function () {
        return setShow(true);
      }, delay);
    } else {
      setShow(false);
    }
    return function () {
      return clearTimeout(timer);
    };
  }, [open, delay]);
  var handleMouseEnter = function handleMouseEnter() {
    return setOpen(true);
  };
  var handleMouseLeave = function handleMouseLeave() {
    return setOpen(false);
  };
  var handleTouchStart = function handleTouchStart() {
    setOpen(true);
    setTimeout(function () {
      return setOpen(false);
    }, 2000); // auto-hide
  };

  // const staticSide = {
  //   top: 'bottom',
  //   right: 'left',
  //   bottom: 'top',
  //   left: 'right',
  // }[finalPlacement.split('-')[0]];

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    ref: refs.setReference,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    onTouchStart: handleTouchStart,
    className: _JSXStyle.dynamic([["2501444323", [theme.palette.accents_7, duration, duration, duration]]]) + " " + "tooltip-reference"
  }, children), show && x != null && y != null ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
    ref: refs.setFloating,
    style: {
      position: strategy,
      top: y !== null && y !== void 0 ? y : 0,
      left: x !== null && x !== void 0 ? x : 0,
      zIndex: 9999,
      // opacity: show ? 1 : 0,
      // visibility: x == null || y == null ? 'hidden' : 'visible',
      transitionProperty: 'opacity, transform',
      transitionDuration: "".concat(duration, "ms")
    },
    className: _JSXStyle.dynamic([["2501444323", [theme.palette.accents_7, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
  }, text), document.body) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2501444323",
    dynamic: [theme.palette.accents_7, duration, duration, duration]
  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_7, ";color:white;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;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}.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;}@-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);}}.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 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 Tooltip;