import { useEffect, useRef } from 'react';

declare global {
    interface Window {
        googleTranslateElementInit?: () => void;
        google?: {
            translate: {
                TranslateElement: {
                    new (options: Record<string, unknown>, elementId: string): void;
                    InlineLayout: {
                        HORIZONTAL: number;
                    };
                };
            };
        };
    }
}

type GoogleTranslateWidgetProps = {
    pageLanguage?: string;
    includedLanguages?: string;
};

/**
 * Hidden Google Translate gadget (from opdd). LanguageSwitcher drives `.goog-te-combo`.
 */
export function GoogleTranslateWidget({
    pageLanguage = 'en',
    includedLanguages = 'en,fr,sw',
}: GoogleTranslateWidgetProps) {
    const scriptLoaded = useRef(false);
    const observerRef = useRef<MutationObserver | null>(null);

    useEffect(() => {
        const earlyStyle = document.createElement('style');
        earlyStyle.setAttribute('data-google-translate-early-style', 'true');
        earlyStyle.innerHTML = `
      .goog-te-banner-frame,
      .goog-te-spinner-pos,
      .goog-te-spinner,
      .goog-te-balloon-frame,
      .goog-tooltip,
      #goog-gt-tt,
      .goog-te-menu-frame,
      .goog-te-balloon,
      .goog-te-ftab,
      #gt-nvframe,
      div[id^="goog-gt-"],
      .VIpgJd-ZVi9od-xl07Ob-lTBxed,
      .VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
      .VIpgJd-ZVi9od-aZ2wEe-OiiCO {
        display: none !important;
        visibility: hidden !important;
      }
      iframe.skiptranslate {
        display: none !important;
        visibility: hidden !important;
      }
      body {
        top: 0 !important;
      }
      #google_translate_element,
      .goog-te-gadget {
        position: fixed !important;
        left: -9999px !important;
        visibility: hidden !important;
      }
      font:hover,
      .translated-ltr font,
      .translated-rtl font {
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        pointer-events: none !important;
        cursor: inherit !important;
      }
    `;
        document.head.appendChild(earlyStyle);

        if (scriptLoaded.current) {
            return;
        }

        scriptLoaded.current = true;

        const removePoweredBy = (): void => {
            document.querySelectorAll('.goog-te-gadget, .goog-te-gadget-simple').forEach((gadget) => {
                gadget.querySelectorAll('span').forEach((span) => {
                    if (!span.querySelector('select') && !span.querySelector('.goog-te-combo')) {
                        span.style.display = 'none';
                        span.style.visibility = 'hidden';
                        span.style.fontSize = '0';
                    }
                });
            });
        };

        window.googleTranslateElementInit = () => {
            if (!window.google?.translate?.TranslateElement) {
                return;
            }

            new window.google.translate.TranslateElement(
                {
                    pageLanguage,
                    includedLanguages,
                    layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL,
                    autoDisplay: false,
                },
                'google_translate_element',
            );

            const style = document.createElement('style');
            style.setAttribute('data-google-translate-style', 'true');
            style.innerHTML = `
        .goog-te-banner-frame,
        .goog-te-spinner-pos {
          display: none !important;
          visibility: hidden !important;
        }
        iframe.skiptranslate {
          display: none !important;
          visibility: hidden !important;
        }
        body {
          top: 0 !important;
          position: static !important;
        }
        .goog-te-gadget,
        .goog-te-gadget-simple,
        .goog-te-gadget-icon,
        .goog-te-gadget span,
        .goog-te-gadget .goog-te-gadget-text,
        select.goog-te-combo,
        .goog-te-gadget select {
          position: absolute !important;
          left: -9999px !important;
          top: 0 !important;
          width: 1px !important;
          height: 1px !important;
          margin: 0 !important;
          padding: 0 !important;
          border: none !important;
          overflow: hidden !important;
          clip: rect(0, 0, 0, 0) !important;
          opacity: 0 !important;
          visibility: hidden !important;
          pointer-events: none !important;
          font-size: 0 !important;
          line-height: 0 !important;
        }
        .goog-text-highlight {
          background-color: transparent !important;
          box-shadow: none !important;
        }
        .goog-te-balloon-frame,
        .goog-tooltip,
        #goog-gt-tt,
        .goog-te-menu-frame,
        .goog-te-menu-value,
        .goog-te-balloon,
        .goog-te-ftab,
        #gt-nvframe {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
          pointer-events: none !important;
        }
        font[style*="background-color"],
        font:hover,
        .translated-ltr font,
        .translated-rtl font {
          background-color: transparent !important;
          background: transparent !important;
          box-shadow: none !important;
          outline: none !important;
        }
        body.translated-ltr font,
        body.translated-rtl font {
          pointer-events: none !important;
        }
        body.translated-ltr a font,
        body.translated-rtl a font,
        body.translated-ltr button font,
        body.translated-rtl button font {
          pointer-events: auto !important;
        }
        #google_translate_element {
          position: fixed !important;
          left: -9999px !important;
          top: -9999px !important;
          width: 0 !important;
          height: 0 !important;
          overflow: hidden !important;
          visibility: hidden !important;
          pointer-events: none !important;
          z-index: -9999 !important;
        }
        div[id^="goog-gt-"],
        div[class^="goog-te-"] {
          display: none !important;
          visibility: hidden !important;
        }
      `;
            document.head.appendChild(style);

            setTimeout(removePoweredBy, 100);
            setTimeout(removePoweredBy, 500);
            setTimeout(removePoweredBy, 1000);

            observerRef.current?.disconnect();
            observerRef.current = new MutationObserver(() => {
                if (document.body.style.top && document.body.style.top !== '0px') {
                    document.body.style.top = '0px';
                }

                document.querySelectorAll('.goog-te-banner-frame, .goog-te-spinner-pos').forEach((frame) => {
                    (frame as HTMLElement).style.display = 'none';
                    (frame as HTMLElement).style.visibility = 'hidden';
                });

                removePoweredBy();
            });

            observerRef.current.observe(document.body, {
                attributes: true,
                childList: true,
                subtree: true,
            });
        };

        const script = document.createElement('script');
        script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
        script.async = true;
        document.body.appendChild(script);

        return () => {
            observerRef.current?.disconnect();
            observerRef.current = null;

            if (script.parentNode) {
                script.parentNode.removeChild(script);
            }

            delete window.googleTranslateElementInit;

            document
                .querySelectorAll('style[data-google-translate-style], style[data-google-translate-early-style]')
                .forEach((element) => element.remove());
        };
    }, [includedLanguages, pageLanguage]);

    return (
        <div
            id="google_translate_element"
            className="notranslate"
            translate="no"
            style={{
                position: 'fixed',
                left: '-9999px',
                top: '-9999px',
                width: 0,
                height: 0,
                overflow: 'hidden',
                visibility: 'hidden',
                pointerEvents: 'none',
                zIndex: -9999,
            }}
        />
    );
}