$(document).ready(function () {
    customTooltips();
});

class LocalizedLabelStrings {
    _locale = 'ru'
    _strings = {
        openPlaceholder: {
            'ru': 'Свернуть подсказку',
            'en': 'Hide the hint'
        },
        closePlaceholder: {
            'ru': 'Развернуть подсказку',
            'en': 'Show the hint'
        },
    }

    constructor() {
        this._locale = $('.page-wrapper').data('lang') || 'ru'
    }

    get getOpenPlaceholder() {
        return this._strings.openPlaceholder[this._locale]
    }

    get getClosePlaceholder() {
        return this._strings.closePlaceholder[this._locale]
    }
}

function customTooltips() {
    const tooltipTriggerSelector = '.tooltip-trigger';
    const customLabelSelector = '.custom-label-with-tooltip';
    const tooltipContentBlockSelector = '.custom-tooltip-content-block';
    const textSelector = '.text';
    const localizedLabelStrings = new LocalizedLabelStrings()

    const expandHint = localizedLabelStrings.getOpenPlaceholder;
    const minimizeTooltip = localizedLabelStrings.getClosePlaceholder;
    const yes = 'Y';
    const no = 'N';
    const active = 'active';

    init();
    function init() {
        let items = $(customLabelSelector);

        items.each((index, element) => {
            let trigger = $(element).find(tooltipTriggerSelector);
            let tooltipBlock = $(element).find(tooltipContentBlockSelector);
            let tooltipText = tooltipBlock.text();
            
            let identifier = $(element).find('input').val();

            if (tooltipText && identifier) {
                const v = localStorage.getItem(getLocalStorageKey(tooltipText, identifier));
                if (v === yes) {
                    trigger.addClass(active);
                    trigger.find(textSelector).text(minimizeTooltip);
                    tooltipBlock.show();
                }
                if (v === no) {
                    trigger.removeClass(active);
                    trigger.find(textSelector).text(minimizeTooltip);
                    tooltipBlock.hide();
                }
            }
        });
    }

    $(tooltipTriggerSelector).click(function (e) {
        let item = $(e.currentTarget);
        let customLabelBlock = item.parents(customLabelSelector);
        let tooltipBlock =  customLabelBlock.find(tooltipContentBlockSelector);

        let text = tooltipBlock.text().toLowerCase() +
            (customLabelBlock.find('input').val() as string).toLowerCase();

        if (item.hasClass(active)) {
            tooltipBlock.slideUp(300);
            item.removeClass(active);

            item.find(textSelector).text(expandHint);

            updateLocalStorage(text, no);
        }
        else {
            tooltipBlock.slideDown(300);
            item.addClass(active);

            item.find(textSelector).text(minimizeTooltip);
            updateLocalStorage(text, yes);
        }
    });

    function updateLocalStorage(text, value) {
        let key = `tooltip_${getHashCode(text)}`;
        localStorage.setItem(key, value);
    }

    function getLocalStorageKey(tooltipText, identifier) {
        if (tooltipText && identifier) {

            let text = tooltipText.toLowerCase() + identifier.toLowerCase();
            return `tooltip_${getHashCode(text)}`;
        }

        return null;
    }

    function getHashCode(val){
        let hash = 0;
        for (let i = 0; i < val.length; i++) {
            let character = val.charCodeAt(i);
            hash = ((hash<<5)-hash)+character;
            hash = hash & hash;
        }

        return hash;
    }
}