"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(
    !!window.SJ?.widget?.init
  )
  const componentInitialized = useRef(false)

  useEffect(() => {
    const initWidget = () => {
      if (componentInitialized.current === true) 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
    }

    initWidget()
  }, [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])
}