import 'bootstrap';

function getLang() {
    if (window.location.href.indexOf("/de/") > -1) {
        return 'de';
    }

    if (window.location.href.indexOf("/en/") > -1) {
        return 'en';
    }

    if (window.location.href.indexOf("/es/") > -1) {
        return 'es';
    }
    if (window.location.href.indexOf("/ru/") > -1) {
        return 'ru';
    }
    return 'de';
}

const translations = {
    'en': {
        'payment': 'payment',
        'month': 'month',
        'year': 'year',
        'business': 'business',
        'pro': 'pro'
    },
    'de': {
        'payment': 'zahlung',
        'month': 'monat',
        'year': 'jahr',
        'business': 'business',
        'pro': 'pro'
    },
    'ru': {
        'payment': 'оплата',
        'month': 'месяц',
        'year': 'год',
        'business': 'business',
        'pro': 'pro'
    },
    'es': {
        'payment': 'pago',
        'month': 'mensual',
        'year': 'anual',
        'business': 'business',
        'pro': 'pro'
    }
};

document.addEventListener('DOMContentLoaded', () => {
    const radios = document.querySelectorAll<HTMLInputElement>('input[name="billing"]');
    const proPrice = document.getElementById('pro-price') as HTMLElement;
    const proPriceNav = document.getElementById('pro-price-nav') as HTMLElement;
    const businessPrice = document.getElementById('business-price') as HTMLElement;
    const businessPriceNav = document.getElementById('business-price-nav') as HTMLElement;

    const proLink = document.getElementById('pro-link') as HTMLAnchorElement;
    const proLinkNav = document.getElementById('pro-link-nav') as HTMLAnchorElement;
    const businessLink = document.getElementById('business-link') as HTMLAnchorElement;
    const businessLinkNav = document.getElementById('business-link-nav') as HTMLAnchorElement;

    const proMonthContent = `/app/${getLang()}/${translatePathPart(getLang(), 'payment')}/${translatePathPart(getLang(), 'pro')}/${translatePathPart(getLang(), 'month')}`;
    const proYearContent = `/app/${getLang()}/${translatePathPart(getLang(), 'payment')}/${translatePathPart(getLang(), 'pro')}/${translatePathPart(getLang(), 'year')}`;
    const businessMonthContent = `/app/${getLang()}/${translatePathPart(getLang(), 'payment')}/${translatePathPart(getLang(), 'business')}/${translatePathPart(getLang(), 'month')}`;
    const businessYearContent = `/app/${getLang()}/${translatePathPart(getLang(), 'payment')}/${translatePathPart(getLang(), 'business')}/${translatePathPart(getLang(), 'year')}`;

    function translatePathPart(lang: any, key: any) {
        return translations[lang][key] || key;
    }

    function updatePrices() {
        radios.forEach(radio => {
            const span = radio.closest('label')?.querySelector('.name');
            if (span) {
                if (radio.checked) {
                    span.classList.add('active');
                } else {
                    span.classList.remove('active');
                }
            }
        });

        radios.forEach(radio => {
            if (radio.checked) {
                if (radio.value === 'yearly') {
                    if (proPrice) proPrice.textContent = '€7.90';
                    if (proPriceNav) proPriceNav.textContent = '€7.90';
                    if (businessPrice) businessPrice.textContent = '€39.90';
                    if (businessPriceNav) businessPriceNav.textContent = '€39.90';

                    if (proLinkNav) proLinkNav.href = proYearContent;
                    if (proLink) proLink.href = proYearContent;
                    if (businessLinkNav) businessLinkNav.href = businessYearContent;
                    if (businessLink) businessLink.href = businessYearContent;
                } else if (radio.value === 'monthly') {
                    if (proPrice) proPrice.textContent = '€10.90';
                    if (proPriceNav) proPriceNav.textContent = '€10.90';
                    if (businessPrice) businessPrice.textContent = '€59.90';
                    if (businessPriceNav) businessPriceNav.textContent = '€59.90';

                    if (proLink) proLink.href = proMonthContent;
                    if (proLinkNav) proLinkNav.href = proMonthContent;
                    if (businessLink) businessLink.href = businessMonthContent;
                    if (businessLinkNav) businessLinkNav.href = businessMonthContent;
                }
            }
        });
    }

    function saveSelectedValue() {
        const selectedRadio = Array.from(radios).find(radio => radio.checked);
        if (selectedRadio) {
            localStorage.setItem('selectedBillingOption', selectedRadio.value);
        }
    }

    function loadSelectedValue() {
        const savedValue = localStorage.getItem('selectedBillingOption');
        if (savedValue) {
            const radioToSelect = Array.from(radios).find(radio => radio.value === savedValue);
            if (radioToSelect) {
                radioToSelect.checked = true;
                updatePrices();
            }
        } else {
            const defaultValue = 'yearly';
            const defaultRadio = Array.from(radios).find(radio => radio.value === defaultValue);
            if (defaultRadio) {
                defaultRadio.checked = true;
                updatePrices();
            }
        }
    }

    radios.forEach(radio => {
        radio.addEventListener('change', () => {
            updatePrices();
            saveSelectedValue();
        });
    });

    loadSelectedValue();
});