"use client";

import { useEffect } from "react";
import Script from "next/script";

declare global {
  interface Window {
    googleTranslateElementInitZones?: () => void;
    google?: {
      translate?: {
        TranslateElement?: new (
          options: { pageLanguage: string },
          elementId: string,
        ) => unknown;
      };
    };
  }
}

export function ZonesGoogleTranslate({ enabled }: { enabled: boolean }) {
  useEffect(() => {
    if (!enabled) return;

    window.googleTranslateElementInitZones = () => {
      const TranslateElement = window.google?.translate?.TranslateElement;
      if (!TranslateElement) return;
      new TranslateElement({ pageLanguage: "en" }, "zones_google_translate_element");
    };

    return () => {
      delete window.googleTranslateElementInitZones;
    };
  }, [enabled]);

  if (!enabled) return null;

  return (
    <div className="mb-3 flex justify-end">
      <div className="zones-google-translate-wrap">
        <div id="zones_google_translate_element" />
      </div>
      <style jsx global>{`
        .zones-google-translate-wrap {
          width: 170px;
        }
        .zones-google-translate-wrap .goog-te-gadget {
          font-size: 11px !important;
          color: hsl(var(--muted-foreground)) !important;
          text-align: right;
          line-height: 1.2;
        }
        .zones-google-translate-wrap .goog-te-gadget-simple {
          display: flex !important;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          min-height: 36px;
          border: 1px solid hsl(var(--input)) !important;
          border-radius: 8px;
          background: hsl(var(--background)) !important;
          padding: 0 10px;
          box-shadow: none !important;
        }
        .zones-google-translate-wrap .goog-te-gadget-icon {
          display: none !important;
        }
        .zones-google-translate-wrap .goog-te-menu-value {
          display: flex !important;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          margin: 0 !important;
          color: hsl(var(--foreground)) !important;
          font-size: 12px !important;
          font-family: inherit !important;
        }
        .zones-google-translate-wrap .goog-te-menu-value span {
          border: 0 !important;
          color: inherit !important;
          font-family: inherit !important;
        }
        .zones-google-translate-wrap .goog-te-menu-value span:last-child {
          color: hsl(var(--muted-foreground)) !important;
        }
        .zones-google-translate-wrap .goog-te-gadget > span {
          display: block;
          margin-top: 4px;
        }
      `}</style>
      <Script
        id="zones-google-translate"
        src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInitZones"
        strategy="afterInteractive"
      />
    </div>
  );
}