import { useMemo } from "react"
import { useFormContext } from "react-hook-form"

import { HeartIcon, InfoCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

import { FilterChipProps } from "@/types/components/form/filterChip"

export default function FilterChip({
  Icon = HeartIcon,
  iconHeight = 20,
  iconWidth = 20,
  id,
  name,
  label,
  type,
  value,
  selected,
  disabled,
  hasTooltip,
}: FilterChipProps) {
  const { register } = useFormContext()

  const color = useMemo(() => {
    if (selected) return "burgundy"
    if (disabled) return "disabled"
    return "uiTextPlaceholder"
  }, [selected, disabled])

  return (
    <label
      className={styles.label}
      data-selected={selected}
      data-disabled={disabled}
    >
      <Icon
        className={styles.icon}
        color={color}
        height={iconHeight}
        width={iconWidth}
      />
      <Caption type="bold" color={color} className={styles.caption}>
        {label}
      </Caption>

      {hasTooltip && (
        <InfoCircleIcon color={color} height={iconHeight} width={iconWidth} />
      )}

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