"use client"

import { usePathname, useSearchParams } from "next/navigation"
import Script from "next/script"
import { useEffect } from "react"

import {
  getChatbotKey,
  shouldShowChatbot,
} from "@/components/ChatbotScript/utils"
import useLang from "@/hooks/useLang"

interface ChatbotClientProps {
  liveLangs: string[]
}

export function ChatbotClient({ liveLangs }: ChatbotClientProps) {
  const lang = useLang()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const isLive = liveLangs.includes(lang)
  const shouldShow = isLive && shouldShowChatbot(pathname, searchParams, lang)
  const chatbotKey = getChatbotKey(lang)

  useEffect(() => {
    window.kindlyOptions = {
      position: {
        bottom: "130px",
        right: "20px",
      },
    }
  }, [])

  useEffect(() => {
    // Hack to hide chatbot behind other elements in case the user has multiple tabs
    // open and the chat window should not be visible in the tab that becomes active
    if (!shouldShow) {
      document.documentElement.style.setProperty("--chatbot-z-index", "-1")
    } else {
      // Reset z-index when chatbot is shown, we're using the default z-index from globals.css
      document.documentElement.style.removeProperty("--chatbot-z-index")
    }

    if (window.kindlyChat) {
      if (!shouldShow) {
        window.kindlyChat.closeChat()
        window.kindlyChat.hideBubble()
      } else {
        window.kindlyChat.showBubble()
      }
    }
  }, [shouldShow])

  return (
    <Script
      id="kindly-chat"
      src="https://chat.kindlycdn.com/kindly-chat.js"
      data-bot-key={chatbotKey}
      data-shadow-dom
      data-bubble-hidden={!shouldShow}
      data-language={lang}
      defer
    ></Script>
  )
}