"use client"
import { cx } from "class-variance-authority"
import NextLink from "next/link"
import { useParams } from "next/navigation"
import { useEffect, useState } from "react"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { trackHotelMapClick } from "@/utils/tracking"

import styles from "./mobileToggle.module.css"

export default function MobileMapToggle() {
  const intl = useIntl()
  const params = useParams()
  const [mapUrl, setMapUrl] = useState<string | null>(null)

  useEffect(() => {
    const url = new URL(window.location.href)
    url.searchParams.set("view", "map")
    setMapUrl(url.toString())
  }, [params])

  if (!mapUrl) {
    return null
  }

  return (
    <div className={styles.mobileToggle}>
      <Typography variant="Body/Supporting text (caption)/smBold">
        <span className={cx(styles.iconWrapper, styles.active)}>
          <MaterialIcon icon="home" color="CurrentColor" />
          <span>
            {intl.formatMessage({
              defaultMessage: "Hotel",
            })}
          </span>
        </span>
      </Typography>
      <span className={styles.iconWrapper}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <NextLink
            className={styles.link}
            href={mapUrl}
            onClick={trackHotelMapClick}
            aria-label={intl.formatMessage({
              defaultMessage: "See map",
            })}
          >
            <MaterialIcon icon="map" color="CurrentColor" />
            <span>
              {intl.formatMessage({
                defaultMessage: "Map",
              })}
            </span>
          </NextLink>
        </Typography>
      </span>
    </div>
  )
}
