content_script.js

const editIconSvg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
<g>
  <g>
    <path d="m179.2,410.4l-77.3-77.4 272.5-272.9 77.3,77.4-272.5,272.9zm-96-38.3l56.9,57-79.2,22.3 22.3-79.3zm411.8-249l-106.2-106.4c-7.7-7.7-21.2-7.7-28.9-3.55271e-15l-301.3,301.8c-2.5,2.5-4.3,5.5-5.2,8.9l-41.6,148c-2,7.1 0,14.8 5.2,20 3.9,3.9 11.7,6.7 20,5.2l147.8-41.7c3.4-0.9 6.4-2.7 8.9-5.2l301.3-301.7c8-8 8-20.9 0-28.9z"/>
  </g>
</g>
</svg>`
const prevImgSvg = `<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<metadata>
    <sfw xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds width="505" height="984" bottomLeftOrigin="true" x="0" y="-120">
        </sliceSourceBounds>
    </sfw>
</metadata>
<g>
    <g>
        <g>
            <path d="M12,24C5.4,24,0,18.6,0,12S5.4,0,12,0s12,5.4,12,12S18.6,24,12,24z M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10
S17.5,2,12,2z" />
        </g>
    </g>
    <g>
        <g>
            <path d="M13,16c-0.3,0-0.5-0.1-0.7-0.3l-3-3c-0.4-0.4-0.4-1,0-1.4l3-3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L11.4,12l2.3,2.3
c0.4,0.4,0.4,1,0,1.4C13.5,15.9,13.3,16,13,16z" />
        </g>
    </g>
</g>
</svg>`

const noDescriptionSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.93 79.67"><defs><style>.d{fill:#f4f4f4;}</style></defs><g id="a"/><g id="b"><g id="c"><path class="d" d="M94.08,61.94L57.65,5.28c-4.53-7.04-14.83-7.04-19.36,0L1.85,61.94c-4.93,7.66,.57,17.73,9.68,17.73H84.41c9.11,0,14.6-10.07,9.68-17.73Zm-46.12,8.38h0c-2.98,0-5.4-2.42-5.4-5.4s2.42-5.4,5.4-5.4h0c2.98,0,5.4,2.42,5.4,5.4s-2.42,5.4-5.4,5.4Zm6.24-42.46l-2.54,23.7c-.2,1.89-1.8,3.32-3.69,3.32h0c-1.9,0-3.49-1.43-3.69-3.32l-2.54-23.7c-.4-3.71,2.51-6.94,6.24-6.94h0c3.73,0,6.63,3.23,6.24,6.94Z"/></g></g></svg>`
const hasDescriptionSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.9 81.91"><defs><style>.d{fill:#f4f4f4;}</style></defs><g id="a"/><g id="b"><g id="c"><path class="d" d="M45.97,.31h0C23.53-2.46,3.09,13.49,.31,35.93c-2.78,22.44,13.17,42.89,35.61,45.66,22.44,2.78,42.89-13.17,45.66-35.61C84.36,23.53,68.42,3.09,45.97,.31Zm20.24,31.39s0,0-.01,.02h0l-28.13,34.31-20.56-18.16c-2.24-1.97-2.46-5.39-.49-7.64h0c1.97-2.25,5.39-2.47,7.64-.49h0l12.14,10.72,21.02-25.63c1.89-2.3,5.29-2.64,7.6-.76,2.32,1.89,2.67,5.29,.78,7.61Z"/></g></g></svg>`

const inclusioLogo = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 311 60.85"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="155.5" y1="60.85" x2="155.5" gradientUnits="userSpaceOnUse"><stop offset="0.33" stop-color="#d4425b"/><stop offset="1" stop-color="#b83d74"/></linearGradient></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Group_903" data-name="Group 903"><path id="Path_394" data-name="Path 394" class="cls-1" d="M112.42,55.35a4.13,4.13,0,0,1-4.12-4.12V26.86a4.12,4.12,0,1,1,8.24,0h0V51.23A4.12,4.12,0,0,1,112.42,55.35Zm161.17-4.12V26.86a4.12,4.12,0,1,0-8.24,0h0V51.23a4.13,4.13,0,0,0,4.12,4.12h0a4.12,4.12,0,0,0,4.12-4.12Zm-75,0V14.16a4.12,4.12,0,0,0-8.23,0V51.23a4.12,4.12,0,1,0,8.23,0Zm-47.7,0V36.64a13.9,13.9,0,0,0-27.8,0V51.23a4.12,4.12,0,0,0,8.24,0V36.64a5.66,5.66,0,0,1,11.32,0V51.23a4.12,4.12,0,0,0,8.24,0Zm81.68-9.78V26.86a4.12,4.12,0,0,0-8.24,0V41.45a5.66,5.66,0,0,1-11.32,0V26.86a4.12,4.12,0,1,0-8.24,0V41.45a13.9,13.9,0,0,0,27.8,0ZM311,39.05a16.22,16.22,0,1,0-16.22,16.21A16.24,16.24,0,0,0,311,39.05Zm-8.24,0a8,8,0,1,1-8-8,8,8,0,0,1,8,8ZM183.6,49.28a4.12,4.12,0,1,0-6.39-5.2h0a8,8,0,1,1-.09-10.18,4.12,4.12,0,0,0,5.81.49h0a4.12,4.12,0,0,0,.49-5.8,16.22,16.22,0,1,0,.18,20.69Zm-66.1-34.6a5.07,5.07,0,0,0-5.08-5.08h0a5.08,5.08,0,1,0,5.08,5.08Zm157.22,0a5.08,5.08,0,1,0-5.07,5.08,5.07,5.07,0,0,0,5.07-5.08ZM61.56,0A20.65,20.65,0,0,0,41.31,20.65,20.66,20.66,0,0,0,21.06,0C9.48-.22,0,9.48,0,21.06v3A41.32,41.32,0,0,0,12.24,53.43h0a41.52,41.52,0,0,0,10.22,7.42V35.64A3.55,3.55,0,0,1,25.8,32a3.45,3.45,0,0,1,3.56,3.35v7.8a1.14,1.14,0,0,0,1.14,1.14h.05a1.14,1.14,0,0,0,1.14-1.14v-14A3.55,3.55,0,0,1,35,25.6a3.45,3.45,0,0,1,3.56,3.34V43.19a1.14,1.14,0,0,0,1.14,1.14h.09A1.15,1.15,0,0,0,41,43.19h0V25.49a3.55,3.55,0,0,1,3.35-3.6,3.45,3.45,0,0,1,3.55,3.35v18A1.14,1.14,0,0,0,49,44.33h0a1.14,1.14,0,0,0,1.14-1.14h0v-14A3.54,3.54,0,0,1,53.5,25.6,3.45,3.45,0,0,1,57.06,29v24a.48.48,0,0,0,.87.28l2-3a3.55,3.55,0,0,1,4.8-1.06,3.47,3.47,0,0,1,1,4.78l-.06.09-4.16,6a41.33,41.33,0,0,0,8.81-6.64h0A41.33,41.33,0,0,0,82.63,24.09v-3C82.62,9.48,73.14-.22,61.56,0M241.84,45.2c1.43,0,2.4,1.16,3.39,2.08s2,2.07,4,2.07c2.46,0,3.79-1,3.79-2.89s-1.38-2.87-5.67-4.23C239,39.59,237.08,36.7,237.08,32c0-4.18,2.61-9.67,11.72-9.67,4.68,0,7.7,1.47,9.52,3.59a3.94,3.94,0,0,1-3.07,6.44h0a4.06,4.06,0,0,1-3.48-2.09,3.47,3.47,0,0,0-3.27-1.61c-1.87,0-3,.94-3,2.59s1.24,2.5,5.36,3.72c8,2.4,10.62,5.4,10.62,10.53,0,6.6-4.94,10.15-12.56,10.15-4.9,0-8.41-1.52-10.49-4.15a3.92,3.92,0,0,1,3.08-6.34Z"/></g></g></g></svg>'

const inclusioPinkColor = '#ca3f64';

let changes = false;
let readyForPublish = false;

const backend_url = `https://680e-34-68-13-255.ngrok.io`

const galleryCSS= `
.galleryDiv.hidden{
    display: none;
}

.galleryDiv .close-btn {
    position: fixed;
    top: 5%;
    right: 5%;
    cursor: pointer;
    margin-top: 10vh;
}

.galleryDiv .close-btn svg {
    fill: white;
    width: 64px;
    height: 64px;
    color: white;
}

.galleryDiv .img-div {
    width: 17vw;
    height: 17vw;

    min-width: 170px;
    min-height: 170px;
}

.galleryDiv .img-div img {
    width: 100%;
    height: 100%;
}

.galleryDiv .img-div.main {
    width: 30vw;
    height: 30vw;

    min-width: 300px;
    min-height: 300px;
}

.galleryDiv .carousel {
    width: 100%;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
}

.galleryDiv .carousel>* {
    margin: 0px 20px;
}

.galleryDiv .text-area-div>div {
    padding-top: 20px;
    margin: auto;
    text-align: center;
    display: flex;
    justify-content: center;
}

.galleryDiv .text-area-div>div textarea {
    width: 30vw;
}

.galleryDiv .next-img-svg-div svg, .prev-img-svg-div svg{
    color: white;
    fill: white;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.galleryDiv .next-img-svg-div{
    transform: rotateY(180deg);
}`

const extensionStatusDivStyle = `

.extension-status-div{
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 20px;
    border-radius: 5px;
    z-index: 100;
    color: white;
    transition: .2s all;
}
.extension-status-div.on{
    background-color: green;
}

.extension-status-div.off{
    background-color: ${inclusioPinkColor};
}
`

const css = `
*{
    box-sizing: border-box;
}

body{
    height: auto !important;
}

.extension-header {
    overflow: hidden;
    background-color: white;
    position: sticky;
    min-height: 10vh;
    box-shadow: 0px 5px 11px -1px rgba(0,0,0,0.75);
    top:0;
    z-index: 10;

    padding: 10px;

    display: flex;
    align-items: flex-end;
}

@font-face {
    font-family: 'Quicksand';
    src: URL('${backend_url}/assets/quicksand.ttf') format('truetype');
  }

.extension-header{
    font-family: Quicksand
}

.extension-header .selected-image.has-alt-text{
    color: #2DC257;
}

.extension-header .selected-image.no-alt-text{
    color: ${inclusioPinkColor};
}

.extension-header .logo svg{
    height: 2.2rem;
}

.extension-header .selected-image{
    flex: 1;
    text-align: center;
    font-size: 1.2em;
}

.extension-header .discard-and-save-btn-container{
    display: flex;
    font-weight:bold;
}

.extension-header .discard-and-save-btn-container.hidden{
    visibility: hidden;
    font-weight:bold;
}

.extension-header .discardBtn{
    color: ${inclusioPinkColor};
    border: 3px solid ${inclusioPinkColor};
    padding: 3px 10px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all .2s;
}

.extension-header .discardBtn:hover{
    color: white;
    background: ${inclusioPinkColor};
}

.extension-header .publishBtn{
    background-color: ${inclusioPinkColor};
    color: white;
    transition: .2s all;
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 9999px;
    font-size: 1.4em;
    maring-left: 20px;
    font-weight:bold;
}

.extension-header .publishBtn:hover{
    background-color: white;
    border: 2px solid ${inclusioPinkColor};
    color: ${inclusioPinkColor};
}


.extension-header .publishBtn.hidden{
    display: none;
}

.extension-header .saveBtn{
    background-color: ${inclusioPinkColor};
    border: 3px solid ${inclusioPinkColor};
    color: white;
    padding: 3px 10px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all .2s;
}

.extension-header .saveBtn:hover{
    background-color: white;
    color: ${inclusioPinkColor};
}

.vr{
    height: 2em;
    border: 1px solid gray;
    background-color: gray;
    margin: 0 10px;
}


.img-wrapper-div{
    border: 5px solid black;
}

.img-wrapper-div .wrapper-controls{
    display: flex;
    align-items: flex-end;
}

.img-wrapper-div .wrapper-controls .img-alt-text-div{
    font-size: 1rem;
    display: flex;
    align-items: flex-end;
}

.img-wrapper-div .wrapper-controls .img-alt-text-div svg{
    width: 1.5rem;
    margin-right: 10px;
}

.img-wrapper-div .wrapper-controls .hidden{
    display: none;
}

.img-wrapper-div .edit-icon-div svg{
    margin-left: 10px;
    width: 1.2em;
    height: 1.2em;
    fill: white;
}

.img-wrapper-div .edit-icon-div{
    cursor: pointer;
}

.img-wrapper-div.has-alt-text{
    border-color: #2DC257;
    background-color: #2DC257;
}

.img-wrapper-div.no-alt-text{
    border-color: ${inclusioPinkColor};
    background-color: ${inclusioPinkColor};
}

.wrapper-controls{
    color: white;
    padding: 5px;
    font-size: 1.4em;
}

.galleryDiv{
    position:fixed;
    padding:0;
    margin:0;
    padding-top: 15vh;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.75);
    overflow: auto;
}
${extensionStatusDivStyle}

${galleryCSS}
`

loadCSS(extensionStatusDivStyle)

let selectedImgRef = undefined;

let galleryImagesArray = [];

let addedAltTexts = {}

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        switch(request.message){
            case 'extension_status':
                extensionStatusChange(request.status, request.role)
            break;
        }
    }
)

const debounce = (fn, delay) => {
    let timeoutID; // Initially undefined

    return function (...args) {

        // cancel previously unexecuted timeouts
        if (timeoutID) {
            clearTimeout(timeoutID);
        }

        timeoutID = setTimeout(() => {
            fn(...args);
        }, delay)
    }
}

function loadCSS(css) {
    var head = document.head || document.getElementsByTagName("head")[0];
    const style = document.createElement("style");
    style.id = "extension";
    style.textContent = css;
    head.appendChild(style);
}

function trimQueryParamsFromUrl(url){
    return url.split('?')[0]
}

function setAltTextOfImageArrayToStorage(imgArray) {
    const pageUrl = trimQueryParamsFromUrl(window.location.href);

    chrome.storage.local.get('alt_text', function (result) {
        let altTextObject = result.alt_text;

        if (!altTextObject) altTextObject = {};

        let currentPageAltText = altTextObject[pageUrl];

        if (!currentPageAltText) {
            currentPageAltText = {};
        }

        imgArray.forEach(img => {
            currentPageAltText[img.src] = img.alt ?? ''
        })

        altTextObject[pageUrl] = currentPageAltText;
        chrome.storage.local.set({'alt_text' : altTextObject})
    })
}

function getImageAltTextFromStorage(imgSrc){
    const pageUrl = trimQueryParamsFromUrl(window.location.href);

    return new Promise(function (resolve, reject) {
        chrome.storage.local.get('alt_text', function (result) {
            let altTextObject = result.alt_text;
    
            if(altTextObject){
                if(altTextObject[pageUrl]){
                    resolve(altTextObject[pageUrl][imgSrc])
                }
            }
    
            resolve(undefined)
        })
    });
}

function getExtensionStatus(){

    return new Promise(function (resolve, reject) {
        chrome.storage.sync.get('ext-status', function (result) {
            const extStatus = result['ext-status']
            const pageUrl = trimQueryParamsFromUrl(window.location.href);
            resolve(extStatus[pageUrl])
    })})
}

function getUser(){
    return new Promise(function (resolve, reject) {
        chrome.storage.sync.get('user', function (result) {
            const user = result['user']
            resolve(user)
    })})
}

function getPage(){
    return new Promise(function (resolve, reject) {
        const pageUrl = trimQueryParamsFromUrl(window.location.href);
        fetch(`${backend_url}/page`, {
            method: "POST",
            body: JSON.stringify({
                pageUrl,
            }),
            headers:{
                'Content-Type': 'application/json',
            }

        }).then(response=> response.json())
        .then(response =>{
            if(response.status == 200){
                resolve(response.payload)
            }else if(response.status == 404){
                resolve({page:{}, requested:{}})
            }else{
                alert('Error getting page data');
                console.log(response);
            }
        })
    })
}

//executes on page load
Promise.all([getUser(), getExtensionStatus()])
.then(userAndStatus =>{
    const [user, status] = userAndStatus;
    
    if(status){
        extensionStatusChange(status, user?.role, true)
    }
})

function throttle (callback, limit) {
    let wait = false;                  // Initially, we're not waiting
    return function () {               // We return a throttled function
        if (!wait) {                   // If we're not waiting
            callback.call();           // Execute users function
            wait = true;               // Prevent future invocations
            setTimeout(function () {   // After a period of time
                wait = false;          // And allow future invocations
            }, limit);
        }
    }
}

function savePage(pageUrl, pageTitle, altText){
    chrome.storage.sync.get('user', function (result) {
        const user = result['user']
        if(!user || !user.token){
            alert("You have to be logged in to perform this operation!");
            return;
        }else{
            fetch(`${backend_url}/page`, {
                method: 'PUT',
                body: JSON.stringify({
                    pageUrl,
                    altText,
                    pageTitle,
                    addedAltTexts
                }),
                headers:{
                    'Content-Type': 'application/json',
                    Authorization: user.token
                }

            }).then(response=> response.json())
            .then(response =>{
                if(response.status == 200){
                    alert("Page successfully saved")
                    //hide save and discard btns

                    changes = true;
                    document.querySelector('.extension-header .discard-and-save-btn-container').classList.add('hidden');

                    document.querySelector('.extension-header .publishBtn').classList.remove('hidden');

                }else if(response.status == 401){
                    alter("You don't have permission to executi this operation")
                }else{
                    alert('Error saving page');
                    console.log(response);
                }
            })
            .catch(error=>{
                alert('Error saving page');
                console.log(error);
            })
            .finally(()=>{
                addedAltTexts = {}
            })
        }
    })
}

function publishPage(){
    return new Promise(function (resolve, reject) {
        const pageUrl = trimQueryParamsFromUrl(window.location.href);
        getUser()
        .then(user=>{
            const token = user.token;
            fetch(`${backend_url}/publish-page`, {
                method: "POST",
                body: JSON.stringify({
                    pageUrl,
                }),
                headers:{
                    'Content-Type': 'application/json',
                    Authorization: token
                }
    
            }).then(response=> response.json())
            .then(response =>{
                if(response.status == 200){
                    resolve(response.payload)
                    document.querySelector('.extension-header .publishBtn').classList.add('hidden')
                }else{
                    alert('Error getting page data');
                    console.log(response);
                }
            }).catch(error => {
                reject(error);
            })
        })
    })
}

function extensionStatusChange(extStatus, role, showNotification){
    if(extStatus){
        getPage()
        .then(({ page, requested}) => {
            const images_alt_text = page?.images_alt_text ?? {};

            let images = Array.from(document.querySelectorAll('img:not(.gallery-img)'));
            
            for(const imgSrc in images_alt_text){
                const image = images.find(img => img.src == imgSrc);
                
                if(!image) {
                    continue;
                }

                image.alt = images_alt_text[imgSrc]
            }

            if(role == "Volunteer"){
                if(document.querySelector('.extension-header') && extStatus == true) return;
            
                const body = document.querySelector('body')
                const header = document.createElement('div')
                header.innerHTML = `
                <div class="logo">${inclusioLogo}</div>
                <div class="selected-image" >No Image Selected</div>
                <div class="discard-and-save-btn-container ${changes ? '' : 'hidden'}">
                    <div class="discardBtn">Discard Changes</div>
                    <div class="vr"></div>
                    <div class="saveBtn">Save Changes</div>
                </div>
                <div class="publishBtn hidden">
                    Publish Page
                </div>
                `
                header.classList = "extension-header"
        
                loadCSS(css);
                body.insertBefore(header, body.firstChild)
        
                images = filterDuplicateImagesBySrc(images);
    
                images.forEach(img => {
                    const parent = img.parentNode
                    const wrapper = document.createElement('div')
                    wrapper.classList.add('img-wrapper-div')
        
                    const wrapperControls = document.createElement('div');
                    wrapperControls.classList.add('wrapper-controls')
                    let imageStatusMessage = ''

                            const altText = images_alt_text[img.src] ?? img.alt;
                            if (!altText.trim()) {
                                wrapper.classList.add('no-alt-text')
                                imageStatusMessage = `${noDescriptionSvg} No Description`
                    } else {
                        wrapper.classList.add('has-alt-text')
                        imageStatusMessage = `${hasDescriptionSvg} Has Description`;
                    }
                    parent.replaceChild(wrapper, img);
                    wrapper.appendChild(img);

                    wrapperControls.innerHTML = `
                    <div class="img-alt-text-div">${imageStatusMessage}</div>`
                    // <div class="edit-input hidden"><input size="${altText.length}" type="text" value="${altText}"></div>
                    // <div class="edit-icon-div"> ${editIconSvg}</div>`
                    wrapper.appendChild(wrapperControls)

                    //FOR OPENING GALLERY
                    wrapper.addEventListener('click', (event) => {
                        event.stopPropagation();
                        event.stopImmediatePropagation();


                        toggleGallery(true, img)
                    })

                    setTimeout(() => {
                        const parentATag = wrapper.closest('a')
                        if (parentATag) parentATag.href = 'javascript:void(0)'


                        //EDIT with edit pen
                        // const imageAltTextDiv = wrapperControls.querySelector('.img-alt-text-div')

                        // wrapperControls.querySelector('.edit-icon-div').addEventListener('click', () => {

                        //     wrapperControls.querySelector('.edit-input').classList.toggle('hidden');
                        //     imageAltTextDiv.classList.toggle('hidden');
                        // })

                        // const input = wrapperControls.querySelector('.edit-input input')

                        // const debounceCb = debounce(() => {
                        //     changeImageAltTextInStorage(img.src, input.value);
                        //     imageAltTextDiv.innerText = input.value;
                        // }, 500);

                        // input.addEventListener('input', debounceCb)
                    }, 0)

                })
    
                setTimeout(() =>{
                    const discardBtn = document.querySelector('.extension-header .discardBtn')
                    const saveBtn = document.querySelector('.extension-header .saveBtn')
                    const publishBtn = document.querySelector('.extension-header .publishBtn')
    
                    discardBtn.addEventListener('click', function(){
                        changes = false;
                        window.location.reload();
                    })
    
                    publishBtn.addEventListener('click', ()=>{
                        changes = false;
                        publishPage()
                        .then(_ =>{
                            alert('Page successfully published!')
                            toggleGallery(false)
                        }).catch(error=>{
                            alert('Error publishing page')
                            
                        });
                    })
    
                    const saveFnWithThrottle = throttle(function(){
                        const allImages = Array.from(document.querySelectorAll('img:not(.gallery-img)'));
                        const altText = {};
    
                        allImages.forEach(img =>{
                            altText[img.src] = img.alt;
                        })
                        const pageUrl = trimQueryParamsFromUrl(window.location.href);
                        const pageTitle = document.title;
                        savePage(pageUrl, pageTitle, altText)
                    },200)
    
                    saveBtn.addEventListener('click', saveFnWithThrottle)
                }, 200)
        
                // setAltTextOfImageArrayToStorage(Array.from(images));
            }else if(role == "Consumer"){

            }
        })
        .catch(console.log)

        if(showNotification){
            showExtensionStatusMessage(true);//true means on
        }
    }else{
        //EXTENSION TURNED OFF
        if( role == "Volunteer"){
            const extHeader = document.querySelector('.extension-header');
            
            if(extHeader){
                if(showNotification){
                    showExtensionStatusMessage(false)
                }

                setTimeout(() => window.location.reload(),3200)
            }
        } else if (role == "Consumer") {
            if (showNotification) {
                showExtensionStatusMessage(false)
            }
            setTimeout(() => window.location.reload(), 3200)
        }
    }
    

    //for both roles update image alt texts

    
}

function showExtensionStatusMessage(flag, message){
    const extensionStatusDiv = document.createElement('div')
    extensionStatusDiv.classList.add('extension-status-div',flag ? 'on' : 'off')
    extensionStatusDiv.innerHTML = message ? message : (flag ? 'Inclusio turned on' : 'Inclusio turned off')
    document.body.appendChild(extensionStatusDiv)

    setTimeout(()=>{
        document.body.removeChild(extensionStatusDiv)
    },1500)
}

function changeImageAltTextInStorage(imgSrc, newAltText){
    const pageUrl = trimQueryParamsFromUrl(window.location.href);

    chrome.storage.local.get('alt_text', function (result) {
        let altTextObject = result.alt_text;

        if (!altTextObject) altTextObject = {};

        let currentPageAltText = altTextObject[pageUrl];

        if (!currentPageAltText) {
            currentPageAltText = {};
        }

        currentPageAltText[imgSrc] = newAltText;

        altTextObject[pageUrl] = currentPageAltText;
        chrome.storage.local.set({'alt_text' : altTextObject})
    })
}

function filterDuplicateImagesBySrc(galleryImagesArray) {
    if(typeof galleryImagesArray == 'object'){
        galleryImagesArray = Array.from(galleryImagesArray)
    }
    const srcs = galleryImagesArray.map(o=> o.src)
    const filtered = galleryImagesArray.filter(({ src }, index) => !srcs.includes(src, index + 1))
    return filtered;
}

function toggleGallery(show, selectedImage){
    let galleryDiv = document.querySelector('.galleryDiv');

    if(!galleryDiv){
        //gallery div not yet injected
        galleryDiv = document.createElement('div');
        galleryDiv.classList.add('galleryDiv')
        const body = document.querySelector('body')
        body.appendChild(galleryDiv)

        injectGalleryContent(galleryDiv);
        
        setTimeout(injectGalleryJavascript,0)

        galleryImagesArray = Array.from(document.querySelectorAll('img:not(.gallery-img)'));

        //remove images with same src (only one of them)
        galleryImagesArray = filterDuplicateImagesBySrc(galleryImagesArray);

        setTimeout(() => injectImagesIntoGallery(galleryImagesArray, selectedImage),0)

        // const allImages = document.querySelectorAll('img:not(.gallery-img)')
        // const allImagesSourcesAndAlts = Array.from(allImages).map(img => {
        //     return {src: img.src, alt: img.alt}
        // });

        // allImagesSourcesAndAlts.filter(obj =>{
        // })

        // setTimeout(injectImagesIntoGallery(allImagesSourcesAndAlts),1);
    }else{
        //gallery div already injected
        if (show) {
            galleryDiv.classList.remove('hidden')
            galleryImagesArray = Array.from(document.querySelectorAll('img:not(.gallery-img)'));

            //remove images with same src (only one of them)
            galleryImagesArray = filterDuplicateImagesBySrc(galleryImagesArray);

            setTimeout(() => injectImagesIntoGallery(galleryImagesArray, selectedImage), 0)
        } else {
            galleryDiv.classList.add('hidden')
        }
    }
}

function injectImagesIntoGallery(galleryImagesArray, selectedImage){
    galleryImagesArray = filterDuplicateImagesBySrc(galleryImagesArray)
    selectedImgRef = selectedImage;
    const mainImg = document.querySelector('.galleryDiv .img-div.main img');
    const textArea = document.querySelector('.galleryDiv textarea')
    const indexOfSelectedImg = galleryImagesArray.findIndex(img => selectedImage.src == img.src);

    const selectedImageHeaderDiv = document.querySelector('.extension-header .selected-image');

    extensionHeaderImageTitleUpdateByImage(selectedImage, indexOfSelectedImg+1)

    textArea.value = selectedImage.alt;

    mainImg.src = selectedImage.src;

    //setup prev i next images
    const prevImg = document.querySelector('.galleryDiv .img-div.prev img');
    prevImg.src = galleryImagesArray[indexOfSelectedImg-1].src

    const nextImg = document.querySelector('.galleryDiv .img-div.next img');
    nextImg.src = galleryImagesArray[indexOfSelectedImg+1].src
}

function injectGalleryJavascript() {

    const closeBtn = document.querySelector('.galleryDiv .close-btn');
    closeBtn.addEventListener('click', () => {
        toggleGallery(false);
        const selectedImageHeaderDiv = document.querySelector('.extension-header .selected-image');
        selectedImageHeaderDiv.innerHTML = 'No Image Selected';
        selectedImageHeaderDiv.classList.remove('no-alt-text')
        selectedImageHeaderDiv.classList.remove('has-alt-text')
    })

    const prevBtn = document.querySelector('.galleryDiv .prev-img-svg-div');

    prevBtn.addEventListener('click', () =>{
        let allImages = Array.from(document.querySelectorAll('img:not(.gallery-img)'));
        allImages = filterDuplicateImagesBySrc(allImages);
        let selectedImageIndex = allImages.findIndex(img => selectedImgRef.src == img.src)

        if(selectedImageIndex == 0) selectedImageIndex = 1

        if(selectedImageIndex <= 1){
            const prevImg = document.querySelector('.img-div.prev img');
            prevImg.src = ''
            prevImg.alt = '_'
        }


        //selected img is prev img
        selectedImgRef = allImages[selectedImageIndex - 1];
        const mainImg = document.querySelector('.img-div.main img');
        mainImg.src = selectedImgRef.src;

        //setup textarea
        const textarea = document.querySelector('.galleryDiv textarea');
        textarea.value = selectedImgRef.alt;

        //prev img is prev-prev img
        const prevImg = document.querySelector('.img-div.prev img');
        prevImg.src = allImages[selectedImageIndex - 2]?.src;

        //next img is selected img
        const nextImg = document.querySelector('.img-div.next img');
        nextImg.src = allImages[selectedImageIndex]?.src;


        //SETUP HEADER
        const selectedImageHeaderDiv = document.querySelector('.extension-header .selected-image')
        selectedImageHeaderDiv.innerHTML = `Image ${selectedImageIndex-1+1}`
        if(selectedImgRef.alt){
            selectedImageHeaderDiv.classList.add('has-alt-text')
            selectedImageHeaderDiv.classList.remove('no-alt-text')
        }else{
            selectedImageHeaderDiv.classList.add('no-alt-text')
            selectedImageHeaderDiv.classList.remove('yes-alt-text')
        }
    });

    const nextBtn = document.querySelector('.galleryDiv .next-img-svg-div');

    nextBtn.addEventListener('click', () =>{
        let allImages = Array.from(document.querySelectorAll('img:not(.gallery-img)'));
        allImages = filterDuplicateImagesBySrc(allImages);
        
        let selectedImageIndex = allImages.findIndex(img => selectedImgRef.src == img.src)

        if(selectedImageIndex == allImages.length - 1) selectedImageIndex = allImages.length-1

        if(selectedImageIndex >= allImages.length-1){
            const nextImg = document.querySelector('.img-div.next img');
            nextImg.src = ''
            nextImg.alt = '_'
        }

        //selected img is prev img
        selectedImgRef = allImages[selectedImageIndex + 1];
        const mainImg = document.querySelector('.img-div.main img');
        mainImg.src = selectedImgRef.src;

        //setup textarea
        const textarea = document.querySelector('.galleryDiv textarea');
        textarea.value = selectedImgRef.alt;

        //prev img is prev-prev img
        const prevImg = document.querySelector('.img-div.prev img');
        prevImg.src = allImages[selectedImageIndex].src;

        //next img is selected img
        const nextImg = document.querySelector('.img-div.next img');
        nextImg.src = allImages[selectedImageIndex+2]?.src;

        //SETUP HEADER
        const selectedImageHeaderDiv = document.querySelector('.extension-header .selected-image')
        selectedImageHeaderDiv.innerHTML = `Image ${selectedImageIndex+1+1}`
        if(selectedImgRef.alt){
            selectedImageHeaderDiv.classList.add('has-alt-text')
            selectedImageHeaderDiv.classList.remove('no-alt-text')
        }else{
            selectedImageHeaderDiv.classList.add('no-alt-text')
            selectedImageHeaderDiv.classList.remove('has-alt-text')
        }
    });


    const textarea = document.querySelector('.galleryDiv textarea');
    const debounceCb = debounce(() => {
        // changeImageAltTextInStorage(img.src, input.value);
        // imageAltTextDiv.innerText = input.value;

        changes = true;
        document.querySelector('.extension-header .discard-and-save-btn-container').classList.remove('hidden')
        document.querySelector('.extension-header .publishBtn').classList.add('hidden')

        addedAltTexts[selectedImgRef.src] = textarea.value.length - selectedImgRef.alt.length;

        selectedImgRef.alt = textarea.value;


        updateImageBorder(selectedImgRef);
    }, 500);

    textarea.addEventListener('input', debounceCb)
}

function extensionHeaderImageTitleUpdateByImage(selectedImageRef, index){
    const selectedImageHeaderDiv = document.querySelector('.extension-header .selected-image');
    if(index){
        selectedImageHeaderDiv.innerHTML = `Image ${index}`
    }
    if(selectedImageRef.alt){
        selectedImageHeaderDiv.classList.add("has-alt-text")
        selectedImageHeaderDiv.classList.remove("no-alt-text")
    }else{
        selectedImageHeaderDiv.classList.add("no-alt-text")
        selectedImageHeaderDiv.classList.remove("has-alt-text")
    }
}

function updateImageBorder(selectedImageReference){
    const selectedImageWrapperDiv = selectedImageReference.closest('.img-wrapper-div')
    const textDiv = selectedImageWrapperDiv.querySelector('.img-alt-text-div')
    if(selectedImageReference.alt){
        selectedImageWrapperDiv.classList.add("has-alt-text")
        selectedImageWrapperDiv.classList.remove("no-alt-text");
        textDiv.innerHTML = `${hasDescriptionSvg} Has Description`
    }else{
        selectedImageWrapperDiv.classList.add("no-alt-text")
        selectedImageWrapperDiv.classList.remove("has-alt-text")
        textDiv.innerHTML = `${noDescriptionSvg} No Description`
    }
    extensionHeaderImageTitleUpdateByImage(selectedImageReference)
}


// function selectImage(imageContainer, index) {
//     const selectedImage = imageContainer.querySelector('img');
//     const selectedImageSource = selectedImage.src;
//     imageContainer.setAttribute('selected', 'true')
//     selectedImage.src = selectedImageSource;
//     imageTextArea.value = selectedImage.alt
//     imageNumberSpan.innerHTML = index;
// }

function injectGalleryContent(galleryDiv){
    galleryDiv.innerHTML = `<div class="carousel">
    <div class="img-div prev"><img class="gallery-img" src="https://picsum.photos/500/500" alt=""></div>
    <div class="prev-img-svg-div">
        ${prevImgSvg}
    </div>

    <div class="img-div main"><img class="gallery-img" src="https://picsum.photos/500/500" alt=""></div>

    <div class="next-img-svg-div">
        ${prevImgSvg}
    </div>
    <div class="img-div next"><img class="gallery-img" src="https://picsum.photos/500/500" alt=""></div>
</div>
<div class="text-area-div">
    <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
</div>
<div class="close-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18" />
        <line x1="6" y1="6" x2="18" y2="18" />
    </svg>

</div>
    `
}


function keyPress(e) {
    var evtobj = window.event? event : e

    
    if (evtobj.keyCode == 90 && evtobj.ctrlKey){//CTRL + Z
        getUser()
        .then(user =>{
            const currentPageUrl = trimQueryParamsFromUrl(window.location.href);
            chrome.storage.sync.get('ext-status', function (result) {
                let extStatus = result['ext-status'];
    
                if (extStatus == undefined) { //extension status is totally empty
                    extStatus = {
                        [currentPageUrl]: true
                    }
                    launchSound_turned_on();
                    chrome.storage.sync.set({ 'ext-status': extStatus }, () => extensionStatusChange(extStatus[currentPageUrl], user?.role, true))
                } else {
                    if (typeof extStatus != 'object') extStatus = {};
    
                    const currentPageExtStatus = extStatus[currentPageUrl];
    
                    if (currentPageExtStatus == undefined) {
    
                        extStatus[currentPageUrl] = true;
                        launchSound_turned_on();
                        chrome.storage.sync.set({ 'ext-status': extStatus }, () => extensionStatusChange(extStatus[currentPageUrl], user?.role, true))
                        return;
                    } else {
                        extStatus[currentPageUrl] = !currentPageExtStatus

                        if(extStatus[currentPageUrl]){
                            launchSound_turned_on();
                        }else{
                            launchSound_turned_off();
                        }
                        chrome.storage.sync.set({ 'ext-status': extStatus }, () => extensionStatusChange(extStatus[currentPageUrl], user?.role, true))
                        return;
                    }
    
                }
            })
        })
    }else if(evtobj.keyCode == 88 && evtobj.ctrlKey){//CTRL + X
        const currentPageUrl = trimQueryParamsFromUrl(window.location.href);
        const pageTitle = document.title;
        
        chrome.storage.sync.get('ext-status', function (result) {
            let extStatus = result['ext-status'];

            if(extStatus[currentPageUrl] == true){
                requestPage(currentPageUrl, pageTitle);

            }
        })
    }
}

function launchSound_turned_on(){
    let audio = new Audio(`${backend_url}/assets/sounds/on.mp3`);
    audio.play();
}

function launchSound_turned_off(){
    let audio = new Audio(`${backend_url}/assets/sounds/off.mp3`);
    audio.play();
}

function requestPage(pageUrl, pageTitle){
    chrome.storage.sync.get('user', function (result) {
        const user = result.user;
        if(!user || !user.token) return;

        fetch(`${backend_url}/request-page`,{
            method: 'POST',
            body: JSON.stringify({ pageUrl, pageTitle }),
            headers:{
                Authorization: user.token,
                'Content-Type': 'application/json'
            }
        })
        .then(response =>{
            if(response.status == 200){
                showExtensionStatusMessage(true, 'Page requested for processing')
            }
        })
        .catch(error => {
            console.log(error)
        })
    })
}

document.onkeydown = keyPress;