@php
    $translationLocaleMap = config('app.translation_locale_map', []);
    $includedTranslationLocales = implode(',', array_values(array_unique($translationLocaleMap)));
@endphp

<div id="google_translate_element" style="display: none;" aria-hidden="true"></div>

<style>
    .skiptranslate iframe,
    .goog-te-banner-frame,
    .goog-te-gadget,
    .goog-logo-link {
        display: none !important;
    }

    body {
        top: 0 !important;
    }
</style>

<script>
    (function () {
        const storageKey = 'site_locale';
        const currentLocale = @json(app()->getLocale());
        const supportedLocales = @json(array_keys(config('app.supported_locales', [])));
        const translationLocaleMap = @json($translationLocaleMap);

        function setCookie(name, value) {
            document.cookie = `${name}=${value};path=/;max-age=31536000`;

            if (window.location.hostname) {
                document.cookie = `${name}=${value};path=/;domain=${window.location.hostname};max-age=31536000`;
            }
        }

        function clearCookie(name) {
            document.cookie = `${name}=;path=/;expires=Thu, 01 Jan 1970 00:00:00 GMT`;

            if (window.location.hostname) {
                document.cookie = `${name}=;path=/;domain=${window.location.hostname};expires=Thu, 01 Jan 1970 00:00:00 GMT`;
            }
        }

        function translatedLocale(locale) {
            return translationLocaleMap[locale] || locale;
        }

        function restoreLanguageLabels(root = document) {
            root.querySelectorAll('[data-language-select] option[data-native-label]').forEach((option) => {
                const nativeLabel = option.getAttribute('data-native-label');

                if (nativeLabel && option.textContent !== nativeLabel) {
                    option.textContent = nativeLabel;
                }
            });
        }

        function syncLanguageSelectors(locale) {
            document.querySelectorAll('[data-language-select]').forEach((select) => {
                if (select.value !== locale) {
                    select.value = locale;
                }
            });
        }

        function syncGoogleCombo(locale) {
            const googleLocale = translatedLocale(locale);
            const combo = document.querySelector('.goog-te-combo');

            if (! combo) {
                return false;
            }

            if (combo.value !== googleLocale) {
                combo.value = googleLocale;
                combo.dispatchEvent(new Event('change'));
            }

            return true;
        }

        function applyGoogleLocale(locale) {
            if (! locale || locale === 'en') {
                clearCookie('googtrans');
                restoreLanguageLabels();
                return;
            }

            const cookieValue = `/auto/${translatedLocale(locale)}`;
            setCookie('googtrans', cookieValue);

            let attempts = 0;
            const interval = window.setInterval(() => {
                attempts += 1;

                if (syncGoogleCombo(locale) || attempts > 40) {
                    window.clearInterval(interval);
                    restoreLanguageLabels();
                }
            }, 250);
        }

        window.applySiteLanguage = function (selectElement) {
            const locale = (selectElement && selectElement.value) || 'en';

            if (! supportedLocales.includes(locale)) {
                return;
            }

            window.localStorage.setItem(storageKey, locale);
            syncLanguageSelectors(locale);
            restoreLanguageLabels();

            if (locale === 'en') {
                clearCookie('googtrans');
            } else {
                applyGoogleLocale(locale);
            }

            if (selectElement && selectElement.form) {
                selectElement.form.submit();
            }
        };

        window.initGoogleTranslate = function () {
            if (! window.google || ! window.google.translate || ! window.google.translate.TranslateElement) {
                return;
            }

            new window.google.translate.TranslateElement({
                pageLanguage: 'en',
                autoDisplay: false,
                includedLanguages: @json($includedTranslationLocales),
            }, 'google_translate_element');

            const storedLocale = window.localStorage.getItem(storageKey) || currentLocale;

            if (storedLocale === 'en') {
                clearCookie('googtrans');
                restoreLanguageLabels();
                return;
            }

            applyGoogleLocale(storedLocale);
        };

        document.addEventListener('DOMContentLoaded', () => {
            const storedLocale = window.localStorage.getItem(storageKey) || currentLocale;

            if (! window.localStorage.getItem(storageKey)) {
                window.localStorage.setItem(storageKey, storedLocale);
            }

            syncLanguageSelectors(storedLocale);
            restoreLanguageLabels();

            const observer = new MutationObserver(() => {
                restoreLanguageLabels();
            });

            observer.observe(document.body, {
                childList: true,
                characterData: true,
                subtree: true,
            });
        });
    })();
</script>
<script src="//translate.google.com/translate_a/element.js?cb=initGoogleTranslate"></script>