"use client"

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

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

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

import type { RadioCardProps } from "./types"

export default function RadioCard({
  Icon,
  iconHeight = 32,
  id,
  name,
  subtitle,
  title,
  value,
  disabled = false,
}: 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)
    }
  }

  return (
    <label
      className={cx(styles.label, { [styles.disabled]: disabled })}
      onClick={onLabelClick}
      tabIndex={0}
    >
      <MaterialIcon
        icon="check"
        className={styles.selectedIcon}
        size={22}
        color="Icon/Inverted"
      />
      {Icon ? (
        <Icon
          className={styles.icon}
          color="CurrentColor"
          height={iconHeight}
        />
      ) : null}
      <Typography variant="Body/Paragraph/mdBold" className={styles.title}>
        <p>{title}</p>
      </Typography>
      <Typography variant="Body/Paragraph/mdBold" className={styles.subtitle}>
        <p>{subtitle}</p>
      </Typography>
      <input
        {...register(name)}
        aria-hidden
        id={id || name}
        hidden
        type="radio"
        disabled={disabled}
        value={value}
      />
    </label>
  )
}
