"use client"

import { useState } from "react"
import { Button } 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 ButtonLink from "@/components/ButtonLink"
import Modal from "@/components/Modal"
import useWakeLock from "@/hooks/useWakeLock"

import DigitalTeamMemberCardContent from "./Content"

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

import type { User } from "@/types/user"

interface DigitalTeamMemberCardClientProps {
  user: User
}

export default function DigitalTeamMemberCardClient({
  user,
}: DigitalTeamMemberCardClientProps) {
  const intl = useIntl()
  const [isOpen, setIsOpen] = useState(false)

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

  function onToggle(modalState: boolean) {
    setIsOpen(modalState)
    if (modalState) {
      request()
    } else {
      release()
    }
  }

  return (
    <>
      <Button className={styles.button} onPress={() => onToggle(true)}>
        <Typography variant="Body/Paragraph/mdBold">
          <span className={styles.text}>
            {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
            <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
            {intl.formatMessage({
              defaultMessage: "Show Team Member Card",
            })}
          </span>
        </Typography>
      </Button>
      <Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
        <Typography variant="Title/xs">
          <h2 className={styles.title}>
            {intl.formatMessage({ defaultMessage: "Scandic Family" })}
          </h2>
        </Typography>

        <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>
        {/* TODO: Add missing link to benefits page */}
        <ButtonLink href="#" target="_blank" variant="Tertiary">
          <Typography variant="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>
          </Typography>
        </ButtonLink>
      </Modal>
    </>
  )
}