"use client"
import { useSession } from "next-auth/react"
import { useState } from "react"
import { useIntl } from "react-intl"

import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import { selectRate } from "@/constants/routes/hotelReservation"

import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { isValidClientSession } from "@/utils/clientSession"
import { trackEvent } from "@/utils/tracking/base"

import HotelPointsRow from "../../HotelCard/HotelPointsRow"
import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
import HotelCardDialogImage from "../HotelCardDialogImage"

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

import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"

interface StandaloneHotelCardProps {
  data: HotelPin
  handleClose: () => void
}

export default function StandaloneHotelCardDialog({
  data,
  handleClose,
}: StandaloneHotelCardProps) {
  const intl = useIntl()
  const lang = useLang()
  const [imageError, setImageError] = useState(false)
  const { data: session } = useSession()
  const isUserLoggedIn = isValidClientSession(session)
  const {
    name,
    chequePrice,
    publicPrice,
    memberPrice,
    redemptionPrice,
    voucherPrice,
    currency,
    amenities,
    images,
    ratings,
    operaId,
  } = data

  const firstImage = images[0]?.imageSizes?.small
  const altText = images[0]?.metaData?.altText

  return (
    <div className={styles.container}>
      <IconButton
        theme="Black"
        style="Muted"
        className={styles.closeButton}
        onPress={handleClose}
        aria-label={intl.formatMessage({
          defaultMessage: "Close",
        })}
      >
        <MaterialIcon icon="close" size={22} color="CurrentColor" />
      </IconButton>
      <HotelCardDialogImage
        firstImage={firstImage}
        altText={altText}
        rating={ratings}
        imageError={imageError}
        setImageError={setImageError}
        position="left"
      />
      <div className={styles.content}>
        <div className={styles.name}>
          <Body textTransform="bold">{name}</Body>
        </div>
        <div className={styles.facilities}>
          {amenities.slice(0, 3).map((facility) => {
            const Icon = (
              <FacilityToIcon id={facility.id} size={16} color="Icon/Default" />
            )
            return (
              <div className={styles.facilitiesItem} key={facility.id}>
                {Icon && Icon}
                <Footnote color="uiTextMediumContrast">
                  {facility.name}
                </Footnote>
              </div>
            )
          })}
        </div>
        <div className={styles.pricesContainer}>
          {publicPrice ||
          memberPrice ||
          redemptionPrice ||
          voucherPrice ||
          chequePrice ? (
            <>
              <div className={styles.priceCard}>
                {redemptionPrice ? (
                  <Caption>
                    {intl.formatMessage({
                      defaultMessage: "Available rates",
                    })}
                  </Caption>
                ) : (
                  <Caption type="bold">
                    {intl.formatMessage({
                      defaultMessage: "From",
                    })}
                  </Caption>
                )}
                {chequePrice && (
                  <Subtitle type="two">
                    {intl.formatMessage(
                      {
                        defaultMessage: "{price} {currency}",
                      },
                      {
                        price: chequePrice.numberOfCheques,
                        currency: "CC",
                      }
                    )}
                    {chequePrice.additionalPricePerStay > 0
                      ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                        " + " +
                        intl.formatMessage(
                          {
                            defaultMessage: "{price} {currency}",
                          },
                          {
                            price: chequePrice.additionalPricePerStay,
                            currency: chequePrice.currency,
                          }
                        )
                      : null}
                    <Body asChild>
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
                        /
                        {intl.formatMessage({
                          defaultMessage: "night",
                        })}
                      </span>
                    </Body>
                  </Subtitle>
                )}
                {voucherPrice && (
                  <Subtitle type="two">
                    {intl.formatMessage(
                      {
                        defaultMessage: "{price} {currency}",
                      },
                      {
                        price: voucherPrice,
                        currency,
                      }
                    )}
                    <Body asChild>
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
                        /
                        {intl.formatMessage({
                          defaultMessage: "night",
                        })}
                      </span>
                    </Body>
                  </Subtitle>
                )}
                {publicPrice && !isUserLoggedIn && (
                  <Subtitle type="two">
                    {intl.formatMessage(
                      {
                        defaultMessage: "{price} {currency}",
                      },
                      {
                        price: publicPrice,
                        currency,
                      }
                    )}
                    <Body asChild>
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
                        /
                        {intl.formatMessage({
                          defaultMessage: "night",
                        })}
                      </span>
                    </Body>
                  </Subtitle>
                )}
                {memberPrice && (
                  <Subtitle type="two" color="red">
                    {intl.formatMessage(
                      {
                        defaultMessage: "{price} {currency}",
                      },
                      {
                        price: memberPrice,
                        currency,
                      }
                    )}
                    <Body asChild color="red">
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
                        /
                        {intl.formatMessage({
                          defaultMessage: "night",
                        })}
                      </span>
                    </Body>
                  </Subtitle>
                )}
                {redemptionPrice && (
                  <HotelPointsRow pointsPerStay={redemptionPrice} />
                )}
              </div>
              <Button
                asChild
                theme="base"
                size="small"
                className={styles.button}
                onClick={() =>
                  trackEvent({
                    event: "hotelClickMap",
                    map: {
                      action: "hotel click - map",
                    },
                    hotelInfo: {
                      hotelId: operaId,
                    },
                  })
                }
              >
                <Link
                  href={`${selectRate(lang)}?hotel=${operaId}`}
                  color="none"
                  keepSearchParams
                >
                  {intl.formatMessage({
                    defaultMessage: "See rooms",
                  })}
                </Link>
              </Button>
            </>
          ) : (
            <NoPriceAvailableCard />
          )}
        </div>
      </div>
    </div>
  )
}
