import { useIntl } from "react-intl"

import AdditionalAmenities from "@scandic-hotels/booking-flow/components/AdditionalAmenities"
import Contact from "@scandic-hotels/booking-flow/components/Contact"
import BreakfastAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/BreakfastAccordionItem"
import CheckInCheckOutAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/CheckInCheckOutAccordionItem"
import ParkingAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/ParkingAccordionItem"
import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { trackAccordionClick } from "@/utils/tracking"

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

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

interface HotelSidePeekContentProps {
  hotel: Hotel & { url: string | null }
  restaurants: Restaurant[]
  additionalHotelData: AdditionalData | undefined
}

export function HotelSidePeekContent({
  hotel,
  restaurants,
  additionalHotelData,
}: HotelSidePeekContentProps) {
  const intl = useIntl()

  return (
    <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>
  )
}

type AccessibilityAccordionItemProps = {
  elevatorPitch?: string
}

function AccessibilityAccordionItem({
  elevatorPitch,
}: AccessibilityAccordionItemProps) {
  const intl = useIntl()

  if (!elevatorPitch) {
    return null
  }

  return (
    <AccordionItem
      title={intl.formatMessage({
        defaultMessage: "Accessibility",
      })}
      iconName={IconName.Accessibility}
      className={styles.accordionItem}
      variant="sidepeek"
      onOpen={() => trackAccordionClick("amenities:accessibility")}
    >
      <div className={styles.accessibilityContent}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{elevatorPitch}</p>
        </Typography>
      </div>
    </AccordionItem>
  )
}