/**
 * Tooltip animation preview components for the admin settings UI.
 */

import React from "react";
import { getExtensionTooltipAnimationDuration } from "./presentationConstants";

export type TooltipAnimationPreviewProps = {
  anim: string;
  tooltipBgColor: string;
  tooltipTextColor: string;
  tooltipFontSize: number | string;
  fadeInEnabled?: boolean;
  fadeOutEnabled?: boolean;
};

/**
 * Small tooltip animation preview tile (for animation picker grid).
 */
export function TooltipAnimationPreview({
  anim,
  tooltipBgColor,
  tooltipTextColor,
  tooltipFontSize,
  fadeInEnabled = true,
  fadeOutEnabled = false,
}: TooltipAnimationPreviewProps): React.ReactElement {
  const [tooltipKey, setTooltipKey] = React.useState(0);
  const [isHovered, setIsHovered] = React.useState(false);
  const [isHiding, setIsHiding] = React.useState(false);
  const hideTimeoutRef = React.useRef<number | null>(null);

  React.useEffect(() => {
    return () => {
      if (hideTimeoutRef.current) {
        clearTimeout(hideTimeoutRef.current);
      }
    };
  }, []);

  const handleMouseLeave = () => {
    if (fadeOutEnabled) {
      setIsHiding(true);
      hideTimeoutRef.current = window.setTimeout(() => {
        setIsHovered(false);
        setIsHiding(false);
      }, getExtensionTooltipAnimationDuration(anim));
    } else {
      setIsHovered(false);
      setIsHiding(false);
    }
  };

  const handleMouseEnter = () => {
    if (hideTimeoutRef.current) {
      clearTimeout(hideTimeoutRef.current);
      hideTimeoutRef.current = null;
    }
    setIsHiding(false);
    setIsHovered(true);
    setTooltipKey((prev) => prev + 1);
  };

  return (
    <div className="bwvs:flex bwvs:flex-col bwvs:items-center bwvs:gap-2">
      <div
        className="bwvs:relative bwvs:cursor-pointer bwvs:inline-block"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <div className="bwvs:w-12 bwvs:h-12 b3-wvs-bg-admin bwvs:legacy-border-2 b3-wvs-border-admin bwvs:rounded-md bwvs:flex bwvs:items-center bwvs:justify-center bwvs:text-white bwvs:font-semibold bwvs:text-xs bwvs:transition-transform bwvs:hover:scale-105">
          <span className="bwvs:select-none">A</span>
        </div>
        {isHovered &&
          (() => {
            const animateClass =
              anim !== "none" && fadeInEnabled && !isHiding
                ? `b3-wvs-animate-tooltip-${anim}`
                : "";
            const animateOutClass =
              anim !== "none" && isHiding && fadeOutEnabled
                ? `b3-wvs-animate-tooltip-${anim}-out`
                : "";

            return (
              <div
                key={tooltipKey}
                className={`bwvs:absolute bwvs:bottom-full bwvs:left-1/2 bwvs:mb-2 bwvs:px-3 bwvs:py-1.5 bwvs:rounded-sm bwvs:whitespace-nowrap bwvs:shadow-lg bwvs:pointer-events-none ${animateClass} ${animateOutClass}`}
                style={{
                  backgroundColor: tooltipBgColor,
                  color: tooltipTextColor,
                  fontSize: `${tooltipFontSize}px`,
                  transform: "translateX(-50%)",
                  ["--b3-wvs-tooltip-base-transform" as string]:
                    "translateX(-50%)",
                }}
              >
                Preview
                <div
                  className="bwvs:absolute bwvs:top-full bwvs:left-1/2 bwvs:w-0 bwvs:h-0"
                  style={{
                    borderLeft: "4px solid transparent",
                    borderRight: "4px solid transparent",
                    borderTop: `4px solid ${tooltipBgColor}`,
                    transform: "translateX(-50%)",
                  }}
                ></div>
              </div>
            );
          })()}
      </div>
      <span className="bwvs:text-xs bwvs:font-medium bwvs:capitalize">
        {anim}
      </span>
    </div>
  );
}