import { tv } from "tailwind-variants"

/**
 * Set of common background UI patterns for interactive and transparent variants
 */
export const backgroundVariants = tv({
  variants: {
    background: {
      primary: "",
      secondary: "",
      "additional-1": "",
      "additional-2": "",
      "additional-3": "",
      "contrast-1": "",
      "contrast-2": "",
      "blue-3": "bg-blue-3",
      success: "bg-success-transparent-1",
      warning: "bg-warning-transparent-1",
      caution: "bg-caution-transparent-1",
      error: "bg-error-transparent-1",
      legendary: "bg-legendary-transparent",
      epic: "bg-epic-transparent",
      rare: "bg-rare-transparent",
      frosted: "bg-frosted-1 backdrop-blur-sm",
      // Special helper for ghost components
      ghost: "",
    },
    interactive: {
      true: "",
      false: "",
    },
    transparent: {
      true: "backdrop-blur-2xl",
      false: "",
    },
  },
  compoundVariants: [
    {
      background: "primary",
      transparent: false,
      className: "bg-bg-primary",
    },
    {
      background: "primary",
      transparent: true,
      className: "bg-bg-primary-transparent",
    },
    {
      background: "primary",
      interactive: true,
      transparent: false,
      className:
        "hover:bg-bg-additional-1 focus:bg-bg-additional-1 active:bg-bg-additional-1",
    },
    {
      background: "primary",
      interactive: true,
      transparent: true,
      className:
        "hover:bg-bg-additional-1-transparent focus:bg-bg-additional-1-transparent active:bg-bg-additional-1-transparent",
    },
    {
      background: "secondary",
      transparent: false,
      className: "bg-bg-secondary",
    },
    {
      background: "secondary",
      transparent: true,
      className: "bg-bg-secondary-transparent",
    },
    {
      background: "secondary",
      interactive: true,
      transparent: false,
      className:
        "hover:bg-bg-additional-1 focus:bg-bg-additional-1 active:bg-bg-additional-1",
    },
    {
      background: "secondary",
      interactive: true,
      transparent: true,
      className:
        "hover:bg-bg-additional-1-transparent focus:bg-bg-additional-1-transparent active:bg-bg-additional-1-transparent",
    },
    {
      background: "additional-1",
      transparent: false,
      className: "bg-bg-additional-1",
    },
    {
      background: "additional-1",
      transparent: true,
      className: "bg-bg-additional-1-transparent",
    },
    {
      background: "additional-1",
      interactive: true,
      transparent: false,
      className:
        "hover:bg-bg-additional-2 focus:bg-bg-additional-2 active:bg-bg-additional-2",
    },
    {
      background: "additional-1",
      interactive: true,
      transparent: true,
      className:
        "hover:bg-bg-additional-2-transparent focus:bg-bg-additional-2-transparent active:bg-bg-additional-2-transparent",
    },
    {
      background: "additional-2",
      transparent: false,
      className: "bg-bg-additional-2",
    },
    {
      background: "additional-2",
      transparent: true,
      className: "bg-bg-additional-2-transparent",
    },
    {
      background: "additional-2",
      interactive: true,
      transparent: false,
      className:
        "hover:bg-bg-additional-3 focus:bg-bg-additional-3 active:bg-bg-additional-3",
    },
    {
      background: "additional-2",
      interactive: true,
      transparent: true,
      className:
        "hover:bg-bg-additional-3-transparent focus:bg-bg-additional-3-transparent active:bg-bg-additional-3-transparent",
    },
    {
      background: "additional-3",
      transparent: false,
      className: "bg-bg-additional-3",
    },
    {
      background: "additional-3",
      transparent: true,
      className: "bg-bg-additional-3-transparent",
    },
    {
      background: "contrast-1",
      transparent: false,
      className: "bg-bg-contrast-1",
    },
    {
      background: "contrast-1",
      transparent: true,
      className: "bg-bg-contrast-1-transparent",
    },
    {
      background: "contrast-1",
      interactive: true,
      transparent: false,
      className:
        "hover:bg-bg-contrast-2 focus:bg-bg-contrast-2 active:bg-bg-contrast-2",
    },
    {
      background: "contrast-1",
      interactive: true,
      transparent: true,
      className:
        "hover:bg-bg-contrast-2-transparent focus:bg-bg-contrast-2-transparent active:bg-bg-contrast-2-transparent",
    },
    {
      background: "contrast-2",
      transparent: false,
      className: "bg-bg-contrast-2",
    },
    {
      background: "contrast-2",
      transparent: true,
      className: "bg-bg-contrast-2-transparent",
    },
    {
      background: "blue-3",
      interactive: true,
      className: "hover:bg-blue-2 focus:bg-blue-2 active:bg-blue-2",
    },
    {
      background: "success",
      interactive: true,
      className:
        "hover:bg-success-transparent-2 focus:bg-success-transparent-2 active:bg-success-transparent-2",
    },
    {
      background: "warning",
      interactive: true,
      className:
        "hover:bg-warning-transparent-2 focus:bg-warning-transparent-2 active:bg-warning-transparent-2",
    },
    {
      background: "caution",
      interactive: true,
      className:
        "hover:bg-caution-transparent-2 focus:bg-caution-transparent-2 active:bg-caution-transparent-2",
    },
    {
      background: "error",
      interactive: true,
      className:
        "hover:bg-error-transparent-2 focus:bg-error-transparent-2 active:bg-error-transparent-2",
    },
    {
      background: "ghost",
      interactive: true,
      className:
        "hover:bg-bg-additional-1-transparent focus:bg-bg-additional-1-transparent active:bg-bg-additional-1-transparent",
    },
    {
      background: "frosted",
      interactive: true,
      className: "hover:bg-frosted-2 focus:bg-frosted-2 active:bg-frosted-2",
    },
  ],
  defaultVariants: {
    interactive: false,
    transparent: false,
  },
})