"use client"

import { useIntl } from "react-intl"

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

import Modal from "@/components/Modal"
import useWakeLock from "@/hooks/useWakeLock"

import DigitalTeamMemberCardContent from "./Content"

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

import type { User } from "@scandic-hotels/trpc/types/user"

interface DigitalTeamMemberCardClientProps {
  user: User
  children: React.ReactElement
}

export default function DigitalTeamMemberCardClient({
  user,
  children,
}: DigitalTeamMemberCardClientProps) {
  const intl = useIntl()

  const { release, request } = useWakeLock({
    reacquireOnPageVisible: true,
  })

  function onOpenChange(isOpen: boolean) {
    if (isOpen) {
      request() // Acquire wake lock when modal opens
    } else {
      release() // Release wake lock when modal closes
    }
  }

  return (
    <Modal
      trigger={children}
      className={styles.modal}
      onOpenChange={onOpenChange}
    >
      <DigitalTeamMemberCardContent user={user} />

      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.footer}>
          {intl.formatMessage({
            defaultMessage:
              "Book discounted stays for yourself, family and friends!",
          })}
        </p>
      </Typography>
      <ButtonLink
        href="https://scandic.fuseuniversal.com/topics/73727"
        target="_blank"
        variant="Tertiary"
        typography="Body/Supporting text (caption)/smBold"
      >
        <span className={styles.link}>
          {intl.formatMessage({
            defaultMessage: "Check out all your benefits",
          })}
          <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
        </span>
      </ButtonLink>
    </Modal>
  )
}