// 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 = {
    rear: [
        // Blue Shade
        { name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" },
        { name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" },
        { name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" },
        { name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" },
        { name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" },

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

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

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

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

        // No shade or tint
        { name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
    ],

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

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

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

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

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

        // No shade or tint
        { name: "no shade, no tint", 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) {

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

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

    return tintImageSource;
}