/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import * as React from "react";
import { useEffect, useRef, useState } from "react";

import { useBreakpoints } from "@/hooks/useBreakpoints";
import { cn } from "@/libs/utils";

const tooltipVariant = cva(
  "z-50 overflow-hidden rounded-primary px-3 py-1.5 text-white animate-in fade-in-0 zoom-in-95 before:absolute before:size-0 before:border-[6px] before:border-transparent before:content-[''] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
  {
    variants: {
      variant: {
        default:
          "bg-[#101828] data-[side=bottom]:before:border-b-[#101828] data-[side=left]:before:border-l-[#101828] data-[side=right]:before:border-r-[#101828] data-[side=top]:before:border-t-[#101828]",
        primary:
          "bg-primary-500 data-[side=bottom]:before:border-b-primary-500 data-[side=left]:before:border-l-primary-500 data-[side=right]:before:border-r-primary-500 data-[side=top]:before:border-t-primary-500",
        success:
          "bg-success-500 data-[side=bottom]:before:border-b-success-500 data-[side=left]:before:border-l-success-500 data-[side=right]:before:border-r-success-500 data-[side=top]:before:border-t-success-500",
        danger:
          "bg-red-500 data-[side=bottom]:before:border-b-red-500 data-[side=left]:before:border-l-red-500 data-[side=right]:before:border-r-red-500 data-[side=top]:before:border-t-red-500",
      },
      textSize: {
        sm: "text-sm",
        md: "text-base",
        lg: "text-lg",
        xl: "text-xl",
        "2xl": "text-2xl",
      },
      contentPosition: {
        bottom: "before:bottom-full before:left-1/2",
        top: "before:left-1/2 before:top-full",
        left: "before:left-full before:top-1/3",
        right: "before:right-full before:top-1/3",
      },
    },
    defaultVariants: {
      variant: "default",
      textSize: "sm",
    },
  },
);

export interface TooltipContentProps
  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
    VariantProps<typeof tooltipVariant> {
  position?: "bottom" | "top" | "left" | "right";
}

const TooltipProvider = TooltipPrimitive.Provider;

const TooltipRoot = TooltipPrimitive.Root;

const TooltipTrigger = TooltipPrimitive.Trigger;

const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
  (
    {
      className,
      sideOffset = 10,
      variant,
      textSize,
      position = "bottom",
      ...props
    },
    ref,
  ) => (
    <TooltipPrimitive.Content
      ref={ref}
      side={position}
      sideOffset={sideOffset}
      className={cn(
        tooltipVariant({
          variant,
          textSize,
          contentPosition: position,
          className,
        }),
      )}
      {...props}
    />
  ),
);
TooltipContent.displayName = TooltipPrimitive.Content.displayName;

export interface TooltipProps
  extends VariantProps<typeof tooltipVariant>,
    React.PropsWithChildren {
  label: React.ReactNode;
  position?: "bottom" | "top" | "left" | "right";
  isAlwaysVisible?: boolean;
  wrapperClassName?: string;
}

const Tooltip = ({
  children,
  label,
  position = "bottom",
  variant,
  isAlwaysVisible,
  wrapperClassName,
}: TooltipProps) => {
  const childrenWrapperRef = useRef<any>(null);
  const [open, setOpen] = useState(isAlwaysVisible || false);
  const { isDesktop } = useBreakpoints();

  function handleClickOutside(event: MouseEvent) {
    if (
      childrenWrapperRef.current &&
      !childrenWrapperRef.current?.contains(event.target)
    ) {
      setOpen(false);
    }
  }

  useEffect(() => {
    if (!isDesktop) {
      document.addEventListener("click", handleClickOutside);
    }

    return () => {
      if (!isDesktop) {
        document.removeEventListener("click", handleClickOutside);
      }
    };
  }, [isDesktop]);

  return (
    <TooltipProvider>
      <TooltipRoot open={isAlwaysVisible || !isDesktop ? open : undefined}>
        <TooltipTrigger asChild>
          <div
            className={wrapperClassName}
            onClick={() => (!isDesktop ? setOpen(!open) : undefined)}
            ref={childrenWrapperRef}
          >
            {children}
          </div>
        </TooltipTrigger>
        <TooltipContent position={position} variant={variant}>
          {label}
        </TooltipContent>
      </TooltipRoot>
    </TooltipProvider>
  );
};

export { Tooltip };