"use client"
import { useFormContext, useWatch } from "react-hook-form"
import { useIntl } from "react-intl"

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

import { dt } from "@/lib/dt"
import { useMyStayStore } from "@/stores/my-stay"

import Modal from "@/components/HotelReservation/MyStay/Modal"
import useLang from "@/hooks/useLang"

import CancelStayPriceContainer from "../CancelStayPriceContainer"
import Multiroom from "./Multiroom"

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

import type { CancelStayFormValues } from "@/types/components/hotelReservation/myStay/cancelStay"

interface CancelStayConfirmationProps {
  closeModal: () => void
  onSubmit: (data: CancelStayFormValues) => void
}

export default function CancelStayConfirmation({
  closeModal,
  onSubmit,
}: CancelStayConfirmationProps) {
  const intl = useIntl()
  const lang = useLang()
  const { handleSubmit } = useFormContext<CancelStayFormValues>()
  const formRooms = useWatch<CancelStayFormValues>({ name: "rooms" })

  const { fromDate, hotel, isCancelable, rate, toDate } = useMyStayStore(
    (state) => ({
      fromDate: state.bookedRoom.checkInDate,
      hotel: state.hotel,
      isCancelable: state.bookedRoom.isCancelable,
      rate: state.bookedRoom.rate,
      toDate: state.bookedRoom.checkOutDate,
    })
  )

  const checkInDate = dt(fromDate).locale(lang).format("dddd D MMM YYYY")
  const checkOutDate = dt(toDate).locale(lang).format("dddd D MMM YYYY")

  const title = intl.formatMessage({ defaultMessage: "Cancel booking" })
  const primaryLabel = intl.formatMessage({
    defaultMessage: "Cancel stay",
  })
  const secondaryLabel = intl.formatMessage({
    defaultMessage: "Back",
  })

  const notCancelableText = intl.formatMessage(
    {
      defaultMessage:
        "Your stay has been booked with <strong>{rate}</strong> terms which unfortunately doesn’t allow for cancellation.",
    },
    {
      rate,
      strong: (str) => <strong>{str}</strong>,
    }
  )

  const text = intl.formatMessage(
    {
      defaultMessage:
        "Are you sure you want to cancel your stay at <strong>{hotel}</strong> from <strong>{checkInDate}</strong> to <strong>{checkOutDate}?</strong> This can't be reversed.",
    },
    {
      checkInDate,
      checkOutDate,
      hotel: hotel.name,
      strong: (str) => <strong>{str}</strong>,
    }
  )

  const isValid = Array.isArray(formRooms)
    ? formRooms.some((r) => r.checked)
    : false

  return (
    <Modal.Content>
      <Modal.Content.Header handleClose={closeModal} title={title}>
        <Typography>
          <p className={styles.textDefault}>
            {isCancelable ? text : notCancelableText}
          </p>
        </Typography>
      </Modal.Content.Header>
      <Modal.Content.Body>
        <form
          className={styles.form}
          id="cancel-stay"
          onSubmit={handleSubmit(onSubmit)}
        >
          {isCancelable ? (
            <>
              <Multiroom />
              <CancelStayPriceContainer />
            </>
          ) : null}
        </form>
      </Modal.Content.Body>
      <Modal.Content.Footer>
        <Modal.Content.Footer.Secondary onClick={closeModal}>
          {secondaryLabel}
        </Modal.Content.Footer.Secondary>
        {isCancelable ? (
          <Modal.Content.Footer.Primary
            disabled={!isValid}
            form="cancel-stay"
            intent="secondary"
            type="submit"
          >
            {primaryLabel}
          </Modal.Content.Footer.Primary>
        ) : (
          <Modal.Content.Footer.Primary intent="secondary" onClick={closeModal}>
            {intl.formatMessage({ defaultMessage: "Close" })}
          </Modal.Content.Footer.Primary>
        )}
      </Modal.Content.Footer>
    </Modal.Content>
  )
}
