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

import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { useRoomContext } from "@/contexts/Room"
import { isValidClientSession } from "@/utils/clientSession"

import PriceTable from "./PriceList"

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

import type { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"

export default function FlexibilityOption({
  features,
  isSelected,
  paymentTerm,
  priceInformation,
  petRoomPackage,
  product,
  roomType,
  roomTypeCode,
  title,
}: FlexibilityOptionProps) {
  const intl = useIntl()
  const { data: session } = useSession()
  const isUserLoggedIn = isValidClientSession(session)
  const {
    actions: { selectRate },
    isMainRoom,
    roomNr,
  } = useRoomContext()

  function handleSelect() {
    if (product) {
      selectRate({
        features,
        product,
        roomType,
        roomTypeCode,
      })
    }
  }

  if (!product) {
    return (
      <div className={styles.noPricesCard}>
        <div className={styles.header}>
          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
          <div className={styles.priceType}>
            <Caption>{title}</Caption>
            <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
          </div>
        </div>
        <Label size="regular" className={styles.noPricesLabel}>
          <Caption color="uiTextHighContrast" type="bold">
            {intl.formatMessage({ id: "No prices available" })}
          </Caption>
        </Label>
      </div>
    )
  }

  const { public: publicPrice, member: memberPrice } = product.productType
  const rate =
    isUserLoggedIn && isMainRoom && memberPrice ? memberPrice : publicPrice

  return (
    <label>
      <input
        checked={isSelected}
        className={styles.radio}
        name={`rateCode-${roomNr}-${rate.rateCode}`}
        onChange={handleSelect}
        type="radio"
        value={rate.rateCode}
      />
      <div className={styles.card}>
        <div className={styles.header}>
          <Modal
            trigger={
              <Button intent="text">
                <InfoCircleIcon
                  width={16}
                  height={16}
                  color="uiTextMediumContrast"
                />
              </Button>
            }
            title={title}
            subtitle={paymentTerm}
          >
            <div className={styles.terms}>
              {priceInformation?.map((info) => (
                <Body
                  key={info}
                  color="uiTextHighContrast"
                  className={styles.termsText}
                >
                  <CheckIcon
                    color="uiSemanticSuccess"
                    width={20}
                    height={20}
                    className={styles.termsIcon}
                  ></CheckIcon>
                  {info}
                </Body>
              ))}
            </div>
          </Modal>
          <div className={styles.priceType}>
            <Caption color="uiTextHighContrast">{title}</Caption>
            <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
          </div>
        </div>
        <PriceTable
          memberPrice={memberPrice}
          petRoomPackage={petRoomPackage}
          publicPrice={publicPrice}
        />

        <div className={styles.checkIcon}>
          <CheckIcon color="white" height="16" width="16" />
        </div>
      </div>
    </label>
  )
}
