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

import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"

import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import { useRoomContext } from "../../../../../contexts/EnterDetails/RoomContext"
import useLang from "../../../../../hooks/useLang"
import { MembershipNumberInput } from "../Signup/MembershipNumberInput"

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

type Props = {
  name?: string
  updateDetailsStore?: () => void
}
export function PartnerSASJoinScandicFriendsCard({
  name = "join",
  updateDetailsStore,
}: Props) {
  const lang = useLang()
  const intl = useIntl()
  const { routes } = useBookingFlowConfig()
  const { data: euroBonusProfile } =
    trpc.partner.sas.getEuroBonusProfile.useQuery()

  const {
    room,
    actions: { updateJoin },
  } = useRoomContext()

  const joinValue = useWatch({ name: "join" })

  function onChange(event: { target: { value: boolean } }) {
    updateJoin(event.target.value)
  }

  if (euroBonusProfile && euroBonusProfile.linkStatus !== "UNLINKED") {
    return null
  }

  if (!("member" in room.roomRate) || !room.roomRate.member) {
    return null
  }

  return (
    <div className={styles.cardContainer}>
      <Typography variant="Title/Subtitle/md">
        <h2 className={styles.priceContainer}>
          <span>
            {intl.formatMessage({
              id: "enterDetails.joinScandicFriendsCard.title",
              defaultMessage: "Get the member room price",
            })}
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            {`: `}
          </span>
          <span className={styles.price}>
            {formatPrice(
              intl,
              room.roomRate.member.localPrice.pricePerStay ?? 0,
              room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
            )}
          </span>
        </h2>
      </Typography>
      <div className={styles.checkBox}>
        <Checkbox name={name} registerOptions={{ onChange }}>
          <Typography variant="Body/Paragraph/mdRegular">
            <div>
              {intl.formatMessage({
                id: "enterDetails.joinScandicFriendsCard.joinCheckboxLabel",
                defaultMessage: "Join Scandic Friends now",
              })}
            </div>
          </Typography>
        </Checkbox>

        <MembershipNumberInput
          className={styles.membershipInput}
          registerOptions={{ onBlur: updateDetailsStore }}
          disabled={Boolean(joinValue)}
          label={intl.formatMessage({
            id: "enterDetails.joinScandicFriendsCard.membershipIdLabel",
            defaultMessage: "Scandic Friends member? Enter membership ID",
          })}
        />
      </div>

      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
              defaultMessage:
                "By joining you accept the <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. The Scandic Friends Membership is valid until further notice, but can at any time be terminated by contacting Scandic Customer Service.",
            },
            {
              termsAndConditionsLink: (str) => (
                <TextLink
                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
                </TextLink>
              ),
            }
          )}
        </p>
      </Typography>
    </div>
  )
}