import { parse, ColorSpace, sRGB, distance, OKLab } from "colorjs.io/fn";

// define the color defaults for everything
export const ThemeDefaults = {
  "theme/page-background": "#FDFCFA",
  "theme/card-background": "#FFFFFF",
  "theme/primary": "#272727",
  "theme/highlight-1": "#FFFFFF",
  "theme/highlight-2": "#EDD280",
  "theme/highlight-3": "#FFCDC3",

  //everywhere else, accent-background = accent-1 and accent-text = accent-2.
  // we just need to create a migration pipeline before we can change this
  "theme/accent-text": "#FFFFFF",
  "theme/accent-background": "#57822B",
  "theme/accent-contrast": "#57822B",
};

// used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast
export function getColorDifference(color1: string, color2: string) {
  ColorSpace.register(sRGB);
  ColorSpace.register(OKLab);

  let parsedColor1 = parse(`rgb(${color1})`);
  let parsedColor2 = parse(`rgb(${color2})`);

  return distance(parsedColor1, parsedColor2, "oklab");
}