// 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 = Object.freeze({
    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' },
        { name: 'blue tint', src: 'Glass-NoShade-BlueTint.svg' },
        { name: 'green tint privacy', src: 'Glass-NoShade-GreenTint.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.
const getTintImage = (glassLocation, colorString) => {
    // Windshield glass has special images, all other glass uses the same though.
    const glassLoc = (glassLocation.toLowerCase() !== 'windshield') ? 'other' : 'windshield';
    if (tintMap[glassLoc] === undefined) {
        return '';
    }

    return tintMap[glassLoc].find((item) => item.name.toLowerCase() === colorString.toLowerCase());
};

export default getTintImage;