"use client"

import Script from "next/script"
import { useEffect, useRef, useState } from "react"

import useLang from "@/hooks/useLang"

const SJSupportedLangs = ["en", "sv"] as const

export function SJWidget() {
  const lang = useLang()
  const [scriptInitialized, setScriptInitialized] = useState(
    () => typeof window !== "undefined" && !!window.SJ?.widget?.init
  )
  const componentInitialized = useRef(false)

  useEffect(() => {
    if (!scriptInitialized) return
    if (componentInitialized.current) return

    if (!window.SJ?.widget?.init) return

    window.SJ.widget.init({
      micrositeId: "12952d0f-c70f-452c-9598-6586a64c7b60",
      language: isSJSupportedLang(lang) ? lang : "en",
    })

    componentInitialized.current = true
  }, [lang, scriptInitialized])

  return (
    <>
      <Script
        src="https://www.sj.se/microsite-widget/microsite-widget.min.js"
        strategy="lazyOnload"
        onLoad={() => setScriptInitialized(true)}
      />

      <div id="sj-widget">&nbsp;</div>
    </>
  )
}

function isSJSupportedLang(
  lang: string
): lang is (typeof SJSupportedLangs)[number] {
  return SJSupportedLangs.includes(lang as (typeof SJSupportedLangs)[number])
}