import { useIntl } from "react-intl"

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 "@scandic-hotels/tracking/componentEvents"

import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
import { routeToScandicWebUrl } from "../../../utils/routeToScandicWebUrl"
import AdditionalAmenities from "../../AdditionalAmenities"
import Contact from "../../Contact"
import BreakfastAccordionItem from "../../SidePeekAccordions/BreakfastAccordionItem"
import CheckInCheckOutAccordionItem from "../../SidePeekAccordions/CheckInCheckOutAccordionItem"
import ParkingAccordionItem from "../../SidePeekAccordions/ParkingAccordionItem"

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()
  const isScandicPartner = useBookingFlowConfig().variant !== "scandic"
  const hotelUrl =
    isScandicPartner && hotel.url ? routeToScandicWebUrl(hotel.url) : hotel.url

  return (
    <div className={styles.content}>
      <Typography variant="Title/Subtitle/lg">
        <h3>
          {intl.formatMessage({
            id: "common.practicalInformation",
            defaultMessage: "Practical information",
          })}
        </h3>
      </Typography>
      <Contact hotel={hotel} />

      <Accordion type="sidepeek">
        <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>
      {hotelUrl ? (
        <ButtonLink
          href={hotelUrl}
          variant="Secondary"
          size="Medium"
          typography="Body/Paragraph/mdBold"
        >
          {intl.formatMessage({
            id: "hotelSidePeek.readMore.buttonText",
            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({
        id: "common.accessibility",
        defaultMessage: "Accessibility",
      })}
      iconName={IconName.Accessibility}
      className={styles.accordionItem}
      type="sidepeek"
      onOpen={() => trackAccordionClick("amenities:accessibility")}
    >
      <div className={styles.accessibilityContent}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{elevatorPitch}</p>
        </Typography>
      </div>
    </AccordionItem>
  )
}