"use client"

import { Fragment, useState } from "react"
import {
  Dialog,
  DialogTrigger,
  Modal,
  ModalOverlay,
} from "react-aria-components"
import { useIntl } from "react-intl"

import { getFeatureDescription } from "@scandic-hotels/booking-flow/utils/getRoomFeatureDescription"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle"

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

import type { RoomState } from "@/types/stores/enter-details"

interface PriceChangeSummaryProps {
  rooms: RoomState[]
  roomPrices: { prevPrice: number; newPrice?: number }[]
  newTotalPrice: { price: number; currency: string }
  onAccept: () => void
  onCancel: () => void
}

export default function PriceChangeSummary({
  rooms,
  roomPrices,
  newTotalPrice,
  onAccept,
  onCancel,
}: PriceChangeSummaryProps) {
  const intl = useIntl()
  const [isOpen, toggleOpen] = useState(false)

  return (
    <DialogTrigger>
      <Button
        intent="text"
        size="small"
        theme="base"
        variant="icon"
        wrapping
        onClick={() => toggleOpen((isOpen) => !isOpen)}
      >
        {intl.formatMessage({
          defaultMessage: "See price details",
        })}
        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>
      <ModalOverlay isOpen={isOpen} onOpenChange={toggleOpen}>
        <Modal>
          <Dialog className={styles.dialog}>
            {({ close }) => (
              <div className={styles.content}>
                <header className={styles.header}>
                  <Subtitle>
                    {intl.formatMessage({
                      defaultMessage: "Price details",
                    })}
                  </Subtitle>
                  <Button
                    onPress={close}
                    variant="clean"
                    className={styles.closeButton}
                  >
                    <MaterialIcon icon="close" size={20} color="CurrentColor" />
                  </Button>
                </header>
                <section>
                  <div>
                    {rooms.map(({ room }, idx) => {
                      const roomNumber = idx + 1
                      const newPrice = roomPrices[idx].newPrice

                      return (
                        <Fragment key={idx}>
                          <div className={styles.rowContainer}>
                            <Body textTransform="bold">
                              {rooms.length > 1
                                ? intl.formatMessage(
                                    {
                                      defaultMessage: "Room {roomIndex}",
                                    },
                                    { roomIndex: roomNumber }
                                  )
                                : intl.formatMessage({
                                    defaultMessage: "Room",
                                  })}
                            </Body>
                            <Body>{room.roomType}</Body>
                            <div className={styles.priceRow}>
                              <Caption color="uiTextMediumContrast">
                                {intl.formatMessage({
                                  defaultMessage: "Room charge",
                                })}
                              </Caption>
                              {newPrice ? (
                                <div className={styles.updatedPrice}>
                                  <Caption color="uiTextMediumContrast" striked>
                                    {formatPrice(
                                      intl,
                                      room.roomPrice.perStay.local.price,
                                      room.roomPrice.perStay.local.currency
                                    )}
                                  </Caption>
                                  <Body
                                    color="uiTextMediumContrast"
                                    textTransform="bold"
                                  >
                                    {formatPrice(
                                      intl,
                                      newPrice,
                                      room.roomPrice.perStay.local.currency
                                    )}
                                  </Body>
                                </div>
                              ) : (
                                <Caption color="uiTextMediumContrast">
                                  {formatPrice(
                                    intl,
                                    room.roomPrice.perStay.local.price,
                                    room.roomPrice.perStay.local.currency
                                  )}
                                </Caption>
                              )}
                            </div>
                            {room.breakfast && (
                              <div className={styles.priceRow}>
                                <Caption color="uiTextMediumContrast">
                                  {intl.formatMessage({
                                    defaultMessage: "Breakfast charge",
                                  })}
                                </Caption>
                                <Caption color="uiTextMediumContrast">
                                  {formatPrice(
                                    intl,
                                    Number(
                                      room.breakfast.localPrice.totalPrice
                                    ),
                                    room.breakfast.localPrice.currency
                                  )}
                                </Caption>
                              </div>
                            )}
                            {room.roomFeatures?.map((feature) => (
                              <div
                                className={styles.priceRow}
                                key={feature.itemCode}
                              >
                                <Caption color="uiTextMediumContrast">
                                  {getFeatureDescription(
                                    feature.code,
                                    feature.description,
                                    intl
                                  )}
                                </Caption>
                                <Caption color="uiTextMediumContrast">
                                  {formatPrice(
                                    intl,
                                    Number(feature.localPrice.totalPrice),
                                    feature.localPrice.currency
                                  )}
                                </Caption>
                              </div>
                            ))}
                          </div>
                          <Divider color="Border/Divider/Subtle" />
                        </Fragment>
                      )
                    })}
                  </div>
                  <div className={styles.rowContainer}>
                    <Body>
                      {intl.formatMessage({
                        defaultMessage: "Total",
                      })}
                    </Body>
                    <div className={styles.priceRow}>
                      <Body textTransform="bold">
                        {intl.formatMessage({
                          defaultMessage: "Price including VAT",
                        })}
                      </Body>
                      <Body textTransform="bold">
                        {formatPrice(
                          intl,
                          newTotalPrice.price,
                          newTotalPrice.currency
                        )}
                      </Body>
                    </div>
                  </div>
                </section>
                <footer className={styles.footer}>
                  <Button intent="secondary" onClick={onCancel}>
                    {intl.formatMessage({
                      defaultMessage: "Back to select room",
                    })}
                  </Button>
                  <Button onClick={onAccept}>
                    {intl.formatMessage({
                      defaultMessage: "Continue with new price",
                    })}
                  </Button>
                </footer>
              </div>
            )}
          </Dialog>
        </Modal>
      </ModalOverlay>
    </DialogTrigger>
  )
}
