import plugin from "tailwindcss/plugin";
import type {
  BareValueResolver,
  NamedUtilityValue as BareValue,
  MatchOptions,
  PluginAPI,
  MatchFn,
} from "tailwindcss/plugin";
import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";

type FlatThemeLeaf = Record<string, string>;

const POSITIVE_NUMBER_PATTERN = /^(?:\d+|\d*\.\d+)$/; //accept numbers like "12", ".5", "12.5"

function omitDefault(values: FlatThemeLeaf): FlatThemeLeaf {
  const { DEFAULT: _default, ...rest } = values;
  return rest;
}

function spacingBareValueResolver(candidate: BareValue): string | undefined {
  if (
    candidate.fraction !== null ||
    !POSITIVE_NUMBER_PATTERN.test(candidate.value)
  ) {
    return undefined;
  }

  return `calc(var(--spacing) * ${candidate.value})`;
}

function borderWidthBareValueResolver(
  candidate: BareValue,
): string | undefined {
  if (
    candidate.fraction !== null ||
    !POSITIVE_NUMBER_PATTERN.test(candidate.value)
  ) {
    return undefined;
  }

  return `${candidate.value}px`;
}

// Please not use T as an object; that not how things used to be in tw anyway, just don't.
type ConfigValuesTree<T = string> = {
  [key: string]: ConfigValuesTree<T> | T;
};

function isConfigValuesTree<T>(
  x: ConfigValuesTree<T> | T,
): x is ConfigValuesTree<T> {
  const isObject = typeof x === "object" && x !== null && !Array.isArray(x);
  return isObject;
}

type BetterMatchUtility = {
  utilityName: string;
  arbitraryValueResolver: MatchFn;
  bareValueResolver?: BareValueResolver;
  type?: MatchOptions["type"];
  defaultValues?: ConfigValuesTree<unknown> | undefined;
  modifiers?: MatchOptions["modifiers"];
  supportsNegativeValues?: MatchOptions["supportsNegativeValues"];
};
function betterMatchUtility(
  matchUtilities: PluginAPI["matchUtilities"],
): (utility: BetterMatchUtility | BetterMatchUtility[]) => void {
  function handleUtility(utility: BetterMatchUtility): void {
    // define utility base
    const arbitraryValueResolver: Record<string, MatchFn> = {
      [utility.utilityName]: utility.arbitraryValueResolver,
    };
    // define options
    const defaultValues = utility.defaultValues
      ? { ...utility.defaultValues }
      : {};
    defaultValues["__CSS_VALUES__"] = undefined;
    const flatDefaultValues = flat(defaultValues);
    const stringValues = toStringOrSkip(flatDefaultValues);
    const values = utility.bareValueResolver
      ? withBareValueResolver(stringValues, utility.bareValueResolver)
      : stringValues;
    const options: MatchOptions = {
      type: utility.type,
      supportsNegativeValues: utility.supportsNegativeValues,
      values,
      modifiers: utility.modifiers,
    };
    // Register this utility
    matchUtilities(arbitraryValueResolver, options);
  }

  return function (utilities) {
    if (Array.isArray(utilities)) {
      utilities.forEach(handleUtility);
    } else {
      handleUtility(utilities);
    }
  };
}

type MatchValues = Required<MatchOptions>["values"];
function withBareValueResolver(
  values: FlatThemeLeaf,
  resolver: BareValueResolver,
): MatchValues {
  const valuesWithResolver: MatchValues = {};
  Object.assign(valuesWithResolver, values);
  valuesWithResolver.__BARE_VALUE__ = resolver;
  return valuesWithResolver;
}

function flat<T>(
  configPart: ConfigValuesTree<T>,
  path: string = "",
): Record<string, T> {
  function addKeyToPath(path: string, key: string): string {
    if (key === "DEFAULT") return path;
    if (path === "") return key;
    return `${path}-${key}`;
  }

  const flatConf: Record<string, T> = {};
  for (const [key, value] of Object.entries(configPart)) {
    const currentPath = addKeyToPath(path, key);
    if (isConfigValuesTree(value)) {
      Object.assign(flatConf, flat(value, currentPath));
    } else {
      flatConf[currentPath] = value;
    }
  }
  return flatConf;
}

const _typeOf = typeof "any";
type BaseTypes = typeof _typeOf;

function toStringOrSkip(
  flatConfigPart: Record<string, unknown>,
): Record<string, string> {
  const allowedTypes: BaseTypes[] = ["bigint", "boolean", "number", "string"];
  const entries = Object.entries(flatConfigPart);
  const stringifiedEntries: [string, string][] = [];
  entries.forEach(([key, value]) => {
    const type = typeof value;
    if (allowedTypes.includes(type))
      stringifiedEntries.push([key, String(value)]);
  });
  const result = Object.fromEntries(stringifiedEntries);
  return result;
}

function toCssVariable(
  cssVariable: string,
): (value: string) => ReturnType<MatchFn> {
  return (value) => {
    const cssInJs = {
      [cssVariable]: value,
    };
    return cssInJs;
  };
}

const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
  ({ addBase, addUtilities, theme, ...pluginApi }) => {
    // const matchUtilities = pluginApi.matchUtilities;
    const matchUtilities = betterMatchUtility(pluginApi.matchUtilities);

    const DEFAULT_GAP = "0.5rem";
    const DEFAULT_LENGTH = "0.75rem";
    const DEFAULT_OFFSET = "0px";
    const DEFAULT_WIDTH = "1px";
    const DEFAULT_COLOR = "currentColor";
    const DEFAULT_RADIUS = "0px";

    addBase({
      "@property --tw-dashed-border-gap": {
        syntax: '"<length>"',
        inherits: "true",
        "initial-value": "8px",
      },
      "@property --tw-dashed-border-length": {
        syntax: '"<length>"',
        inherits: "true",
        "initial-value": "10px",
      },
      "@property --tw-dashed-border-offset": {
        syntax: '"<length>"',
        inherits: "true",
        "initial-value": "0px",
      },
      "@property --tw-dashed-border-width": {
        syntax: '"<length>"',
        inherits: "true",
        "initial-value": "1px",
      },
      "@property --tw-dashed-border-radius": {
        syntax: '"<length>"',
        inherits: "true",
        "initial-value": "currentColor",
      },
      "@property --tw-dashed-border-alignment": {
        syntax: '"<number>"',
        inherits: "true",
        "initial-value": "0",
      },
      "@property --tw-dashed-border-duration": {
        syntax: '"<time>"',
        inherits: "true",
        "initial-value": "150ms",
      },
      "@property --tw-dashed-border-ease": {
        syntax: '"*"',
        inherits: "true",
        "initial-value": "initial",
      },
      ".dashed-border": {
        position: "relative",
        // "--tw-dashed-border-gap": DEFAULT_GAP,
        // "--tw-dashed-border-length": DEFAULT_LENGTH,
        // "--tw-dashed-border-offset": DEFAULT_OFFSET,
        // "--tw-dashed-border-width": DEFAULT_WIDTH,
        "--tw-dashed-border-color": DEFAULT_COLOR,
        "--tw-dashed-border-ease": "var(--tw-ease)",
        "--tw-dashed-border-duration": "var(--tw-duration)",
        // "--tw-dashed-border-radius": DEFAULT_RADIUS,
      },
      ".dashed-border-svg": {
        position: "absolute",
        inset: "0",
        width: "100%",
        height: "100%",
        "pointer-events": "none",
      },
    });

    const INSET =
      "calc((0.5 - var(--tw-dashed-border-alignment)) * var(--tw-dashed-border-width))";
    const INNER_SIZE =
      "calc(100% + var(--tw-dashed-border-width) * (2 * var(--tw-dashed-border-alignment) - 1))";
    const ADJUSTED_RADIUS =
      "max(0px, calc(var(--tw-dashed-border-radius) - (0.5 - var(--tw-dashed-border-alignment)) * var(--tw-dashed-border-width)))";

    addBase({
      ".dashed-border-rect": {
        fill: "none",
        stroke: "var(--tw-dashed-border-color)",
        "stroke-width": "var(--tw-dashed-border-width)",
        "stroke-dasharray":
          "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)",
        "stroke-dashoffset": "var(--tw-dashed-border-offset)",
        "vector-effect": "non-scaling-stroke",
        x: INSET,
        y: INSET,
        width: INNER_SIZE,
        height: INNER_SIZE,
        rx: ADJUSTED_RADIUS,
      },
    });

    const spacingRawValues = theme("spacing") as
      | ConfigValuesTree<string>
      | undefined;
    const spacingValues = flat(spacingRawValues ?? {});

    const spacingUtil = (opts: {
      utilityName: string;
      supportsNegativeValues?: boolean;
    }): BetterMatchUtility => {
      return {
        utilityName: opts.utilityName,
        arbitraryValueResolver: toCssVariable(`--tw-${opts.utilityName}`),
        bareValueResolver: spacingBareValueResolver,
        defaultValues: spacingValues,
        supportsNegativeValues: opts.supportsNegativeValues,
        type: "length",
      };
    };

    matchUtilities([
      spacingUtil({ utilityName: "dashed-border-gap" }),
      spacingUtil({ utilityName: "dashed-border-length" }),
      spacingUtil({
        utilityName: "dashed-border-offset",
        supportsNegativeValues: true,
      }),
      {
        utilityName: "dashed-border-align",
        arbitraryValueResolver: toCssVariable("--tw-dashed-border-alignment"),
        defaultValues: {
          inside: "0",
          edge: "0.5",
          outside: "1",
        },
        type: "number",
      },
      {
        utilityName: "dashed-border-width",
        arbitraryValueResolver: toCssVariable("--tw-dashed-border-width"),
        bareValueResolver: borderWidthBareValueResolver,
        defaultValues: omitDefault(theme("borderWidth")),
        type: "length",
      },
    ]);

    const colorValues = {
      DEFAULT: flattenColorPalette(theme("colors")),
      current: "currentColor",
      inherit: "inherit",
      transparent: "transparent",
    };

    matchUtilities({
      utilityName: "dashed-border-color",
      arbitraryValueResolver: toCssVariable("--tw-dashed-border-color"),
      defaultValues: colorValues,
      type: "color",
    });

    matchUtilities({
      utilityName: "rounded",
      arbitraryValueResolver: toCssVariable("--tw-dashed-border-radius"),
      defaultValues: omitDefault(theme("borderRadius")),
    });
    addUtilities({
      ".rounded": {
        "--tw-dashed-border-radius": theme("borderRadius.DEFAULT"),
      },
    });

    function createTransitionStyles(properties: string) {
      return {
        "transition-property": properties,
        "transition-duration":
          "var(--tw-dashed-border-duration, var(--default-transition-duration))",
        "transition-timing-function":
          "var(--tw-dashed-border-ease, var(--default-transition-timing-function))",
      };
    }
    const ALL_TRANSITION_PROPERTIES =
      "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
    addUtilities({
      ".dashed-border.transition .dashed-border-rect": createTransitionStyles(
        ALL_TRANSITION_PROPERTIES,
      ),
      ".dashed-border.transition-all .dashed-border-rect":
        createTransitionStyles(ALL_TRANSITION_PROPERTIES),
      ".dashed-border.transition-colors .dashed-border-rect":
        createTransitionStyles("stroke"),

      ".dashed-border.transition-dashed-border .dashed-border-rect":
        createTransitionStyles(ALL_TRANSITION_PROPERTIES),
    });
  },
);

export default dashedBorderPlugin;