"use client"

import { useState } from "react"
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"

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

import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"

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

import type {
  AdditionalData,
  Hotel,
  Restaurant,
} from "@scandic-hotels/trpc/types/hotel"

export default function HotelDescription({
  description,
  hotel,
  sortedFacilities,
  restaurants,
  additionalData,
}: {
  description?: string
  hotel: Hotel & { url: string | null }
  sortedFacilities: Hotel["detailedFacilities"]
  restaurants: Restaurant[]
  additionalData: AdditionalData | undefined
}) {
  const intl = useIntl()

  const [expanded, setExpanded] = useState(false)

  const handleToggle = () => {
    setExpanded((prev) => !prev)
  }

  const textShowMore = intl.formatMessage({
    defaultMessage: "Show more",
  })

  const textShowLess = intl.formatMessage({
    defaultMessage: "Show less",
  })

  return (
    <div className={styles.descriptionWrapper}>
      <div className={styles.facilityList}>
        {sortedFacilities?.map((facility) => (
          <div className={styles.facilitiesItem} key={facility.id}>
            <FacilityToIcon id={facility.id} color="Icon/Default" />
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <p>{facility.name}</p>
            </Typography>
          </div>
        ))}
      </div>
      <Typography variant="Body/Paragraph/mdRegular">
        <p
          className={`${styles.hotelDescription} ${
            expanded ? styles.expanded : styles.collapsed
          }`}
        >
          {description}
        </p>
      </Typography>
      <Typography variant="Link/md">
        <ButtonRAC className={styles.showMoreButton} onPress={handleToggle}>
          {expanded ? textShowLess : textShowMore}
        </ButtonRAC>
      </Typography>

      {expanded && (
        <div className={styles.expandedContent}>
          <HotelDetailsSidePeek
            hotel={hotel}
            restaurants={restaurants}
            additionalHotelData={additionalData}
            triggerLabel={intl.formatMessage({
              defaultMessage: "See all amenities",
            })}
            buttonVariant="primary"
            wrapping={false}
          />
        </div>
      )}
    </div>
  )
}