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

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

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 Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { isValidClientSession } from "@/utils/clientSession"

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

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

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

interface ListingHotelCardProps {
  data: HotelPin
  lang: Lang
  imageError: boolean
  setImageError: (error: boolean) => void
}

export default function ListingHotelCardDialog({
  data,
  lang,
  imageError,
  setImageError,
}: ListingHotelCardProps) {
  const intl = useIntl()
  const { data: session } = useSession()
  const isUserLoggedIn = isValidClientSession(session)
  const {
    bookingCode,
    name,
    publicPrice,
    memberPrice,
    currency,
    amenities,
    images,
    ratings,
    operaId,
    redemptionPrice,
    chequePrice,
    voucherPrice,
  } = data

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

  return (
    <div className={styles.content}>
      <div className={styles.header}>
        <HotelCardDialogImage
          firstImage={firstImage}
          altText={altText}
          rating={ratings}
          imageError={imageError}
          setImageError={setImageError}
          position="top"
        />
        <div>
          <div className={styles.name}>
            <Subtitle type="two">{name}</Subtitle>
          </div>
          <div className={styles.facilities}>
            {amenities.map((facility) => (
              <div className={styles.facilitiesItem} key={facility.id}>
                <FacilityToIcon
                  id={facility.id}
                  size={20}
                  color="Icon/Default"
                />
              </div>
            ))}
          </div>
        </div>
      </div>

      {publicPrice ||
      memberPrice ||
      redemptionPrice ||
      voucherPrice ||
      chequePrice ? (
        <div className={styles.bottomContainer}>
          <div className={styles.pricesContainer}>
            {redemptionPrice ? (
              <Caption color="uiTextHighContrast">
                {intl.formatMessage({
                  defaultMessage: "Available rates",
                })}
              </Caption>
            ) : (
              <Caption color="uiTextHighContrast">
                {intl.formatMessage({
                  defaultMessage: "Per night from",
                })}
              </Caption>
            )}
            <div className={styles.listingPrices}>
              {publicPrice && !isUserLoggedIn && memberPrice ? (
                <>
                  <Subtitle type="two">
                    {publicPrice} {currency}
                  </Subtitle>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {memberPrice && <Caption>/</Caption>}
                </>
              ) : (
                bookingCode &&
                publicPrice && (
                  <Subtitle type="two" color="red">
                    {publicPrice} {currency}
                  </Subtitle>
                )
              )}
              {memberPrice && (
                <Subtitle type="two" color="red">
                  {intl.formatMessage(
                    {
                      defaultMessage: "{price} {currency}",
                    },
                    {
                      price: memberPrice,
                      currency,
                    }
                  )}
                </Subtitle>
              )}
              {redemptionPrice && (
                <HotelPointsRow pointsPerStay={redemptionPrice} />
              )}
              {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}
                  <Typography variant="Body/Paragraph/mdRegular">
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    <span>
                      /
                      {intl.formatMessage({
                        defaultMessage: "night",
                      })}
                    </span>
                  </Typography>
                </Subtitle>
              )}
              {voucherPrice && (
                <Subtitle type="two">
                  {intl.formatMessage(
                    {
                      defaultMessage: "{price} {currency}",
                    },
                    {
                      price: voucherPrice,
                      currency,
                    }
                  )}
                  <Typography variant="Body/Paragraph/mdRegular">
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    <span>
                      /
                      {intl.formatMessage({
                        defaultMessage: "night",
                      })}
                    </span>
                  </Typography>
                </Subtitle>
              )}
            </div>
          </div>
          <Button asChild theme="base" size="small" className={styles.button}>
            <Link
              href={`${selectRate(lang)}?hotel=${operaId}`}
              color="none"
              keepSearchParams
            >
              {intl.formatMessage({
                defaultMessage: "See rooms",
              })}
            </Link>
          </Button>
        </div>
      ) : (
        <NoPriceAvailableCard />
      )}
    </div>
  )
}