/// <reference path="./KeyValueStore.ts" />

//

function ensureSetting(key: string, defaultValue: string): string {
    let strValue = localStorage.getItem(key);
    if (strValue === null) {
        strValue = defaultValue;
        localStorage.setItem(key, strValue);
    }
    return strValue;
}

const settings = new KeyValueStore({
    imagePreviews: {
        value: ensureSetting('image-previews', '1') === '1',
        valueRange: [false, true]
    }
});

//

(() => {
    const linkQryEls = document.getElementsByClassName('link--QRY');
    let   i          = linkQryEls.length;
    while (i--) {
        linkQryEls[i].addEventListener('click', e => {
            e.preventDefault();

            const resp = prompt('Please enter required input: ', '');
            if ((resp !== null) && (resp !== "")) {
                window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp;
            }

            return false;
        });
    }
})();

(() => {
    const locationPrefixEl = document.getElementsByClassName('location__prefix')[0];
    locationPrefixEl.addEventListener('click', e => {
        e.preventDefault();

        const resp = prompt('Please enter new location: ', '');
        if ((resp !== null) && (resp !== "")) {
            window.location.href = window.location.origin + '/' + resp;
        }

        return false;
    });
})();

(() => {
    const settingImagePreviewEl      = document.getElementsByClassName('setting--image-previews')[0];
    const settingImagePreviewValueEl = settingImagePreviewEl.getElementsByClassName('setting__value')[0];
    const settingImagePreviewCallback = (value: boolean, init = false) => {
        if (value) {
            generateImageThumbnails();
        } else if (!init) {
            removeImageThumbnails();
        }

        localStorage.setItem('image-previews', value ? '1' : '0');
        settingImagePreviewValueEl.textContent = value ? '[yes]' : '[no]';
    }

    settingImagePreviewValueEl.addEventListener('click', e => {
        e.preventDefault();
        settings.cycleValue('imagePreviews');
        return false;
    });

    settingImagePreviewCallback(settings.getValue('imagePreviews'), true);
    settings.addCallback('imagePreviews', settingImagePreviewCallback);
})();

(() => {
    const modalEls = document.getElementsByClassName('modal');
    let   i        = modalEls.length;
    while (i--) {
        const modalEl         = modalEls[i];
        const modalContentEl  = modalEl.getElementsByClassName('modal__content')[0];
        const modalCloseBtnEl = modalEl.getElementsByClassName('modal__close-btn')[0];

        document.addEventListener('click', e => {
            if (!modalEl.classList.contains('modal--visible')) {
                return;
            }
            if (e.target !== modalContentEl && !modalContentEl.contains(e.target as Element)) {
                modalEl.classList.remove('modal--visible');
                e.preventDefault();
                e.stopPropagation();
            }
        }, true);

        document.addEventListener('keydown', e => {
            if (!modalEl.classList.contains('modal--visible')) {
                return;
            }
            if (e.keyCode === 27) {
                modalEl.classList.remove('modal--visible');
            }
        });

        modalCloseBtnEl.addEventListener('click', e => {
            e.preventDefault();
            modalEl.classList.remove('modal--visible');
            return false;
        });
    }

    //

    const settingsBtnEl   = document.getElementsByClassName('settings-btn')[0];
    const settingsModalEl = document.getElementsByClassName('modal--settings')[0];

    settingsBtnEl.addEventListener('click', e => {
        e.preventDefault();
        settingsModalEl.classList.add('modal--visible');
        return false;
    });
})();

function generateImageThumbnails() {
    const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF');
    let   i          = linkImgEls.length;
    while (i--) {
        const linkImgEl    = linkImgEls[i] as HTMLAnchorElement;
        const thumbnailUrl = linkImgEl.href.replace(/^(.*?)\/I/, '$1/T');

        const lineBreakEl = document.createTextNode('\n');

        const typeAnnotEl = document.createElement('span');
        typeAnnotEl.classList.add('type-annotation');
        typeAnnotEl.textContent = ' ->  ';

        const thumbnailEl = document.createElement('img');
        thumbnailEl.src = thumbnailUrl;
        thumbnailEl.addEventListener('load', e => {
            thumbnailEl.classList.remove('faded');
        });    

        const thumbnailAnchorEl = document.createElement('a');
        thumbnailAnchorEl.classList.add('img-preview');
        thumbnailAnchorEl.href = linkImgEl.href;
        thumbnailAnchorEl.addEventListener('click', e => {
            e.preventDefault();
    
            thumbnailEl.classList.add('faded');
    
            if (thumbnailEl.classList.contains('expanded')) {
                thumbnailEl.classList.remove('expanded');
                thumbnailEl.src = thumbnailUrl;
            } else {
                thumbnailEl.classList.add('expanded');
                thumbnailEl.src = thumbnailAnchorEl.href;
            }
            
            return false;
        });

        thumbnailAnchorEl.append(thumbnailEl);
        linkImgEl.parentNode!.insertBefore(thumbnailAnchorEl, linkImgEl.nextSibling);
        linkImgEl.parentNode!.insertBefore(typeAnnotEl, thumbnailAnchorEl);
        linkImgEl.parentNode!.insertBefore(lineBreakEl, typeAnnotEl);
    }
}

function removeImageThumbnails() {
    const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF');
    let   i          = linkImgEls.length;
    while (i--) {
        const linkImgEl = linkImgEls[i];
        let   j = 3;
        
        while (j-- && linkImgEl.nextSibling) {
            linkImgEl.nextSibling.remove();
        }
    }
}