"use client"

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

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 { DestinationSearchForm } from "./Form"

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

export function DestinationSearch() {
  const intl = useIntl()

  return (
    <>
      <div className={styles.mobileSearch}>
        <DialogTrigger>
          <Button className={styles.trigger}>
            <span>
              <Typography variant="Body/Supporting text (caption)/smBold">
                <span className={styles.whereTo}>
                  {intl.formatMessage({
                    defaultMessage: "Where to?",
                  })}
                </span>
              </Typography>
              <Typography variant="Body/Paragraph/mdRegular">
                <span className={styles.displayAsPlaceholder}>
                  {intl.formatMessage({
                    defaultMessage: "Hotels & Destinations",
                  })}
                </span>
              </Typography>
            </span>
            <span className={styles.icon}>
              <MaterialIcon color="CurrentColor" icon="search" size={24} />
            </span>
          </Button>
          <ModalOverlay className={styles.modalOverlay} isDismissable={true}>
            <Modal className={styles.modal}>
              <Dialog className={styles.modalDialog}>
                {({ close }) => (
                  <>
                    <IconButton
                      onPress={close}
                      theme="Black"
                      style="Muted"
                      className={styles.close}
                    >
                      <MaterialIcon
                        color="CurrentColor"
                        icon="close"
                        size={24}
                      />
                    </IconButton>
                    <DestinationSearchForm isMobile={true} />
                  </>
                )}
              </Dialog>
            </Modal>
          </ModalOverlay>
        </DialogTrigger>
      </div>
      <div className={styles.desktopSearch}>
        <DestinationSearchForm />
      </div>
    </>
  )
}
