import { Color } from "typings/custom";

const LABEL_TO_DX_VAR: { [key: string]: string } = {
    blue: "blue-vibrant",
    "cloud-blue": "cloud-blue-vibrant",
    green: "green-vibrant",
    "hot-orange": "hot-orange-vibrant",
    indigo: "indigo-vibrant",
    orange: "orange-vibrant",
    pink: "pink-vibrant",
    purple: "purple-vibrant",
    red: "red-vibrant",
    teal: "teal-natural",
    violet: "violet-vibrant",
    yellow: "yellow-natural"
};

const DEFAULT_BACKGROUND_LEVEL = 95;
const DEFAULT_COLOR_LEVEL = 40;
const BROWSER_COLOR_REGEXP = /^(?:#[0-9A-F]{3,8}|rgba?\(.+\))/;

export const colorToDxColors = (
    color?: Color
): {
    background: string;
    color: string;
} | null => {
    if (!color) {
        return null;
    }

    const dxVarColor = LABEL_TO_DX_VAR[color];
    if (!dxVarColor) {
        return null;
    }

    return {
        background: `--dx-g-${dxVarColor}-${DEFAULT_BACKGROUND_LEVEL}`,
        color: `--dx-g-${dxVarColor}-${DEFAULT_COLOR_LEVEL}`
    };
};

export const toDxColor = (color: string) =>
    ["white", "transparent"].includes(color) ||
    color?.includes("linear-gradient") ||
    BROWSER_COLOR_REGEXP.test(color)
        ? color
        : `var(--dx-g-${color})`;

export const buildStyleColorVariables = ({
    background,
    color
}: {
    background: string;
    color: string;
}): string => {
    return `--color: var(${color}); --background: var(${background})`;
};