web/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/index.tsx

"use client"

import { cx } from "class-variance-authority"
import { useFormContext } from "react-hook-form"

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

import Divider from "@/components/TempDesignSystem/Divider"

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

import type { RadioCardProps } from "./types"

export default function RadioCard({
  Icon,
  iconHeight = 32,
  id,
  name,
  title,
  subtitleSecondary,
  subtitle,
  value,
  disabled = false,
  description,
  descriptionSecondary,
}: RadioCardProps) {
  const { register, setValue } = useFormContext()

  function onLabelClick(event: React.MouseEvent) {
    // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
    event.preventDefault()
    if (!disabled) {
      setValue(name, value)
    }
  }

  function onKeyDown(event: React.KeyboardEvent) {
    if (disabled) return

    if (event.key === "Enter") {
      setValue(name, value)
    }
  }

  return (
    <label
      className={cx(styles.label, { [styles.disabled]: disabled })}
      onClick={onLabelClick}
      onKeyDown={onKeyDown}
      tabIndex={0}
    >
      <div className={styles.selectedIcon}>
        <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
      </div>
      {Icon ? (
        <Icon
          className={styles.icon}
          color="CurrentColor"
          height={iconHeight}
        />
      ) : null}
      <Typography variant="Body/Paragraph/mdBold" className={styles.title}>
        <p>{title}</p>
      </Typography>
      {subtitleSecondary ? (
        <Typography
          variant="Body/Supporting text (caption)/smRegular"
          className={styles.subtitleSecondary}
        >
          <p>{subtitleSecondary}</p>
        </Typography>
      ) : null}
      <Typography variant="Body/Paragraph/mdBold" className={styles.subtitle}>
        <p>{subtitle}</p>
      </Typography>

      {description || descriptionSecondary ? (
        <Divider
          className={styles.divider}
          variant="horizontal"
          color="subtle"
        />
      ) : null}

      {description ? (
        <Typography
          variant="Body/Supporting text (caption)/smRegular"
          className={styles.description}
        >
          <p>{description}</p>
        </Typography>
      ) : null}

      {descriptionSecondary ? (
        <Typography
          variant="Body/Supporting text (caption)/smRegular"
          className={styles.descriptionSecondary}
        >
          <p>{descriptionSecondary}</p>
        </Typography>
      ) : null}

      <input
        {...register(name)}
        aria-hidden
        id={id || name}
        hidden
        type="radio"
        disabled={disabled}
        value={value}
      />
    </label>
  )
}