"use client"

import { useState } from "react"
import { useIntl } from "react-intl"

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

import { membershipTermsAndConditions } from "@/constants/webHrefs"

import LoginButton from "@/components/LoginButton"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useRoomContext } from "@/contexts/Details/Room"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

import MemberPriceModal from "../../MemberPriceModal"

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

import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
import { CurrencyEnum } from "@/types/enums/currency"

export default function JoinScandicFriendsCard({
  name = "join",
}: JoinScandicFriendsCardProps) {
  const lang = useLang()
  const intl = useIntl()
  const {
    room,
    actions: { updateJoin },
  } = useRoomContext()
  const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false)

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

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

  const list = [
    {
      title: intl.formatMessage({
        defaultMessage: "Friendly room rates",
      }),
    },
    {
      title: intl.formatMessage({
        defaultMessage: "Earn & spend points",
      }),
    },
    {
      title: intl.formatMessage({
        defaultMessage: "Join for free",
      }),
    },
  ]

  const saveOnJoiningLabel = intl.formatMessage(
    {
      defaultMessage: "Get the member room price: {amount}",
    },
    {
      amount: formatPrice(
        intl,
        room.roomRate.member.localPrice.pricePerStay ?? 0,
        room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
      ),
    }
  )

  return (
    <div className={styles.cardContainer}>
      <Checkbox
        name={name}
        className={styles.checkBox}
        registerOptions={{ onChange }}
      >
        <div>
          <Caption type="label" textTransform="uppercase" color="red">
            {saveOnJoiningLabel}
          </Caption>
          <Caption
            type="label"
            textTransform="uppercase"
            color="uiTextHighContrast"
          >
            {intl.formatMessage({
              defaultMessage: "Join Scandic Friends",
            })}
          </Caption>
        </div>
      </Checkbox>

      <Footnote color="uiTextHighContrast" className={styles.login}>
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        {`${intl.formatMessage({
          defaultMessage: "Already a friend?",
        })} `}
        <LoginButton
          color="burgundy"
          position="enter details"
          trackingId="join-scandic-friends-enter-details"
          variant="breadcrumb"
        >
          {intl.formatMessage({
            defaultMessage: "Log in",
          })}
        </LoginButton>
      </Footnote>

      <div className={styles.list}>
        {list.map((item) => (
          <Caption
            key={item.title}
            color="uiTextPlaceholder"
            className={styles.listItem}
          >
            <MaterialIcon
              icon="check"
              color="Icon/Interactive/Placeholder"
              size={20}
            />
            {item.title}
          </Caption>
        ))}
      </div>
      <div className={styles.terms}>
        <Footnote color="uiTextPlaceholder">
          {intl.formatMessage(
            {
              defaultMessage:
                "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service",
            },
            {
              termsAndConditionsLink: (str) => (
                <Link
                  variant="default"
                  textDecoration="underline"
                  size="tiny"
                  target="_blank"
                  color="uiTextPlaceholder"
                  href={membershipTermsAndConditions[lang]}
                >
                  {str}
                </Link>
              ),
            }
          )}
        </Footnote>
      </div>
      <MemberPriceModal
        isOpen={isMemberPriceModalOpen}
        setIsOpen={setIsMemberPriceModalOpen}
      />
    </div>
  )
}