import { colord } from "colord";

export const colors: Record<string, Record<string, string>> = {
	basic: {
		blue: "#0074D9",
		teal: "#39CCCC",
		purple: "#B10DC9",
		fuchsia: "#F012BE",
		maroon: "#85144b",
		red: "#ff4136",
		orange: "#ff851b",
		yellow: "#ffdc00",
		olive: "#3d9970",
		green: "#2ecc40",
		lime: "#01ff70",
		black: "#111111",
		gray: "#aaaaaa",
	},
};

colors.brand = {};

// "canvas"           is the main background of the entire page
// "text-bg"          is text background for longer paragraphs:
// "text-fg"          is text color for longer paragraphs. Usually paired with text-bg
// "accent"           is an accent color used for buttons, icons etc
// "accent2"          is an alternative accent color, used on secondary elements
// "text-accent"      describes what color should the text be when accenting it with color.
//                    Usually the same as the `accent` color, but you might choose a different
//                    shade so it looks better on `text-bg`.
// "text-accent2"     is same as above, but based on the second accent color
// "text-on-accent"   - what color text should be when put on a background colored with accent color
// "text-on-accent2"  - what color text should be when put on a background colored with accent2 color
colors.brand["canvas"] = "#fff";
colors.brand["text-bg"] = "#f6f6f6";
colors.brand["text-fg"] = colors.basic!.black!;
colors.brand["accent"] = "#5294A1";
colors.brand["accent2"] = "#65397C";
colors.brand["link-fg"] = colors.brand.accent!;
colors.brand["text-accent"] = colors.brand.accent!;
colors.brand["text-accent2"] = colors.brand["accent2"]!;
colors.brand["text-on-accent"] = "#fff";
colors.brand["text-on-accent2"] = "#fff";
colors.brand["link-on-accent"] = "#fff";
colors.brand["link-on-accent2"] = colors.basic!.white!;

// configure hue variance across the shades of the same main color.
const hue_step = -4;

// configure saturation variance across the shades of the same main color. If positive,
// lighter colors will gave more saturation. If negative, darker colors will be more
// saturated
const saturation_step = -0.03;

// this function is used by sealgen to generate up to 10 shades for each color.
export function shade(color: string, shade_step: number /* 0-9 */) {
	const hsl = colord(color).toHsl();
	const lightness_offset = hsl.l % 10;
	const new_l = shade_step * 10 + lightness_offset;
	const new_color = { ...hsl, l: new_l };
	const steps = Math.round((shade_step * 10 - hsl.l) / 10);
	let shifted = colord(new_color);

	if (shifted.toHsl().s !== 0) {
		// don't saturate greys
		shifted = shifted.saturate(steps * saturation_step);
	}
	shifted = shifted.rotate(hue_step * steps);
	return shifted.toHex();
}