// TintMap with array keys by location, lowercase to avoid as much string mismatching as possible.
// Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup.
// See vehicle-parts for implementation example.
const tintMap = {
    other: [
        // Blue Shade
        { name: "blue tint, blue shade", src: "Glass-BlueShade-BlueTint.svg" },
        { name: "brown tint, blue shade", src: "Glass-BlueShade-BrownTint.svg" },
        { name: "gray tint, blue shade", src: "Glass-BlueShade-GrayTint.svg" },
        { name: "green tint, blue shade", src: "Glass-BlueShade-GreenTint.svg" },
        { name: "clear, blue shade", src: "Glass-BlueShade-NoTint.svg" },

        // Brown Shade
        { name: "brown tint, brown shade", src: "Glass-BrownShade-BrownTint.svg" },

        // Gray Shade
        { name: "blue tint, gray shade", src: "Glass-GrayShade-BlueTint.svg" },
        { name: "brown tint, gray shade", src: "Glass-GrayShade-BrownTint.svg" },
        { name: "gray tint, gray shade", src: "Glass-GrayShade-GrayTint.svg" },
        { name: "green tint, gray shade", src: "Glass-GrayShade-GreenTint.svg" },

        // Green Shade
        { name: "blue tint, green shade", src: "Glass-GreenShade-BlueTint.svg" },
        { name: "brown tint, green shade", src: "Glass-GreenShade-BrownTint.svg" },
        { name: "green tint, green shade", src: "Glass-GreenShade-GreenTint.svg" },

        // Tints Only
        { name: "blue tint privacy", src: "Glass-NoShade-BlueTint.svg" },
        { name: "bronze tint", src: "Glass-NoShade-BrownTint.svg" },
        { name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" },
        { name: "privacy, black frame", src: "Glass-NoShade-Privacy.svg" },
        { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" },
        { name: "green tint", src: "Glass-NoShade-GreenTint.svg" },
        { name: "gray tint privacy", src: "Glass-NoShade-GrayTint.svg" },

        // No shade or tint
        { name: "clear", src: "Glass-NoShade-NoTint.svg" },
    ],

    windshield: [
        // Blue Shade
        { name: "blue tint, blue shade", src: "Windshield-BlueShade-BlueTint.svg" },
        { name: "bronze tint, blue shade", src: "Windshield-BlueShade-BrownTint.svg" },
        { name: "gray tint, blue shade", src: "Windshield-BlueShade-GrayTint.svg" },
        { name: "green tint, blue shade", src: "Windshield-BlueShade-GreenTint.svg" },
        { name: "clear, blue shade", src: "Windshield-BlueShade-NoTint.svg" },

        // Brown Shade
        { name: "bronze tint, bronze shade", src: "Windshield-BrownShade-BrownTint.svg" },

        // Gray Shade
        { name: "blue tint, gray shade", src: "Windshield-GrayShade-BlueTint.svg" },
        { name: "brown tint, gray shade", src: "Windshield-GrayShade-BrownTint.svg" },
        { name: "gray tint, gray shade", src: "Windshield-GrayShade-GrayTint.svg" },
        { name: "green tint, gray shade", src: "Windshield-GrayShade-GreenTint.svg" },

        // Green Shade
        { name: "blue tint, green shade", src: "Windshield-GreenShade-BlueTint.svg" },
        { name: "brown tint, green shade", src: "Windshield-GreenShade-BrownTint.svg" },
        { name: "green tint, green shade", src: "Windshield-GreenShade-GreenTint.svg" },

        // Tints Only
        { name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
        { name: "bronze tint", src: "Windshield-NoShade-BrownTint.svg" },
        { name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" },
        { name: "privacy, black frame", src: "Windshield-NoShade-Privacy.svg" },
        { name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" },
        { name: "green tint", src: "Windshield-NoShade-GreenTint.svg" },
        { name: "gray tint privacy", src: "Windshield-NoShade-GrayTint.svg" },

        // No shade or tint
        { name: "clear", src: "Windshield-NoShade-NoTint.svg" },
    ],
};

// Gets the tint image source string given the glass location, and the tint description (like 'Green Tint')
// Use lowered strings here to try to avoid mismatch. Returns an empty string if array key doesn't exist.
// Returns undefined if no items are found.
export function getTintImage(glassLocation, colorString) {
    // Windshield glass has special images, all other glass uses the same though.
    if (glassLocation?.toLowerCase() !== "windshield") {
        glassLocation = "other";
    }

    if (tintMap[glassLocation.toLowerCase()] === undefined) {
        return "";
    }

    const tintImageSource = tintMap[glassLocation.toLowerCase()].find(
        (item) => item.name.toLowerCase() == colorString.toLowerCase()
    );

    return tintImageSource;
}