"use client"

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 styles from "./digitalTeamMemberCard.module.css"

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

interface DigitalTeamMemberCardClientProps {
  user: User
}

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

  return (
    <Modal
      trigger={
        <Button className={styles.button}>
          <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>
      }
      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>
  )
}