"use client"
import Link from "next/link"
import { Dialog } from "react-aria-components"
import { useIntl } from "react-intl"

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

import { useMyStayStore } from "@/stores/my-stay"

import Modal from "@/components/HotelReservation/MyStay/Modal"

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

export default function CustomerSupportModal() {
  const intl = useIntl()
  const { email, phone } = useMyStayStore((state) => ({
    email: state.hotel.contactInformation.email,
    phone: state.hotel.contactInformation.phoneNumber,
  }))

  const title = intl.formatMessage({ defaultMessage: "Customer service" })
  const contact = intl.formatMessage(
    {
      defaultMessage:
        "Please call {phone} or email us at {email} for assistance with your order.",
    },
    { email, phone }
  )

  return (
    <Modal>
      <Dialog className={styles.dialog}>
        {({ close }) => (
          <Modal.Content>
            <Modal.Content.Header handleClose={close} title={title}>
              <Typography variant="Body/Paragraph/mdRegular">
                <p>{contact}</p>
              </Typography>
            </Modal.Content.Header>
            <Modal.Content.Body>
              <div className={styles.links}>
                <Link className={styles.link} href={`tel:${phone}`}>
                  <MaterialIcon color="Icon/Interactive/Default" icon="call" />
                  <Typography variant="Title/Subtitle/md">
                    <span>
                      {intl.formatMessage({
                        defaultMessage: "Make a call",
                      })}
                    </span>
                  </Typography>
                </Link>
                <Link className={styles.link} href={`mailto:${email}`}>
                  <MaterialIcon color="Icon/Interactive/Default" icon="mail" />
                  <Typography variant="Title/Subtitle/md">
                    <span>
                      {intl.formatMessage({
                        defaultMessage: "Send an email",
                      })}
                    </span>
                  </Typography>
                </Link>
              </div>
            </Modal.Content.Body>
            <Modal.Content.Footer>
              <Modal.Content.Footer.Secondary onClick={close}>
                {intl.formatMessage({ defaultMessage: "Back" })}
              </Modal.Content.Footer.Secondary>
              <Modal.Content.Footer.Primary intent="secondary" onClick={close}>
                {intl.formatMessage({ defaultMessage: "Close" })}
              </Modal.Content.Footer.Primary>
            </Modal.Content.Footer>
          </Modal.Content>
        )}
      </Dialog>
    </Modal>
  )
}
