"use client"

import NextLink from "next/link"
import { useParams } from "next/navigation"
import { useEffect, useState } from "react"
import { useIntl } from "react-intl"

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

import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"

import ButtonLink from "@/components/ButtonLink"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"

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

import type { DestinationPagesHotelData } from "@/types/hotel"

export default function HotelListingItem(data: DestinationPagesHotelData) {
  const intl = useIntl()
  const params = useParams()
  const { hotel, url } = data
  const { setActiveMarker } = useDestinationPageHotelsMapStore()
  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
  const amenities = hotel.detailedFacilities.slice(0, 5)
  const [mapUrl, setMapUrl] = useState<string | null>(null)

  const address = `${hotel.address.streetAddress}, ${hotel.address.city}`

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

  return (
    <article className={styles.container}>
      <div className={styles.imageWrapper}>
        <ImageGallery
          images={galleryImages}
          fill
          sizes="(min-width: 768px) 700px, 100vw"
          title={intl.formatMessage(
            {
              defaultMessage: "{title} - Image gallery",
            },
            { title: hotel.name }
          )}
        />
        {hotel.tripadvisor && (
          <Typography variant="Title/Overline/sm">
            <div className={styles.tripAdvisor}>
              <TripadvisorIcon color="CurrentColor" />
              <span>{hotel.tripadvisor}</span>
            </div>
          </Typography>
        )}
      </div>
      <div className={styles.content}>
        <div className={styles.intro}>
          <HotelLogoIcon hotelId={hotel.id} hotelType={hotel.hotelType} />
          <Typography variant="Title/Subtitle/lg">
            <h3 className={styles.hotelName}>{hotel.name}</h3>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div className={styles.captions}>
              {mapUrl ? (
                <>
                  <Typography variant="Link/sm">
                    <NextLink
                      onClick={() => setActiveMarker(hotel.id)}
                      href={mapUrl}
                      className={styles.addressLink}
                      aria-label={intl.formatMessage({
                        defaultMessage: "See on map",
                      })}
                    >
                      {address}
                    </NextLink>
                  </Typography>
                  <Divider variant="vertical" color="beige" />
                </>
              ) : null}
              <p>
                {intl.formatMessage(
                  {
                    defaultMessage: "{number} km to city center",
                  },
                  {
                    number: getSingleDecimal(
                      hotel.location.distanceToCentre / 1000
                    ),
                  }
                )}
              </p>
            </div>
          </Typography>
        </div>
        {hotel.hotelDescription ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{hotel.hotelDescription}</p>
          </Typography>
        ) : null}
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <ul className={styles.amenityList}>
            {amenities.map((amenity) => {
              return (
                <li className={styles.amenityItem} key={amenity.id}>
                  <FacilityToIcon
                    id={amenity.id}
                    color="CurrentColor"
                    size={20}
                  />
                  {amenity.name}
                </li>
              )
            })}
          </ul>
        </Typography>
        {mapUrl && (
          <ButtonLink
            href={mapUrl}
            scroll={true}
            variant="Text"
            color="Primary"
            size="Medium"
            wrapping={false}
            typography="Body/Paragraph/mdBold"
            onClick={() => setActiveMarker(hotel.id)}
          >
            {intl.formatMessage({
              defaultMessage: "See on map",
            })}
            <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
          </ButtonLink>
        )}
        {url && (
          <>
            <Divider variant="horizontal" color="primaryLightSubtle" />

            <div className={styles.ctaWrapper}>
              <ButtonLink
                href={url}
                variant="Tertiary"
                color="Primary"
                size="Small"
                typography="Body/Paragraph/mdBold"
              >
                {intl.formatMessage({
                  defaultMessage: "See hotel details",
                })}
              </ButtonLink>
            </div>
          </>
        )}
      </div>
    </article>
  )
}
