"use client"

import { useIntl } from "react-intl"

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

import ButtonLink from "@/components/ButtonLink"
import Contact from "@/components/HotelReservation/Contact"
import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
import Accordion from "@/components/TempDesignSystem/Accordion"

import AccessibilityAccordionItem from "../AmenitiesSidepeekContent/Accordions/Accessibility"
import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Breakfast"
import CheckInCheckOutAccordionItem from "../AmenitiesSidepeekContent/Accordions/CheckInCheckOut"
import ParkingAccordionItem from "../AmenitiesSidepeekContent/Accordions/Parking"

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,
  restaurants,
  additionalHotelData,
  activeSidePeek,
  close,
}: HotelSidePeekProps) {
  const intl = useIntl()

  return (
    <SidePeek
      title={hotel.name}
      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
      handleClose={close}
      closeLabel={intl.formatMessage({
        defaultMessage: "Close",
      })}
    >
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/lg">
          <h3>
            {intl.formatMessage({ defaultMessage: "Practical information" })}
          </h3>
        </Typography>
        <Contact hotel={hotel} />

        <Accordion>
          <ParkingAccordionItem
            parking={hotel.parking}
            elevatorPitch={additionalHotelData?.hotelParking.elevatorPitch}
          />
          <BreakfastAccordionItem
            restaurants={restaurants}
            hotelType={hotel.hotelType}
          />
          <CheckInCheckOutAccordionItem
            checkInData={hotel.hotelFacts.checkin}
          />
          <AccessibilityAccordionItem
            elevatorPitch={additionalHotelData?.hotelSpecialNeeds.elevatorPitch}
          />
          <AdditionalAmenities amenities={hotel.detailedFacilities} />
        </Accordion>
        {hotel.url ? (
          <ButtonLink
            href={hotel.url}
            variant="Secondary"
            size="Medium"
            typography="Body/Paragraph/mdBold"
          >
            {intl.formatMessage({
              defaultMessage: "Read more about the hotel",
            })}
          </ButtonLink>
        ) : null}
      </div>
    </SidePeek>
  )
}