import { useIntl } from "react-intl"

import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Contact from "@/components/HotelReservation/Contact"
import Accordion from "@/components/TempDesignSystem/Accordion"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import Accessibility from "./Accordions/Accessibility"
import CheckinCheckOut from "./Accordions/CheckInCheckOut"
import MeetingsAndConferences from "./Accordions/MeetingsAndConferences"
import Parking from "./Accordions/Parking"
import Restaurant from "./Accordions/Restaurant"

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

import type { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"

export default function HotelSidePeek({
  hotel,
  additionalHotelData,
  activeSidePeek,
  close,
}: HotelSidePeekProps) {
  const intl = useIntl()
  const amenitiesList = hotel.detailedFacilities.filter(
    (facility) => facility.public
  )
  const parking = hotel.parking.filter(
    (p) => p?.numberOfParkingSpots || p?.numberOfChargingSpaces || p?.address
  )

  return (
    <SidePeek
      title={hotel.name}
      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
      handleClose={close}
    >
      <div className={styles.content}>
        <Subtitle color="baseTextHighContrast">
          {intl.formatMessage({ id: "Practical information" })}
        </Subtitle>
        <Contact hotel={hotel} />
        <Accordion>
          {parking?.length > 0 && <Parking parking={parking} />}
          {additionalHotelData?.restaurantsOverviewPage
            ?.restaurantsContentDescriptionMedium && (
            <Restaurant
              restaurantsContentDescriptionMedium={
                additionalHotelData.restaurantsOverviewPage
                  .restaurantsContentDescriptionMedium
              }
            />
          )}
          {additionalHotelData?.hotelSpecialNeeds.elevatorPitch && (
            <Accessibility
              elevatorPitchText={
                additionalHotelData.hotelSpecialNeeds.elevatorPitch
              }
            />
          )}
          {hotel.hotelFacts?.checkin && (
            <CheckinCheckOut checkin={hotel.hotelFacts.checkin} />
          )}
          {hotel.hotelContent.texts?.meetingDescription?.medium && (
            <MeetingsAndConferences
              meetingDescription={
                hotel.hotelContent.texts.meetingDescription.medium
              }
            />
          )}
        </Accordion>
        <div className={styles.amenity}>
          {amenitiesList.map((amenity) => {
            const Icon = mapFacilityToIcon(amenity.id)
            return (
              <Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
                {Icon && (
                  <Icon width={24} height={24} color="uiTextHighContrast" />
                )}
                {amenity.name}
              </Subtitle>
            )
          })}
        </div>

        {/*     TODO: handle linking to Hotel Page */}
        {/*     {showCTA && (
          <Button theme="base" intent="secondary" size="large">
            Read more about the hotel
          </Button>
        )} */}
      </div>
    </SidePeek>
  )
}