"use client"

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

import { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ReadMore from "@/components/HotelReservation/ReadMore"
import Alert from "@/components/TempDesignSystem/Alert"

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

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

export default function HotelDescription({
  description,
  hotel,
  sortedFacilities,
}: {
  description?: string
  hotel: Hotel
  sortedFacilities: Hotel["detailedFacilities"]
}) {
  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}>
          <ReadMore
            label={intl.formatMessage({
              defaultMessage: "See all amenities",
            })}
            hotelId={hotel.operaId}
            showCTA={false}
            sidePeekKey={SidePeekEnum.hotelDetails}
          />
          {hotel.specialAlerts.map((alert) => (
            <Alert
              key={alert.id}
              type={alert.type}
              heading={alert.heading}
              text={alert.text}
            />
          ))}
        </div>
      )}
    </div>
  )
}