<script>"use strict";
import TooltipArrow from "./TooltipArrow.svelte";
export let position = "top";
export let content;
let tooltipVisible = false;
const toggleTooltip = (visible) => {
  tooltipVisible = visible;
};
const arrowSize = -2;
$: arrowStyles = (() => {
  let styles = "";
  switch (position.split("-")[0]) {
    case "top":
      styles = `left: 50%; top: -10px; transform: translateX(-50%);`;
      break;
    case "bottom":
      styles = `left: 50%; transform: translateX(-50%); bottom: 0px;`;
      break;
    case "left":
      styles = `top: 50%; transform: translateY(-50%); left: -10px;`;
      break;
    case "right":
      styles = `top: 50%; transform: translateY(-50%); right: 0px;`;
      break;
  }
  return styles;
})();
$: tooltipStyles = (() => {
  let styles = "";
  switch (position) {
    case "top":
      styles = `bottom: calc(100% + ${arrowSize}px); left: 50%; transform: translateX(-50%);`;
      break;
    case "top-start":
      styles = `bottom: calc(100% + ${arrowSize}px); left: -${arrowSize + 12}px;`;
      break;
    case "top-end":
      styles = `bottom: calc(100% + ${arrowSize}px); right: -${arrowSize + 12}px;`;
      break;
    case "bottom":
      styles = `top: calc(100% + 6px); left: 50%; transform: translateX(-50%);`;
      break;
    case "bottom-start":
      styles = `top: calc(100% + 6px); left: -${arrowSize + 12}px;`;
      break;
    case "bottom-end":
      styles = `top: calc(100% + 6px); right: -${arrowSize + 12}px;`;
      break;
    case "left":
      styles = `right: calc(100% + -4px); top: 50%; transform: translateY(-50%);`;
      break;
    case "left-start":
      styles = `right: calc(100% + -4px); top: -${arrowSize + 12}px;`;
      break;
    case "left-end":
      styles = `right: calc(100% + -4px); bottom: -${arrowSize + 12}px;`;
      break;
    case "right":
      styles = `left: calc(100% + 8px); top: 50%; transform: translateY(-50%);`;
      break;
    case "right-start":
      styles = `left: calc(100% + 8px); top: -${arrowSize + 12}px;`;
      break;
    case "right-end":
      styles = `left: calc(100% + 8px); bottom: -${arrowSize + 12}px;`;
      break;
  }
  return styles;
})();
$: arrowRotationClass = (() => {
  switch (position.split("-")[0]) {
    case "top":
      return "rotate-0 -translate-x-[6px]";
    case "bottom":
      return "rotate-180 -translate-x-[6px]";
    case "left":
      return "-rotate-90 -translate-y-[4px]";
    case "right":
      return "rotate-90 -translate-y-[4px]";
    default:
      return "rotate-0 -translate-x-[6px]";
  }
})();
</script>

<!-- Tooltip container -->
<div
	class="relative inline-block"
	role="tooltip"
	on:mouseenter={() => toggleTooltip(true)}
	on:mouseleave={() => toggleTooltip(false)}
>
	<slot></slot>

	<!-- Arrow Container -->
	<div
		class="absolute w-0 h-0 border-solid z-[1000] transition-opacity duration-[250ms] ease-in-out shadow"
		class:opacity-0={!tooltipVisible}
		class:opacity-100={tooltipVisible}
		class:pointer-events-none={!tooltipVisible}
		class:pointer-events-auto={tooltipVisible}
		style={`${arrowStyles}`}
	>
		<TooltipArrow className={`w-[12px] h-[8px] ${arrowRotationClass}`} />
		<!-- Tooltip Box -->
		<div
			class="absolute text-base-50 font-[500] text-lg leading-base z-[1000] bg-stone-700 rounded py-2 px-3 max-w-52 w-max"
			style={tooltipStyles}
		>
			<div>{content}</div>
		</div>
	</div>
</div>
