"use client"

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

type WindowWithDataLayer = Window & {
  datalayer: { [key: string]: any }
}

declare const window: WindowWithDataLayer

function createPageObject(pathName: string, queryString?: string) {
  const [lang, ...segments] = pathName.split("/").filter((v: string) => v)

  // implement more solid approach for lang ⬆️

  function getSiteSections(segments: string[]) {
    const sitesections: { [key: string]: string } = {}

    for (let i = 0; i < 6; i++) {
      const key = "value" + (i + 1)
      sitesections[key] = segments.slice(0, i + 1).join("|")
      if (i > 0 && !segments[i]) {
        sitesections[key] = sitesections[key].concat(
          "|".repeat(i + 1 - segments.length)
        )
      }
    }
    return sitesections
  }
  const sitesections = getSiteSections(segments)

  const page_obj = {
    pagename: "<a unique name of the page>",
    pagetype: "<the type of page or content group>",
    pageurl: "urlObject.href",
    ...sitesections,
    createDate: "< the date when page is created>",
    publishDate: "< the date when page is published>",
    domain: "", // is window.location.host viable?
    errorcode: null, // handle
    querystring: queryString || "",
    pageid: "<unique id of the page>",
    sessionid: "<unique identifier of session>", // base on what?
    domainlanguage: lang,
    hotelbrand: "<scandic or scandicgo)>", // what is this based on?
    siteversion: "new-web", // good enough?
  }
  return page_obj
}

export default function Tracking() {
  console.log("create datalayer 🚀")

  if (!window.datalayer) {
    window.datalayer = {}
  }

  const pathName = usePathname()
  const queryString = useSearchParams().toString()

  const pageObject = createPageObject(pathName, queryString)

  if (window.datalayer) {
    window.datalayer.page = pageObject

    // NOTE: Is this irrelevant för drop 1?
    // var user_obj = {
    //   loginstatus: "<if the user is logged in or not>",
    //   memberid: "<unique meeting package membership id for the user>",
    //   memberlevel: "<member level of user>",
    // }

    // datalayer.user = user_obj;
  }
  return (
    <>
      <Script id="page-tracking">{`
      console.log('hello')
      `}</Script>
    </>
  )
}