import { useIntl } from "react-intl"

import Contact from "@/components/HotelReservation/Contact"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
import { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import { Amenities, Hotel } from "@/types/hotel"

function getAmenitiesList(hotel: Hotel) {
  const detailedAmenities: Amenities = hotel.detailedFacilities.filter(
    // Remove Parking facilities since parking accordion is based on hotel.parking
    (facility) => !facility.name.startsWith("Parking") && facility.public
  )
  return detailedAmenities
}

export default function HotelSidePeek({
  hotel,
  activeSidePeek,
  close,
  showCTA,
}: HotelSidePeekProps) {
  const intl = useIntl()
  const amenitiesList = getAmenitiesList(hotel)

  return (
    <SidePeek
      title={hotel.name}
      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
      handleClose={close}
    >
      <div className={styles.content}>
        <Subtitle>
          {intl.formatMessage({ id: "Practical information" })}
        </Subtitle>
        <Contact hotel={hotel} />
        <Accordion>
          {/* parking */}
          {hotel.parking.length ? (
            <AccordionItem title={intl.formatMessage({ id: "Parking" })}>
              {hotel.parking.map((p) => (
                <Parking key={p.name} parking={p} />
              ))}
            </AccordionItem>
          ) : null}
          <div className={styles.amenity}>
            {intl.formatMessage({ id: "Accessibility" })}
          </div>
          {amenitiesList.map((amenity) => {
            return (
              <div key={amenity.id} className={styles.amenity}>
                {amenity.name}
              </div>
            )
          })}
        </Accordion>
        {showCTA && (
          /* TODO: handle linking to Hotel Page */
          <Button theme={"base"}>To the hotel</Button>
        )}
      </div>
    </SidePeek>
  )
}

function Parking({ parking }: ParkingProps) {
  const intl = useIntl()
  return (
    <div>
      <Body>{`${intl.formatMessage({ id: parking.type })} (${parking.name})`}</Body>
      <ul className={styles.list}>
        <li>
          {`${intl.formatMessage({
            id: "Number of charging points for electric cars",
          })}: ${parking.numberOfChargingSpaces}`}
        </li>
        <li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${parking.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
        <li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${parking.numberOfParkingSpots}`}</li>
        <li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${parking.distanceToHotel} m`}</li>
        <li>{`${intl.formatMessage({ id: "Address" })}: ${parking.address}`}</li>
      </ul>
    </div>
  )
}
