document.addEventListener('DOMContentLoaded', function() {

    const constFullWidth = {
            fullWidthBanner : 'fullWidth-banner',
            headingClass : '.fullWidth-banner__text',
            ctaClass : '.fullWidth-banner__link',
            imageClass : '.fullWidth-banner__image',
            click : 'click',
            category : 'Full width banner',
            type : 'Button',
            alt : 'alt'
        },
        banner = document.getElementById(constFullWidth.fullWidthBanner), 
        elements = banner.querySelectorAll(constFullWidth.ctaClass);

    let dataLayerFullWidth = {
            event_name : "ui_interaction",
            event_action : "Click Component"
        }
            
    elements.forEach((item) => {
        item.addEventListener(constFullWidth.click, function handleClick(event){
            
            DataLayer.updateAttributes([({
                name: utagVariables.TAGS.EVENT_NAME,
                value: dataLayerFullWidth.event_name
            }), ({
                name: utagVariables.TAGS.EVENT_ACTION,
                value: dataLayerFullWidth.event_action
            }), ({
                name: utagVariables.TAGS.EVENT_CATEGORY,
                value: constFullWidth.category
            }), ({
                name: utagVariables.TAGS.EVENT_LABEL,
                value: banner.querySelectorAll(constFullWidth.headingClass)[0].innerText
            }), ({
                name: utagVariables.TAGS.COMPONENT_NAME,
                value: this.querySelector(constFullWidth.imageClass).getAttribute(constFullWidth.alt)
            }), ({
                name: utagVariables.TAGS.COMPONENT_TYPE,
                value: constFullWidth.type
            })], true);

            event.preventDefault();
        });
    });
});