"use client"

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

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

import { useDestinationDataStore } from "@/stores/destination-data"

import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import Alert from "@/components/TempDesignSystem/Alert"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import Button from "@/components/TempDesignSystem/Button"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useScrollToTop } from "@/hooks/useScrollToTop"

import HotelListingItem from "./HotelListingItem"
import HotelListingSkeleton from "./HotelListingSkeleton"

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

import { AlertTypeEnum } from "@/types/enums/alert"

export default function HotelListing() {
  const intl = useIntl()
  const scrollRef = useRef<HTMLElement>(null)
  const params = useParams()
  const [mapUrl, setMapUrl] = useState<string | null>(null)
  const { showBackToTop, scrollToTop } = useScrollToTop({
    threshold: 300,
    elementRef: scrollRef,
  })
  const { activeHotels, isLoading } = useDestinationDataStore((state) => ({
    activeHotels: state.activeHotels,
    isLoading: state.isLoading,
  }))

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

  return isLoading ? (
    <HotelListingSkeleton />
  ) : (
    <section className={styles.container} ref={scrollRef}>
      <div className={styles.listHeader}>
        <Subtitle type="two">
          {intl.formatMessage(
            {
              defaultMessage: "{count, plural, one {# hotel} other {# hotels}}",
            },
            { count: activeHotels.length }
          )}
        </Subtitle>
        <div className={styles.cta}>
          {mapUrl && (
            <Button
              className={styles.mapButton}
              asChild
              intent="secondary"
              variant="icon"
              size="small"
              theme="base"
            >
              <Link href={mapUrl}>
                <MaterialIcon icon="map" color="CurrentColor" />
                {intl.formatMessage({
                  defaultMessage: "See on map",
                })}
              </Link>
            </Button>
          )}
          <DestinationFilterAndSort listType="hotel" />
        </div>
      </div>
      {activeHotels.length === 0 ? (
        <Alert
          type={AlertTypeEnum.Info}
          heading={intl.formatMessage({
            defaultMessage: "No matching hotels found",
          })}
          text={intl.formatMessage({
            defaultMessage:
              "It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
          })}
        />
      ) : (
        <>
          <ul className={styles.hotelList}>
            {activeHotels.map(({ hotel, url }) => (
              <li key={hotel.id}>
                <HotelListingItem hotel={hotel} url={url} />
              </li>
            ))}
          </ul>
          {showBackToTop ? (
            <BackToTopButton position="right" onClick={scrollToTop} />
          ) : null}
        </>
      )}
    </section>
  )
}
