"use client"

import { useIntl } from "react-intl"

import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"

import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { useRoomContext } from "@/contexts/Details/Room"
import { formatPrice } from "@/utils/numberFormatting"

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

import type { Dispatch, SetStateAction } from "react"

import { CurrencyEnum } from "@/types/enums/currency"

export default function MemberPriceModal({
  isOpen,
  setIsOpen,
}: {
  isOpen: boolean
  setIsOpen: Dispatch<SetStateAction<boolean>>
}) {
  const { room } = useRoomContext()
  const memberRate = "member" in room.roomRate ? room.roomRate.member : null
  const intl = useIntl()

  if (!memberRate) {
    return null
  }

  const memberPrice = memberRate?.localPrice ?? memberRate?.requestedPrice

  return (
    <Modal isOpen={isOpen} onToggle={setIsOpen}>
      <div className={styles.modalContent}>
        <div className={styles.innerModalContent}>
          <MagicWandIcon width="265px" />
          <Title as="h3" level="h1" textTransform="regular">
            {intl.formatMessage({
              id: "Member price activated",
            })}
          </Title>

          {memberPrice && (
            <span className={styles.newPrice}>
              <Body>
                {intl.formatMessage({
                  id: "The new price is",
                })}
              </Body>
              <Subtitle type="two" color="red">
                {formatPrice(
                  intl,
                  memberPrice.pricePerStay ?? 0,
                  memberPrice.currency ?? CurrencyEnum.Unknown
                )}
              </Subtitle>
            </span>
          )}
        </div>
        <Button intent="primary" theme="base" onClick={() => setIsOpen(false)}>
          {intl.formatMessage({ id: "OK" })}
        </Button>
      </div>
    </Modal>
  )
}
