"use client"
import { useState } from "react"
import { useIntl } from "react-intl"

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

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

import ButtonLink from "@/components/ButtonLink"

import { FacilityToIcon } from "../../HotelPage/data"
import { usePageType } from "../Map/PageTypeProvider"
import DialogImage from "./DialogImage"

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

import type { GalleryImage } from "@/types/components/imageGallery"
import type { Amenities } from "@/types/hotel"

interface HotelMapCardProps {
  amenities: Amenities
  tripadvisorRating: number | undefined
  hotelName: string
  image: GalleryImage | null
  url: string
  className?: string
}

export default function HotelMapCard({
  amenities,
  tripadvisorRating,
  hotelName,
  image,
  url,
  className,
}: HotelMapCardProps) {
  const intl = useIntl()
  const pageType = usePageType()
  const [imageError, setImageError] = useState(false)
  const { setActiveMarker } = useDestinationPageHotelsMapStore()

  function handleClose() {
    setActiveMarker(null)
  }

  return (
    <article className={className}>
      <div className={styles.wrapper}>
        <IconButton
          theme="Black"
          style="Muted"
          className={styles.closeButton}
          onPress={handleClose}
          aria-label={intl.formatMessage({
            defaultMessage: "Close",
          })}
        >
          <MaterialIcon
            icon="close"
            size={16}
            className={styles.closeIcon}
            color="CurrentColor"
          />
        </IconButton>
        {image ? (
          <DialogImage
            image={image.src}
            altText={image.alt}
            rating={tripadvisorRating}
            imageError={imageError}
            setImageError={setImageError}
          />
        ) : (
          <div className={styles.imagePlaceholder} />
        )}

        <div className={styles.content}>
          <div className={styles.name}>
            <Typography variant="Body/Paragraph/mdBold">
              <h4>{hotelName}</h4>
            </Typography>
          </div>
          <div
            className={
              pageType === "country"
                ? styles.hiddenFacilities
                : styles.facilities
            }
          >
            {amenities.map((facility) => {
              const Icon = (
                <FacilityToIcon
                  id={facility.id}
                  size={16}
                  color="Icon/Default"
                />
              )
              return (
                <div className={styles.facilitiesItem} key={facility.id}>
                  {Icon && Icon}
                  <Typography
                    className={styles.iconFootnote}
                    variant="Body/Supporting text (caption)/smRegular"
                  >
                    <p>{facility.name}</p>
                  </Typography>
                </div>
              )
            })}
          </div>

          {url && (
            <ButtonLink
              href={url}
              variant="Tertiary"
              color="Primary"
              size="Small"
            >
              <Typography variant="Body/Supporting text (caption)/smBold">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "See hotel details",
                  })}
                </p>
              </Typography>
            </ButtonLink>
          )}
        </div>
      </div>
    </article>
  )
}
