import { CSSProperties } from "react";
import { VariantType } from "react-tooltip";

type Palette = {
  from: string;
  to: string;
  shadow: string;
  border: string;
};

const variantPalettes: Record<string, Palette> = {
  error: {
    from: "#F23030",
    to: "#B00B0B",
    shadow:
      "0 0 24px -4px rgba(242,48,48,0.55), inset 0 1px 0 rgba(255,255,255,0.18)",
    border: "rgba(255,255,255,0.14)",
  },
  info: {
    from: "#5750F1",
    to: "#3B36B3",
    shadow:
      "0 0 24px -4px rgba(87,80,241,0.55), inset 0 1px 0 rgba(255,255,255,0.2)",
    border: "rgba(255,255,255,0.16)",
  },
  success: {
    from: "#22AD5C",
    to: "#147F3D",
    shadow:
      "0 0 24px -4px rgba(34,173,92,0.55), inset 0 1px 0 rgba(255,255,255,0.2)",
    border: "rgba(255,255,255,0.16)",
  },
  warning: {
    from: "#FBB040",
    to: "#D97706",
    shadow:
      "0 0 24px -4px rgba(217,119,6,0.55), inset 0 1px 0 rgba(255,255,255,0.2)",
    border: "rgba(255,255,255,0.16)",
  },
  dark: {
    from: "#1F2937",
    to: "#0B1220",
    shadow:
      "0 0 24px -4px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.08)",
    border: "rgba(255,255,255,0.08)",
  },
  light: {
    from: "#FFFFFF",
    to: "#F1F5F9",
    shadow:
      "0 0 24px -4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6)",
    border: "rgba(15,23,42,0.06)",
  },
};

export const _TooltipDefaultParams = ({
  id,
  variant = id === "delete" ? "error" : "info",
  styles,
}: {
  id: string;
  variant?: VariantType;
  styles?: CSSProperties;
}) => {
  const palette = variantPalettes[variant] ?? variantPalettes.info;

  return {
    id,
    delayShow: 220,
    delayHide: 120,
    variant,
    className: "fancy-tooltip",
    border: `1px solid ${palette.border}`,
    style: {
      background: `linear-gradient(135deg, ${palette.from} 0%, ${palette.to} 100%)`,
      boxShadow: palette.shadow,
      ...styles,
    } satisfies CSSProperties,
  };
};
