import type { PluginAPI } from "tailwindcss/types/config.js";
import {
  filterInAnimation,
  opacityInAnimation,
  opacityLoopAnimation,
  rotateInAnimation,
  rotateLoopAnimation,
  scaleInAnimation,
  scaleLoopAnimation,
  translateInAnimation,
  translateLoopAnimation,
  allLoopAndEnterAnimations,
} from "./baseAnimations.js";
import { springPerceptualMultipliers } from "./modifiers.js";

type Direction = "right" | "left" | "up" | "down";

type PresetThemeConfig = {
  addComponents: PluginAPI["addComponents"];
  matchComponents: PluginAPI["matchComponents"];
};

type Size = "sm" | "md" | "lg";

const DEFAULT_MULTIPLIER = "1";

export function addPresets(
  addComponents: PresetThemeConfig["addComponents"],
  matchComponents: PresetThemeConfig["matchComponents"]
) {
  matchComponents(
    {
      "motion-preset-fade": (size: string) => {
        const durations = {
          sm: "300ms",
          md: "500ms",
          lg: "800ms",
        };
        return {
          "--motion-origin-opacity": "0",
          "--motion-duration": durations[size as Size],
          "--motion-opacity-in-animation": opacityInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-slide-right": (size: string) => {
        const distance = {
          sm: "5%",
          md: "25%",
          lg: "100%",
        };
        return {
          "--motion-origin-translate-x": `-${distance[size as Size]}`,
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-slide-left": (size: string) => {
        const distance = {
          sm: "5%",
          md: "25%",
          lg: "100%",
        };
        return {
          "--motion-origin-translate-x": distance[size as Size],
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-slide-up": (size: string) => {
        const distance = {
          sm: "5%",
          md: "25%",
          lg: "100%",
        };
        return {
          "--motion-origin-translate-y": distance[size as Size],
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-slide-down": (size: string) => {
        const distance = {
          sm: "5%",
          md: "25%",
          lg: "100%",
        };
        return {
          "--motion-origin-translate-y": `-${distance[size as Size]}`,
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-slide-up-right": (size: string) => {
        const distance = {
          sm: "5%",
          md: "25%",
          lg: "100%",
        };
        return {
          "--motion-origin-translate-x": `-${distance[size as Size]}`,
          "--motion-origin-translate-y": distance[size as Size],
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-slide-up-left": (size: string) => {
        const distance = {
          sm: "5%",
          md: "25%",
          lg: "100%",
        };
        return {
          "--motion-origin-translate-x": distance[size as Size],
          "--motion-origin-translate-y": distance[size as Size],
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-slide-down-left": (size: string) => {
        const distance = {
          sm: "5%",
          md: "25%",
          lg: "100%",
        };
        return {
          "--motion-origin-translate-x": distance[size as Size],
          "--motion-origin-translate-y": `-${distance[size as Size]}`,
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-slide-down-right": (size: string) => {
        const distance = {
          sm: "5%",
          md: "25%",
          lg: "100%",
        };
        return {
          "--motion-origin-translate-x": `-${distance[size as Size]}`,
          "--motion-origin-translate-y": `-${distance[size as Size]}`,
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },

      "motion-preset-focus": (size: string) => {
        const blurSizes = {
          sm: "1.25px",
          md: "5px",
          lg: "10px",
        };
        return {
          "--motion-origin-blur": blurSizes[size as Size],
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-filter-in-animation": filterInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },

      "motion-preset-blur-right": (size: string) => {
        const blurSizes = {
          sm: "1.25px",
          md: "5px",
          lg: "10px",
        };
        const distance = {
          sm: "1%",
          md: "5%",
          lg: "25%",
        };
        return {
          "--motion-origin-blur": blurSizes[size as Size],
          "--motion-origin-translate-x": `-${distance[size as Size]}`,
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-filter-in-animation": filterInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-blur-left": (size: string) => {
        const blurSizes = {
          sm: "1.25px",
          md: "5px",
          lg: "10px",
        };
        const distance = {
          sm: "1%",
          md: "5%",
          lg: "25%",
        };
        return {
          "--motion-origin-blur": blurSizes[size as Size],
          "--motion-origin-translate-x": distance[size as Size],
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-filter-in-animation": filterInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-blur-up": (size: string) => {
        const blurSizes = {
          sm: "1.25px",
          md: "5px",
          lg: "10px",
        };
        const distance = {
          sm: "1%",
          md: "5%",
          lg: "25%",
        };
        return {
          "--motion-origin-blur": blurSizes[size as Size],
          "--motion-origin-translate-y": distance[size as Size],
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-filter-in-animation": filterInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-blur-down": (size: string) => {
        const blurSizes = {
          sm: "1.25px",
          md: "5px",
          lg: "10px",
        };
        const distance = {
          sm: "1%",
          md: "5%",
          lg: "25%",
        };
        return {
          "--motion-origin-blur": blurSizes[size as Size],
          "--motion-origin-translate-y": `-${distance[size as Size]}`,
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-filter-in-animation": filterInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
    },
    {
      values: {
        sm: "sm",
        md: "md",
        lg: "lg",
        DEFAULT: "md",
      },
    }
  );

  matchComponents(
    {
      "motion-preset-rebound": (direction: string) => {
        const directions = {
          right: {
            "--motion-origin-translate-x": "-25%",
          },
          left: {
            "--motion-origin-translate-x": "25%",
          },
          up: {
            "--motion-origin-translate-y": "25%",
          },
          down: {
            "--motion-origin-translate-y": "-25%",
          },
        };
        return {
          ...directions[direction as Direction],
          "--motion-translate-timing": "var(--motion-spring-bouncier)",
          "--motion-translate-perceptual-duration-multiplier":
            springPerceptualMultipliers["var(--motion-spring-bouncier)"] ??
            DEFAULT_MULTIPLIER,
          "--motion-origin-opacity": "0",
          "--motion-opacity-in-animation": opacityInAnimation,
          "--motion-translate-in-animation": translateInAnimation,
          animation: allLoopAndEnterAnimations,
        };
      },
    },
    {
      values: {
        right: "right",
        left: "left",
        up: "up",
        down: "down",
        DEFAULT: "left",
      },
    }
  );

  addComponents({
    ".motion-preset-bounce": {
      "--motion-duration": "300ms",
      "--motion-translate-timing": "var(--motion-bounce)",
      "--motion-translate-perceptual-duration-multiplier":
        springPerceptualMultipliers["var(--motion-bounce)"] ??
        DEFAULT_MULTIPLIER,
      "--motion-origin-opacity": "0",
      "--motion-origin-translate-y": "-25%",
      "--motion-opacity-in-animation": opacityInAnimation,
      "--motion-translate-in-animation": translateInAnimation,
      animation: allLoopAndEnterAnimations,
    },
  });

  addComponents({
    ".motion-preset-expand": {
      "--motion-origin-scale-x": "50%",
      "--motion-origin-scale-y": "50%",
      "--motion-origin-opacity": "0",
      "--motion-opacity-in-animation": opacityInAnimation,
      "--motion-scale-in-animation": scaleInAnimation,
      animation: allLoopAndEnterAnimations,
    },
  });

  addComponents({
    ".motion-preset-shrink": {
      "--motion-origin-scale-x": "150%",
      "--motion-origin-scale-y": "150%",
      "--motion-origin-opacity": "0",
      "--motion-opacity-in-animation": opacityInAnimation,
      "--motion-scale-in-animation": scaleInAnimation,
      animation: allLoopAndEnterAnimations,
    },
  });

  addComponents({
    ".motion-preset-pop": {
      "--motion-origin-scale-x": "50%",
      "--motion-origin-scale-y": "50%",
      "--motion-origin-opacity": "0",
      "--motion-scale-timing": "var(--motion-spring-bouncier)",
      "--motion-scale-perceptual-duration-multiplier":
        springPerceptualMultipliers["var(--motion-spring-bouncier)"] ??
        DEFAULT_MULTIPLIER,
      "--motion-opacity-in-animation": opacityInAnimation,
      "--motion-scale-in-animation": scaleInAnimation,
      animation: allLoopAndEnterAnimations,
    },
  });

  addComponents({
    ".motion-preset-compress": {
      "--motion-origin-scale-x": "150%",
      "--motion-origin-scale-y": "150%",
      "--motion-origin-opacity": "0",
      "--motion-scale-timing": "var(--motion-spring-bouncier)",
      "--motion-scale-perceptual-duration-multiplier":
        springPerceptualMultipliers["var(--motion-spring-bouncier)"] ??
        DEFAULT_MULTIPLIER,
      "--motion-opacity-in-animation": opacityInAnimation,
      "--motion-scale-in-animation": scaleInAnimation,
      animation: allLoopAndEnterAnimations,
    },
  });

  addComponents({
    ".motion-preset-shake": {
      "--motion-duration": "300ms",
      "--motion-origin-rotate": "15deg",
      "--motion-origin-opacity": "0",
      "--motion-rotate-timing": "var(--motion-spring-bounciest)",
      "--motion-rotate-perceptual-duration-multiplier":
        springPerceptualMultipliers["var(--motion-spring-bouncier)"] ??
        DEFAULT_MULTIPLIER,
      "--motion-opacity-in-animation": opacityInAnimation,
      "--motion-rotate-in-animation": rotateInAnimation,
      animation: allLoopAndEnterAnimations,
    },
  });

  addComponents({
    ".motion-preset-wiggle": {
      "--motion-duration": "300ms",
      "--motion-origin-rotate": "15deg",
      "--motion-origin-translate-x": "-25%",
      "--motion-origin-translate-y": "-10%",
      "--motion-origin-opacity": "0",
      "--motion-timing": "var(--motion-spring-bounciest)",
      "--motion-perceptual-duration-multiplier": "5.285",
      "--motion-opacity-timing": "var(--motion-spring-smooth)",
      "--motion-opacity-perceptual-duration-multiplier":
        springPerceptualMultipliers["var(--motion-spring-bouncier)"] ??
        DEFAULT_MULTIPLIER,
      "--motion-opacity-in-animation": opacityInAnimation,
      "--motion-rotate-in-animation": rotateInAnimation,
      "--motion-translate-in-animation": translateInAnimation,
      animation: allLoopAndEnterAnimations,
    },
  });

  addComponents({
    ".motion-preset-confetti": {
      display: "block",
      "-webkit-appearance": "none",
      appearance: "none",
      position: "relative",
      outline: "0",
      zIndex: "1",
      margin: "0",
      animation:
        "RomboConfettiPop var(--motion-duration) var(--motion-timing)  both",

      "@keyframes RomboConfettiPop": {
        "0%": {
          opacity: "0",
          transform: "scale(1)",
        },
        "33%": {
          opacity: "1",
          transform: "scale(1.15)",
        },
        "50%": {
          transform: "scale(0.975)",
        },
        "65%": {
          transform: "scale(1.025)",
        },
        "80%": {
          transform: "scale(0.99)",
        },
        "87%": {
          transform: "scale(1.01)",
        },
        "100%": {
          opacity: "1",
          transform: "scale(1)",
        },
      },
      "&:after": {
        display: "block",
        animationDuration: "var(--motion-duration)",
        animationTimingFunction: "var(--motion-timing)",
        animationIterationCount: "1",
        animationDirection: "normal",
        animationFillMode: "forwards",
        animationName: "bottomfetti",
        position: "absolute",
        content: '" "',
        zIndex: "-1",
        width: "100%",
        height: "100%",
        left: "-20%",
        top: "100%",
        transition: "all var(--motion-timing) var(--motion-duration)",
        backgroundRepeat: "no-repeat",
        backgroundImage:
          "radial-gradient(circle, #a2dd60 20%, transparent 20%),radial-gradient(circle, transparent 20%, #ee65a9 20%, transparent 30%),radial-gradient(circle, #6092dd 20%, transparent 20%),radial-gradient(circle, #f3c548 20%, transparent 20%),radial-gradient(circle, transparent 10%, #46ec99 15%, transparent 20%),radial-gradient(circle, #f03e47 20%, transparent 20%),radial-gradient(circle, #7b4df7 20%, transparent 20%),radial-gradient(circle, #3ff1bc 20%, transparent 20%)",
        backgroundSize:
          "15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%",
      },
      "&:before": {
        display: "block",
        animationDuration: "var(--motion-duration)",
        animationTimingFunction: "var(--motion-timing)",
        animationIterationCount: "1",
        animationDirection: "normal",
        animationFillMode: "forwards",
        animationName: "topfetti",
        position: "absolute",
        content: '" "',
        width: "100%",
        height: "100%",
        left: "-5%",
        backgroundRepeat: "no-repeat",
        transition: "all var(--motion-timing) var(--motion-duration)",
        zIndex: "-1",
        top: "-90%",
        backgroundImage:
          "radial-gradient(circle, #a2dd60 30%, transparent 20%),radial-gradient(circle, transparent 20%, #ee65a9 40%, transparent 20%),radial-gradient(circle, #6092dd 30%, transparent 20%),radial-gradient(circle, #f3c548 30%, transparent 20%),radial-gradient(circle, transparent 10%, #46ec99 15%, transparent 20%),radial-gradient(circle, #f03e47 30%, transparent 20%),radial-gradient(circle, #7b4df7 30%, transparent 30%),radial-gradient(circle, #3ff1bc 30%, transparent 20%),radial-gradient(circle, #48f088 30%, transparent 30%)",
        backgroundSize:
          "10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 25% 25%",
      },
      "@keyframes topfetti": {
        "0%": {
          backgroundPosition:
            "5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%",
        },
        "50%": {
          backgroundPosition:
            "0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%",
        },
        "100%": {
          backgroundPosition:
            "0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%",
          backgroundSize: "0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%",
        },
      },
      "@keyframes bottomfetti": {
        "0%": {
          backgroundPosition:
            "10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,70% -10%, 70% 0%",
        },
        "50%": {
          backgroundPosition:
            "0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%",
        },
        "100%": {
          backgroundPosition:
            "0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%",
          backgroundSize: "0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%",
        },
      },
    },
  });

  matchComponents(
    {
      "motion-preset-pulse": (size: string) => {
        const sizes = {
          sm: "1.1",
          md: "1.25",
          lg: "1.5",
        };
        return {
          "--motion-loop-scale-x": sizes[size as Size],
          "--motion-loop-scale-y": sizes[size as Size],
          "--motion-timing": "cubic-bezier(0.4, 0, 0.2, 1)",
          "--motion-scale-loop-animation": scaleLoopAnimation("mirror"),
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-wobble": (size: string) => {
        const sizes = {
          sm: "5%",
          md: "15%",
          lg: "25%",
        };
        return {
          "--motion-loop-translate-x": sizes[size as Size],
          "--motion-timing": "cubic-bezier(0.4, 0, 0.2, 1)",
          "--motion-translate-loop-animation": translateLoopAnimation("mirror"),
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-seesaw": (size: string) => {
        const sizes = {
          sm: "3deg",
          md: "6deg",
          lg: "12deg",
        };
        return {
          "--motion-loop-rotate": sizes[size as Size],
          "--motion-rotate-loop-animation": rotateLoopAnimation("mirror"),
          "--motion-rotate-timing": "var(--motion-spring-bounciest)",
          "--motion-rotate-perceptual-duration-multiplier":
            springPerceptualMultipliers["var(--motion-spring-bounciest)"] ??
            DEFAULT_MULTIPLIER,
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-oscillate": (size: string) => {
        const sizes = {
          sm: "5%",
          md: "15%",
          lg: "25%",
        };
        return {
          "--motion-loop-translate-y": sizes[size as Size],
          "--motion-timing": "cubic-bezier(0.4, 0, 0.2, 1)",
          "--motion-translate-loop-animation": translateLoopAnimation("mirror"),
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-stretch": (size: string) => {
        const xSizes = {
          sm: "95%",
          md: "85%",
          lg: "75%",
        };
        const ySizes = {
          sm: "105%",
          md: "115%",
          lg: "125%",
        };
        return {
          "--motion-loop-scale-x": xSizes[size as Size],
          "--motion-loop-scale-y": ySizes[size as Size],
          "--motion-scale-timing": "var(--motion-spring-bouncier)",
          "--motion-scale-perceptual-duration-multiplier":
            springPerceptualMultipliers["var(--motion-spring-bouncier)"] ??
            DEFAULT_MULTIPLIER,
          "--motion-scale-loop-animation": scaleLoopAnimation("mirror"),
          animation: allLoopAndEnterAnimations,
        };
      },
      "motion-preset-float": (size: string) => {
        const sizes = {
          sm: "50%",
          md: "100%",
          lg: "150%",
        };
        return {
          "--motion-loop-translate-y": sizes[size as Size],
          "--motion-translate-timing": "var(--motion-spring-bouncier)",
          "--motion-translate-perceptual-duration-multiplier":
            springPerceptualMultipliers["var(--motion-spring-bouncier)"] ??
            DEFAULT_MULTIPLIER,
          "--motion-duration": "2000ms",
          "--motion-translate-loop-animation": translateLoopAnimation("mirror"),
          animation: allLoopAndEnterAnimations,
        };
      },
    },
    {
      values: {
        sm: "sm",
        md: "md",
        lg: "lg",
        DEFAULT: "md",
      },
    }
  );

  addComponents({
    ".motion-preset-spin": {
      "--motion-loop-rotate": "360deg",
      "--motion-timing": "linear",
      "--motion-rotate-loop-animation": rotateLoopAnimation("reset"),
      animation: allLoopAndEnterAnimations,
    },
  });

  addComponents({
    ".motion-preset-blink": {
      "--motion-loop-opacity": "0",
      "--motion-opacity-loop-animation": opacityLoopAnimation("mirror"),
      animation: allLoopAndEnterAnimations,
    },
  });

  matchComponents({
    "motion-preset-typewriter": (value) => ({
      "--motion-duration": "2000ms",
      "--motion-typewriter-value": `${value}ch`,
      animation: `typing var(--motion-duration) steps(${value}) var(--motion-loop-count), blink 0.4s step-end infinite alternate`,
      whiteSpace: "nowrap",
      borderRight: "2px solid",
      fontFamily: "monospace",
      overflow: "hidden",

      "@media screen and (prefers-reduced-motion: no-preference)": {
        "@keyframes typing": {
          "10%, 90%": {
            width: "0",
          },
          "40%, 60%": {
            width: `calc(var(--motion-typewriter-value) + 1px)`,
          },
        },
      },

      "@keyframes blink": {
        "50%": {
          borderColor: "transparent",
        },
      },
    }),
  });

  matchComponents(
    {
      "motion-preset-flomoji": (value: string) => ({
        position: "relative",
        "&:before": {
          content: `"${value}"`,
          animation:
            "emojiAnim 3000ms infinite cubic-bezier(0, 0.2, 0.2, 1) both",
          top: "0px",
          left: "0px",
          position: "absolute",
          zIndex: "1000",
          background: "rgba(255,255,255,0.3)",
          width: "2rem",
          height: "2rem",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "100%",
          padding: "2px",
          paddingBottom: "6px",
        },

        "@media screen and (prefers-reduced-motion: no-preference)": {
          "@keyframes emojiAnim": {
            "0%": {
              transform: "translateY(-200%) rotate(60deg)",
            },
            "30%": {
              transform: "rotate(50deg)",
            },
            "40%": {
              transform: "rotate(55deg)",
            },
            "50%": {
              transform: "rotate(45deg)",
            },
            "60%": {
              transform: "rotate(40deg)",
            },
            "100%": {
              transform: "translateY(-200%) rotate(25deg)",
            },
          },
        },
      }),
    },
    {
      values: {
        "👉": "👉",
        "🚀": "🚀",
        "👀": "👀",
        "👍": "👍",
      },
    }
  );
}