import { tv } from "tailwind-variants"
import { type VariantProps } from "tailwind-variants"
import { Color } from "./color"
import { interactiveVariants } from "./interactive"

export type FillVariantProps = VariantProps<typeof fillVariants>

type FillColorMap = {
  [K in Color]: `fill-${K}`
}

const fillColor: FillColorMap = {
  transparent: "fill-transparent",
  current: "fill-current",
  inherit: "fill-inherit",
  white: "fill-white",
  black: "fill-black",
  // Text colors
  "text-primary": "fill-text-primary",
  "text-secondary": "fill-text-secondary",
  "text-tertiary": "fill-text-tertiary",
  // Background colors
  "bg-app": "fill-bg-app",
  "bg-primary": "fill-bg-primary",
  "bg-secondary": "fill-bg-secondary",
  "bg-additional-1": "fill-bg-additional-1",
  "bg-additional-2": "fill-bg-additional-2",
  "bg-additional-3": "fill-bg-additional-3",
  "bg-contrast-1": "fill-bg-contrast-1",
  "bg-contrast-2": "fill-bg-contrast-2",
  // Transparent variants
  "bg-primary-transparent": "fill-bg-primary-transparent",
  "bg-secondary-transparent": "fill-bg-secondary-transparent",
  "bg-additional-1-transparent": "fill-bg-additional-1-transparent",
  "bg-additional-2-transparent": "fill-bg-additional-2-transparent",
  "bg-additional-3-transparent": "fill-bg-additional-3-transparent",
  "bg-contrast-1-transparent": "fill-bg-contrast-1-transparent",
  "bg-contrast-2-transparent": "fill-bg-contrast-2-transparent",
  // Border colors
  "border-1": "fill-border-1",
  "border-2": "fill-border-2",
  "border-3": "fill-border-3",
  "border-special-inset-1": "fill-border-special-inset-1",
  "border-1-transparent": "fill-border-1-transparent",
  "border-2-transparent": "fill-border-2-transparent",
  "border-3-transparent": "fill-border-3-transparent",
  // Frosted colors
  "frosted-1": "fill-frosted-1",
  "frosted-2": "fill-frosted-2",
  "frosted-3": "fill-frosted-3",
  "frosted-4": "fill-frosted-4",
  "frosted-5": "fill-frosted-5",
  // Overlay
  overlay: "fill-overlay",
  // Rarity colors
  legendary: "fill-legendary",
  "legendary-transparent": "fill-legendary-transparent",
  epic: "fill-epic",
  "epic-transparent": "fill-epic-transparent",
  rare: "fill-rare",
  "rare-transparent": "fill-rare-transparent",
  // Blue colors
  "blue-1": "fill-blue-1",
  "blue-2": "fill-blue-2",
  "blue-3": "fill-blue-3",
  "blue-4": "fill-blue-4",
  "blue-5": "fill-blue-5",
  link: "fill-link",
  // Semantic colors
  success: "fill-success",
  "success-transparent-1": "fill-success-transparent-1",
  "success-transparent-2": "fill-success-transparent-2",
  warning: "fill-warning",
  "warning-transparent-1": "fill-warning-transparent-1",
  "warning-transparent-2": "fill-warning-transparent-2",
  caution: "fill-caution",
  "caution-transparent-1": "fill-caution-transparent-1",
  "caution-transparent-2": "fill-caution-transparent-2",
  error: "fill-error",
  "error-transparent-1": "fill-error-transparent-1",
  "error-transparent-2": "fill-error-transparent-2",
}

export const fillVariants = tv({
  variants: {
    fill: {
      ...fillColor,
      "interactive-primary-styles": interactiveVariants({
        fill: "primary",
      }),
      "interactive-secondary-styles": interactiveVariants({
        fill: "secondary",
      }),
    },
  },
})