web/apps/scandic-web/components/MeetingPackageWidget/index.tsx

"use client"

import {
  Button,
  Dialog,
  DialogTrigger,
  Modal,
  ModalOverlay,
} from "react-aria-components"
import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"

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

import MeetingPackageWidgetContent from "./Content/Content"

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

export interface MeetingPackageWidgetProps {
  destination?: string
  className?: string
}

export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
  const intl = useIntl()
  /* Meeting booking widget changes design at 948px */
  const isDesktop = useMediaQuery("(min-width: 948px)", {
    initializeWithValue: false,
  })

  return isDesktop ? (
    <MeetingPackageWidgetContent {...props} />
  ) : (
    <div className={props.className}>
      <DialogTrigger>
        <div className={styles.buttonWrapper}>
          <Button className={styles.button}>
            <span className={styles.fakeInput}>
              <Typography variant="Body/Supporting text (caption)/smBold">
                <span>
                  {intl.formatMessage({
                    id: "meetingPackage.meetingLocation",
                    defaultMessage: "Meeting location",
                  })}
                </span>
              </Typography>
              <Typography variant="Body/Paragraph/mdRegular">
                <span className={styles.fakePlaceholder}>
                  {intl.formatMessage({
                    id: "meetingPackage.hotels&Destintions",
                    defaultMessage: "Hotels & destinations",
                  })}
                </span>
              </Typography>
            </span>
            <span className={styles.fakeButton}>
              <MaterialIcon icon="search" color="CurrentColor" />
              <Typography variant="Body/Supporting text (caption)/smBold">
                <span>
                  {intl.formatMessage({
                    id: "bookingWidget.button.search",
                    defaultMessage: "Search",
                  })}
                </span>
              </Typography>
            </span>
          </Button>
        </div>
        <ModalOverlay isDismissable className={styles.overlay}>
          <Modal className={styles.modal}>
            <Dialog
              className={styles.dialog}
              aria-label={intl.formatMessage({
                id: "meetingPackage.bookAMeeting",
                defaultMessage: "Book a meeting",
              })}
            >
              {({ close }) => (
                <>
                  <div className={styles.closeButtonWrapper}>
                    <IconButton
                      theme="Black"
                      style="Muted"
                      onPress={close}
                      className={styles.closeButton}
                      aria-label={intl.formatMessage({
                        id: "common.close",
                        defaultMessage: "Close",
                      })}
                    >
                      <MaterialIcon icon="close" />
                    </IconButton>
                  </div>
                  <MeetingPackageWidgetContent {...props} />
                </>
              )}
            </Dialog>
          </Modal>
        </ModalOverlay>
      </DialogTrigger>
    </div>
  )
}