"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 Modal from "@/components/Modal"
import useWakeLock from "@/hooks/useWakeLock"

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>
        <div className={styles.card}>
          <div className={styles.content}>
            <div className={styles.top}>
              <Typography variant="Tag/sm">
                <span>
                  {intl.formatMessage({ defaultMessage: "Team Member" })}
                </span>
              </Typography>
              <Typography variant="Tag/sm">
                {/* TODO: Should display country of employment */}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <span>SWE</span>
              </Typography>
            </div>
            <div className={styles.middle}>
              <div className={styles.employeeNumber}>
                <Typography variant="Title/sm">
                  {/* TODO: Should display employee number */}
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  <div>123 456</div>
                </Typography>
                <svg
                  width="42"
                  height="42"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className={styles.icon}
                >
                  <path
                    d="M3.5 35V12.288C3.5 8.933 3.5 7 4.268 7c.912 0 1.569 1.156 3.17 3.978l11.374 20.044C20.413 33.844 21.041 35 21.982 35c.768 0 .768-1.933.768-5.288V7M28 22.75h10.5M29.016 8.016c1.355-1.355 7.113-1.355 8.468 0 1.355 1.355 1.355 7.113 0 8.468-1.355 1.355-7.114 1.355-8.468 0-1.355-1.355-1.355-7.113 0-8.468Z"
                    strokeWidth="2.625"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>

              <Typography variant="Title/md">
                <div>
                  {user.firstName} {user.lastName}
                </div>
              </Typography>
            </div>
            <div className={styles.bottom}>
              <Typography variant="Tag/sm">
                <span>
                  {/* TODO: Should display department of employment */}
                  {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                  Haymarket by Scandic
                  {/* eslint-enable */}
                </span>
              </Typography>
              <Typography variant="Tag/sm">
                {/* TODO: Should display current state of employment */}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <span>Employee</span>
              </Typography>
            </div>
          </div>
        </div>
        <Typography variant="Body/Paragraph/mdRegular">
          <div className={styles.footer}>
            {intl.formatMessage({
              defaultMessage:
                "Book discounted stays for yourself, family and friends!",
            })}
          </div>
        </Typography>
      </Modal>
    </>
  )
}