import classNames from "classnames";
import {Color, ColorWithCustomTint} from "./Color";
import {ConditionColorPalette, defaultConditionColorPalette} from "./Colors";

export type ConditionContextCardThemeClasses = {
    background: string,
    activeBackground: string,
    backgroundEffects?: string,
    borderPrimary: string,
    borderSecondary: string,
    connectorLine: string,
    iconBackground: string,
    iconColor: string,
    mainValue: string,
    secondaryValue: string,
}

// Card-only styling override point for condition contexts (preconditions/predates/etc).
export const defaultConditionContextCardThemeByPalette: Partial<Record<ConditionColorPalette, ConditionContextCardThemeClasses>> = {
    red: {
        background: 'bg-red-10 bg-opacity-[.30] hover:bg-red-20',
        activeBackground: 'bg-red-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-red-30',
        borderSecondary: 'border-red-40',
        connectorLine: 'bg-red-normal',
        iconBackground: 'bg-red-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-red-normal',
    },
    green: {
        background: 'bg-green-10 hover:bg-green-20',
        activeBackground: 'bg-green-20',
        borderPrimary: 'border-green-30',
        borderSecondary: 'border-green-40',
        connectorLine: 'bg-green-normal',
        iconBackground: 'bg-green-normal',
        iconColor: 'text-white',
        mainValue: 'text-green-normal',
        secondaryValue: 'text-gray-550',
    },
    yellow: {
        background: 'bg-yellow-10 bg-opacity-[.32] hover:bg-yellow-20',
        activeBackground: 'bg-yellow-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-yellow-30',
        borderSecondary: 'border-yellow-40',
        connectorLine: 'bg-yellow-normal',
        iconBackground: 'bg-yellow-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-yellow-shade-200',
    },
    maroon: {
        background: 'bg-maroon-10 bg-opacity-[.28] hover:bg-maroon-20',
        activeBackground: 'bg-maroon-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-maroon-30',
        borderSecondary: 'border-maroon-40',
        connectorLine: 'bg-maroon-normal',
        iconBackground: 'bg-maroon-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-maroon-shade-200',
    },
    peach: {
        background: 'bg-peach-10 bg-opacity-[.28] hover:bg-peach-20',
        activeBackground: 'bg-peach-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-peach-30',
        borderSecondary: 'border-peach-40',
        connectorLine: 'bg-peach-normal',
        iconBackground: 'bg-peach-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-peach-shade-200',
    },
    sapphire: {
        background: 'bg-sapphire-10 bg-opacity-[.28] hover:bg-sapphire-20',
        activeBackground: 'bg-sapphire-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-sapphire-30',
        borderSecondary: 'border-sapphire-40',
        connectorLine: 'bg-sapphire-normal',
        iconBackground: 'bg-sapphire-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-sapphire-shade-200',
    },
    lavender: {
        background: 'bg-lavender-10 bg-opacity-[.90] hover:bg-lavender-20',
        activeBackground: 'bg-lavender-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-lavender-30',
        borderSecondary: 'border-lavender-40',
        connectorLine: 'bg-lavender-normal',
        iconBackground: 'bg-lavender-normal',
        iconColor: 'text-white',
        mainValue: 'text-lavender-shade-100',
        secondaryValue: 'text-gray-300',
    },
    mauve: {
        background: 'bg-mauve-10 bg-opacity-[.28] hover:bg-mauve-20',
        activeBackground: 'bg-mauve-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-mauve-30',
        borderSecondary: 'border-mauve-40',
        connectorLine: 'bg-mauve-normal',
        iconBackground: 'bg-mauve-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-mauve-shade-200',
    },
    fuchsiared: {
        background: 'bg-fuchsiared-10 bg-opacity-[.28] hover:bg-fuchsiared-20',
        activeBackground: 'bg-fuchsiared-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-fuchsiared-30',
        borderSecondary: 'border-fuchsiared-40',
        connectorLine: 'bg-fuchsiared-normal',
        iconBackground: 'bg-fuchsiared-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-fuchsiared-shade-200',
    },
    mustard: {
        background: 'bg-mustard-10 bg-opacity-[.28] hover:bg-mustard-20',
        activeBackground: 'bg-mustard-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-mustard-30',
        borderSecondary: 'border-mustard-40',
        connectorLine: 'bg-mustard-normal',
        iconBackground: 'bg-mustard-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-mustard-shade-200',
    },
    hwpyellow: {
        background: 'bg-gray-100 bg-opacity-[.13] hover:bg-hwpyellow-20',
        activeBackground: 'bg-hwpyellow-10',
        backgroundEffects: 'backdrop-blur-[16px]',
        borderPrimary: 'border-hwpyellow-20',
        borderSecondary: 'border-hwpyellow-40',
        connectorLine: 'bg-hwpyellow-normal',
        iconBackground: 'bg-hwpyellow-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-hwpyellow-shade-200',
    },
    oceanic: {
        background: 'bg-oceanic-10 bg-opacity-[.28] hover:bg-oceanic-20',
        activeBackground: 'bg-oceanic-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-oceanic-30',
        borderSecondary: 'border-oceanic-40',
        connectorLine: 'bg-oceanic-normal',
        iconBackground: 'bg-oceanic-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-oceanic-shade-200',
    },
    greena: {
        background: 'bg-greena-10 bg-opacity-[.28] hover:bg-greena-20',
        activeBackground: 'bg-greena-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-greena-30',
        borderSecondary: 'border-greena-40',
        connectorLine: 'bg-greena-normal',
        iconBackground: 'bg-greena-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-greena-shade-200',
    },
    greenb: {
        background: 'bg-greenb-10 bg-opacity-[.28] hover:bg-greenb-20',
        activeBackground: 'bg-greenb-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-greenb-30',
        borderSecondary: 'border-greenb-40',
        connectorLine: 'bg-greenb-normal',
        iconBackground: 'bg-greenb-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-greenb-shade-200',
    },
    purplegrayish: {
        background: 'bg-purplegrayish-10 bg-opacity-[.28] hover:bg-purplegrayish-20',
        activeBackground: 'bg-purplegrayish-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-purplegrayish-30',
        borderSecondary: 'border-purplegrayish-40',
        connectorLine: 'bg-purplegrayish-normal',
        iconBackground: 'bg-purplegrayish-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-purplegrayish-shade-200',
    },
    purplegrayishb: {
        background: 'bg-purplegrayishb-10 bg-opacity-[.28] hover:bg-purplegrayishb-20',
        activeBackground: 'bg-purplegrayishb-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-purplegrayishb-30',
        borderSecondary: 'border-purplegrayishb-40',
        connectorLine: 'bg-purplegrayishb-normal',
        iconBackground: 'bg-purplegrayishb-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-purplegrayishb-shade-200',
    },
    brightlavender: {
        background: 'bg-brightlavender-10 bg-opacity-[.28] hover:bg-brightlavender-20',
        activeBackground: 'bg-brightlavender-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-brightlavender-30',
        borderSecondary: 'border-brightlavender-40',
        connectorLine: 'bg-brightlavender-normal',
        iconBackground: 'bg-brightlavender-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-brightlavender-shade-200',
    },
    greenc: {
        background: 'bg-greenc-10 bg-opacity-[.28] hover:bg-greenc-20',
        activeBackground: 'bg-greenc-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-greenc-30',
        borderSecondary: 'border-greenc-40',
        connectorLine: 'bg-greenc-normal',
        iconBackground: 'bg-greenc-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-greenc-shade-200',
    },
    lbrightred: {
        background: 'bg-lbrightred-10 bg-opacity-[.28] hover:bg-lbrightred-20',
        activeBackground: 'bg-lbrightred-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-lbrightred-30',
        borderSecondary: 'border-lbrightred-40',
        connectorLine: 'bg-lbrightred-normal',
        iconBackground: 'bg-lbrightred-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-550',
        secondaryValue: 'text-lbrightred-normal',
    },
    llred: {
        background: 'bg-llred-10 bg-opacity-[.28] hover:bg-llred-20',
        activeBackground: 'bg-llred-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-llred-30',
        borderSecondary: 'border-llred-40',
        connectorLine: 'bg-llred-normal',
        iconBackground: 'bg-llred-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-llred-shade-200',
    },
    sea: {
        background: 'bg-sea-10 bg-opacity-[.28] hover:bg-sea-20',
        activeBackground: 'bg-sea-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-sea-30',
        borderSecondary: 'border-sea-40',
        connectorLine: 'bg-sea-normal',
        iconBackground: 'bg-sea-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-sea-shade-200',
    },
    vintagecoral: {
        background: 'bg-vintagecoral-10 bg-opacity-[.88] hover:bg-vintagecoral-20',
        activeBackground: 'bg-vintagecoral-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-vintagecoral-30',
        borderSecondary: 'border-vintagecoral-40',
        connectorLine: 'bg-vintagecoral-normal',
        iconBackground: 'bg-vintagecoral-normal',
        iconColor: 'text-white',
        mainValue: '--text-vintagecoral-shade-100 text-gray-700',
        secondaryValue: '--text-vintagecoral-tint-200 text-vintagecoral-normal',
    },
    coolgreen: {
        background: 'bg-coolgreen-10 bg-opacity-[.28] hover:bg-coolgreen-20',
        activeBackground: 'bg-coolgreen-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-coolgreen-30',
        borderSecondary: 'border-coolgreen-40',
        connectorLine: 'bg-coolgreen-normal',
        iconBackground: 'bg-coolgreen-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-coolgreen-shade-200',
    },
    limegreen: {
        background: 'bg-limegreen-10 bg-opacity-[.88] hover:bg-limegreen-20',
        activeBackground: 'bg-limegreen-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-limegreen-30',
        borderSecondary: 'border-limegreen-40',
        connectorLine: 'bg-limegreen-normal',
        iconBackground: 'bg-limegreen-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-limegreen-shade-200',
    },
    lillac: {
        background: 'bg-lillac-10 bg-opacity-[.28] hover:bg-lillac-20',
        activeBackground: 'bg-lillac-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-lillac-30',
        borderSecondary: 'border-lillac-40',
        connectorLine: 'bg-lillac-normal',
        iconBackground: 'bg-lillac-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-lillac-shade-200',
    },
    redish: {
        background: 'bg-redish-10 bg-opacity-[.28] hover:bg-redish-20',
        activeBackground: 'bg-redish-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-redish-30',
        borderSecondary: 'border-redish-40',
        connectorLine: 'bg-redish-normal',
        iconBackground: 'bg-redish-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-redish-shade-200',
    },
    lighredish: {
        background: 'bg-lighredish-10 bg-opacity-[.28] hover:bg-lighredish-20',
        activeBackground: 'bg-lighredish-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-lighredish-30',
        borderSecondary: 'border-lighredish-40',
        connectorLine: 'bg-lighredish-normal',
        iconBackground: 'bg-lighredish-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-lighredish-shade-200',
    },
    mustardtwo: {
        background: 'bg-mustardtwo-10 bg-opacity-[.28] hover:bg-mustardtwo-20',
        activeBackground: 'bg-mustardtwo-20',
        backgroundEffects: 'backdrop-blur-[12px]',
        borderPrimary: 'border-mustardtwo-20',
        borderSecondary: 'border-mustardtwo-40',
        connectorLine: 'bg-mustardtwo-normal',
        iconBackground: 'bg-mustardtwo-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-mustardtwo-shade-100 --text-mustardtwo-shade-200',
    },
    washedmustard: {
        background: 'bg-washedmustard-10 bg-opacity-[.28] hover:bg-washedmustard-20',
        activeBackground: 'bg-washedmustard-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-washedmustard-30',
        borderSecondary: 'border-washedmustard-40',
        connectorLine: 'bg-washedmustard-normal',
        iconBackground: 'bg-washedmustard-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-washedmustard-shade-200',
    },
    navysilverish: {
        background: 'bg-navysilverish-10 bg-opacity-[.28] hover:bg-navysilverish-20',
        activeBackground: 'bg-navysilverish-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-navysilverish-30',
        borderSecondary: 'border-navysilverish-40',
        connectorLine: 'bg-navysilverish-normal',
        iconBackground: 'bg-navysilverish-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-navysilverish-shade-200',
    },
    washedpurple: {
        background: 'bg-washedpurple-10 bg-opacity-[.28] hover:bg-washedpurple-20',
        activeBackground: 'bg-washedpurple-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-washedpurple-30',
        borderSecondary: 'border-washedpurple-40',
        connectorLine: 'bg-washedpurple-normal',
        iconBackground: 'bg-washedpurple-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-washedpurple-shade-200',
    },
    purplishblue: {
        background: 'bg-purplishblue-10 bg-opacity-[.28] hover:bg-purplishblue-20',
        activeBackground: 'bg-purplishblue-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-purplishblue-30',
        borderSecondary: 'border-purplishblue-40',
        connectorLine: 'bg-purplishblue-normal',
        iconBackground: 'bg-purplishblue-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-purplishblue-shade-200',
    },
    washedlightblue: {
        background: 'bg-washedlightblue-10 bg-opacity-[.28] hover:bg-washedlightblue-20',
        activeBackground: 'bg-washedlightblue-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-washedlightblue-30',
        borderSecondary: 'border-washedlightblue-40',
        connectorLine: 'bg-washedlightblue-normal',
        iconBackground: 'bg-washedlightblue-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-washedlightblue-shade-200',
    },
    yetanotherpurple: {
        background: 'bg-yetanotherpurple-10 bg-opacity-[.28] !backdrop-blur-[12px] hover:bg-yetanotherpurple-20',
        activeBackground: 'bg-yetanotherpurple-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-yetanotherpurple-30',
        borderSecondary: 'border-yetanotherpurple-40',
        connectorLine: 'bg-yetanotherpurple-normal',
        iconBackground: 'bg-yetanotherpurple-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-yetanotherpurple-shade-200',
    },

    yetanotherpurplishblue: {
        background: 'bg-yetanotherpurplishblue-10 bg-opacity-[.28] hover:bg-yetanotherpurplishblue-20',
        activeBackground: 'bg-yetanotherpurplishblue-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-yetanotherpurplishblue-30',
        borderSecondary: 'border-yetanotherpurplishblue-40',
        connectorLine: 'bg-yetanotherpurplishblue-normal',
        iconBackground: 'bg-yetanotherpurplishblue-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-yetanotherpurplishblue-shade-200',
    },

    yetanotherwashedblue: {
        background: 'bg-yetanotherwashedblue-10 bg-opacity-[.28] hover:bg-yetanotherwashedblue-20',
        activeBackground: 'bg-yetanotherwashedblue-20',
        backgroundEffects: 'backdrop-blur-[8px]',
        borderPrimary: 'border-yetanotherwashedblue-30',
        borderSecondary: 'border-yetanotherwashedblue-40',
        connectorLine: 'bg-yetanotherwashedblue-normal',
        iconBackground: 'bg-yetanotherwashedblue-normal',
        iconColor: 'text-white',
        mainValue: 'text-gray-650',
        secondaryValue: 'text-yetanotherwashedblue-shade-200',
    },
}

export type ConditionContextThemePlace =
    | 'default'
    | 'context'
    | 'preconditions'
    | 'predates'
    | 'tier-base'
    | 'tier-subchild'
    | 'popup-sidebar'
    | (string & {})

type ConditionContextThemePaletteKey = ConditionColorPalette | 'default'

export const conditionContextCardThemeOverridesByPlace: Partial<
    Record<ConditionContextThemePlace, Partial<Record<ConditionContextThemePaletteKey, Partial<ConditionContextCardThemeClasses>>>>
> = {
    // Example:
    // 'tier-subchild': {
    //     default: {
    //         mainValue: 'text-gray-700',
    //     }
    // }
    'popup-sidebar': {
        default: {
            background: 'bg-yetanotherpurple-10 bg-opacity-[.97] --backdrop-blur-[12px]'
        }
    },
    'tier-branch': {
        /*default: {
            mainValue: 'text-washedmustard-normal',
        }*/
    },
    'tier-base': {
/*
        default: {
            mainValue: 'text-washedmustard-shade-300',
            borderPrimary: 'border-washedmustard-70 !border-[1px]',
            background: 'bg-washedmustard-10 bg-opacity-[.98] hover:bg-washedmustard-20',
        }
*/
    },
    'tier-subchild': {
/*
        default: {
            //mainValue: 'text-washedmustard-shade-100',
            borderPrimary: 'border-washedmustard-70 !border-[1px]',
            background: 'bg-washedmustard-10 bg-opacity-[.98] hover:bg-washedmustard-20',
            mainValue: 'text-gray-650  --text-washedmustard-shade-200',
            iconBackground: 'bg-washedmustard-normal',
        }
*/
    }
}

const mergeConditionContextCardThemeForPlace = (
    baseTheme: ConditionContextCardThemeClasses,
    palette: ConditionColorPalette,
    place: ConditionContextThemePlace
): ConditionContextCardThemeClasses => {
    const placeOverrides = conditionContextCardThemeOverridesByPlace[place]

    if (!placeOverrides) {
        return baseTheme
    }

    return {
        ...baseTheme,
        ...(placeOverrides.default || {}),
        ...(placeOverrides[palette] || {}),
    }
}

export const conditionContextCardThemeByPalette = (
    place: ConditionContextThemePlace = 'default'
): Partial<Record<ConditionColorPalette, ConditionContextCardThemeClasses>> => {
    if (place === 'default') {
        return defaultConditionContextCardThemeByPalette
    }

    if (!conditionContextCardThemeOverridesByPlace[place]) {
        return defaultConditionContextCardThemeByPalette
    }

    const themes = {} as Partial<Record<ConditionColorPalette, ConditionContextCardThemeClasses>>

    Object.entries(defaultConditionContextCardThemeByPalette).forEach(([palette, baseTheme]) => {
        if (!baseTheme) {
            return
        }

        themes[palette as ConditionColorPalette] = mergeConditionContextCardThemeForPlace(
            baseTheme,
            palette as ConditionColorPalette,
            place
        )
    })

    return themes
}

export const getConditionContextCardTheme = (
    palette?: ConditionColorPalette,
    place: ConditionContextThemePlace = 'default'
): ConditionContextCardThemeClasses | undefined => {
    const themesByPalette = conditionContextCardThemeByPalette(place)
    const targetPalette = palette || defaultConditionColorPalette

    return themesByPalette[targetPalette] || themesByPalette[defaultConditionColorPalette]
}

export const applyConditionContextCardTheme = (
    color: Color | ColorWithCustomTint,
    conditionCardTheme?: ConditionContextCardThemeClasses
): Color | ColorWithCustomTint => {
    if (!conditionCardTheme) {
        return color
    }

    const baseColor = color instanceof Color ? color : color.color
    const inheritedTint = color instanceof Color ? undefined : color.tint

    return {
        color: baseColor,
        tint: (currentColor, type, context, path) => {
            const inheritedValue = inheritedTint?.(currentColor, type, context, path)

            if (inheritedValue) {
                return inheritedValue
            }

            switch (context) {
                case 'card-background':
                    if (type === 'get' && path === 'background.light') {
                        return classNames(conditionCardTheme.background, conditionCardTheme.backgroundEffects)
                    }
                    break
                case 'card-background-active':
                    if (type === 'get' && path === 'background.extra') {
                        return conditionCardTheme.activeBackground
                    }
                    break
                case 'icon-background':
                    if (type === 'get' && path === 'background.dark') {
                        return conditionCardTheme.iconBackground
                    }
                    break
                case 'icon-color':
                    if (type === 'text') {
                        return conditionCardTheme.iconColor
                    }
                    break
                case 'card-main-value':
                    if (type === 'get' && path === 'text.dark.primary') {
                        return conditionCardTheme.mainValue
                    }
                    break
                case 'card-secondary-value':
                    if (type === 'get' && path === 'text.dark.secondary') {
                        return conditionCardTheme.secondaryValue
                    }
                    break
            }

            if (type === 'get' && path === 'border.light.primary') {
                return conditionCardTheme.borderPrimary
            }

            if (type === 'get' && path === 'border.light.secondary') {
                return conditionCardTheme.borderSecondary
            }

            if (type === 'get' && path === 'background.dark') {
                return conditionCardTheme.connectorLine
            }

            return undefined
        }
    } as ColorWithCustomTint
}