web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

import { useCallback, useEffect, useRef, useState } from "react"
import { Dialog, DialogTrigger, Popover } from "react-aria-components"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"

import { ErrorCircleIcon, InfoCircleIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Switch from "@/components/TempDesignSystem/Form/Switch"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import Input from "../Input"

import styles from "./booking-code.module.css"

import type {
  BookingCodeSchema,
  BookingWidgetSchema,
} from "@/types/components/bookingWidget"

export default function BookingCode() {
  const intl = useIntl()
  const checkIsTablet = useMediaQuery(
    "(min-width: 768px) and (max-width: 1367px)"
  )
  const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
  const [isTablet, setIsTablet] = useState(false)
  const [isDesktop, setIsDesktop] = useState(false)
  const {
    setValue,
    formState: { errors },
    getValues,
  } = useFormContext<BookingWidgetSchema>()

  const bookingCode: BookingCodeSchema = getValues("bookingCode")
  const [isOpen, setIsOpen] = useState(!!bookingCode?.value)
  const [showRemember, setShowRemember] = useState(false)
  const [showRememberMobile, setShowRememberMobile] = useState(false)
  const codeError = errors["bookingCode"]?.value
  const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
  const addCode = intl.formatMessage({ id: "Add code" })
  const bookingCodeTooltipText = intl.formatMessage({
    id: "If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
  })
  const ref = useRef<HTMLDivElement | null>(null)

  function updateBookingCodeFormValue(value: string) {
    setValue("bookingCode.value", value, { shouldValidate: true })
  }

  function toggleModal(isOpen: boolean) {
    if (!isOpen && codeError) {
      // console.log("Cannot be closed!!")
      // setValue("bookingCode.flag", false)
    } else if (!isOpen && !bookingCode?.value) {
      setValue("bookingCode.flag", false)
      setIsOpen(isOpen)
    } else {
      setIsOpen(isOpen)
      if (isOpen || bookingCode?.value) {
        setValue("bookingCode.flag", true)
      }
    }
  }
  const closeIfOutside = useCallback(
    (target: HTMLElement) => {
      if (ref.current && target && !ref.current.contains(target)) {
        setShowRemember(false)
      }
    },
    [setShowRemember, ref]
  )

  function showRememberCheck() {
    setShowRemember(true)
  }

  useEffect(() => {
    setIsTablet(checkIsTablet)
  }, [checkIsTablet])

  useEffect(() => {
    setIsDesktop(checkIsDesktop)
  }, [checkIsDesktop])

  const isRememberMobileVisible =
    !isDesktop && (showRemember || !!bookingCode?.remember)
  useEffect(() => {
    setShowRememberMobile(isRememberMobileVisible)
  }, [isRememberMobileVisible])

  useEffect(() => {
    function handleClickOutside(evt: Event) {
      if (showRemember) {
        const target = evt.target as HTMLElement
        closeIfOutside(target)
      }
    }
    document.body.addEventListener("click", handleClickOutside)
    return () => {
      document.body.removeEventListener("click", handleClickOutside)
    }
  }, [closeIfOutside, showRemember])

  return isTablet ? (
    <>
      <DialogTrigger isOpen={isOpen} onOpenChange={toggleModal}>
        <Button type="button" intent="text">
          <Checkbox name="bookingCode.flag" checked={!!bookingCode?.value}>
            <Caption color="uiTextMediumContrast" type="bold" asChild>
              <span>{codeVoucher}</span>
            </Caption>
          </Checkbox>
        </Button>
        <Popover
          className="guests_picker_popover"
          placement="bottom start"
          offset={36}
        >
          <Dialog className={styles.pickerContainerDesktop}>
            {({ close }) => (
              <div className={styles.popover}>
                <Input
                  type="text"
                  placeholder={addCode}
                  name="bookingCode"
                  id="booking-code"
                  onChange={(event) =>
                    updateBookingCodeFormValue(event.target.value)
                  }
                  defaultValue={bookingCode?.value}
                />
                {codeError?.message ? (
                  <Caption color="red" className={styles.error}>
                    <ErrorCircleIcon color="red" className={styles.errorIcon} />
                    {intl.formatMessage({ id: codeError.message })}
                  </Caption>
                ) : null}
                <div className={styles.bookingCode}>
                  <Checkbox name="bookingCode.remember">
                    <Caption asChild>
                      <span>{intl.formatMessage({ id: "Remember code" })}</span>
                    </Caption>
                  </Checkbox>
                  <Button
                    size="small"
                    intent="primary"
                    type="button"
                    onClick={close}
                    disabled={codeError ? true : undefined}
                  >
                    {intl.formatMessage({ id: "Apply" })}
                  </Button>
                </div>
              </div>
            )}
          </Dialog>
        </Popover>
      </DialogTrigger>
    </>
  ) : (
    <div
      className={styles.container}
      ref={ref}
      onBlur={(e) => closeIfOutside(e.nativeEvent.relatedTarget as HTMLElement)}
    >
      <div className={styles.bookingCodeLabel}>
        <Caption color="uiTextMediumContrast" type="bold" asChild>
          <span>{codeVoucher}</span>
        </Caption>
        <Modal
          trigger={
            <Button intent="text">
              <InfoCircleIcon
                color="uiTextPlaceholder"
                height={20}
                width={20}
              />
            </Button>
          }
          title={codeVoucher}
        >
          <Body color="uiTextHighContrast">{bookingCodeTooltipText}</Body>
        </Modal>
      </div>
      <Input
        type="text"
        placeholder={addCode}
        name="bookingCode"
        id="booking-code"
        onChange={(event) => updateBookingCodeFormValue(event.target.value)}
        defaultValue={bookingCode?.value}
        onFocus={showRememberCheck}
        onBlur={(e) =>
          closeIfOutside(e.nativeEvent.relatedTarget as HTMLElement)
        }
      />
      {codeError?.message ? (
        <Caption color="red" className={styles.error}>
          <ErrorCircleIcon color="red" className={styles.errorIcon} />
          {intl.formatMessage({ id: codeError.message })}
        </Caption>
      ) : null}
      {isDesktop ? (
        <div
          className={
            showRemember
              ? styles.bookingCodeRememberVisible
              : styles.bookingCodeRemember
          }
        >
          <Checkbox name="bookingCode.remember">
            <Caption asChild>
              <span>{intl.formatMessage({ id: "Remember code" })}</span>
            </Caption>
          </Checkbox>
          {bookingCode?.value ? (
            <Button
              size="small"
              className={styles.hideOnMobile}
              intent="secondary"
              type="button"
              onClick={() => setShowRemember(false)}
            >
              {intl.formatMessage({ id: "Apply" })}
            </Button>
          ) : null}
        </div>
      ) : null}
      {!isDesktop ? (
        <div
          className={
            showRememberMobile
              ? styles.bookingCodeRememberVisible
              : styles.bookingCodeRemember
          }
        >
          <Switch name="bookingCode.remember" className="mobile-switch">
            <Caption asChild>
              <span>{intl.formatMessage({ id: "Remember code" })}</span>
            </Caption>
          </Switch>
        </div>
      ) : null}
    </div>
  )
}