"use client"; import * as React from "react"; import { CircleCheck } from "lucide-react"; import { cn } from "@/lib/utils"; import { getOptionClassName, fieldHeaderStyles } from "@/lib/styles"; import { ChoiceOption } from "@/lib/types"; import { Checkbox } from "@/components/ui/checkbox"; import { Badge } from "@/components/ui/badge"; export interface MultipleChoiceProps extends Omit< React.ComponentProps, "checked" | "onChange" | "value" > { title?: string; hint?: string; options: ChoiceOption[]; value?: string[]; onChange?: (value: string[]) => void; maxSelections?: number; className?: string; checkboxPosition?: "left" | "right"; checkboxVariant?: "checkbox" | "icon" | "none"; showNumbers?: boolean; highlightOnHover?: boolean; showOutlineOnSelect?: boolean; showFillOnSelect?: boolean; showShadowOnSelect?: boolean; allowTextSelection?: boolean; } export function MultipleChoice({ title, hint, options, value = [], onChange, maxSelections, className, disabled, checkboxPosition = "right", checkboxVariant = "icon", showNumbers = false, highlightOnHover = true, showOutlineOnSelect = true, showFillOnSelect = false, showShadowOnSelect = false, allowTextSelection = false, ...checkboxProps }: MultipleChoiceProps) { const groupId = React.useId(); const noneOption = options.find((opt) => opt.none); const isMaxReached = maxSelections !== undefined && value.length >= maxSelections; const handleCheckedChange = ( optionValue: string, checked: boolean, isNoneOption: boolean, ) => { if (!onChange) return; if (isNoneOption) { onChange(checked ? [optionValue] : []); return; } if (checked && isMaxReached) return; const newValues = checked ? [ ...value.filter((v) => !noneOption || v !== noneOption.value), optionValue, ] : value.filter((v) => v !== optionValue); onChange(newValues); }; return (

{(title || hint) && (

{title &&

{title}

} {hint &&

{hint}

}

)}

{options.map((option, index) => { const optionId = `${groupId}-${option.value}`; const isChecked = value.includes(option.value); const isDisabled = disabled || option.disabled || (isMaxReached && !isChecked); const renderIndicator = () => { return ( <> handleCheckedChange( option.value, checked === true, option.none === true, ) } disabled={isDisabled} className={checkboxVariant !== "checkbox" ? "sr-only peer" : ""} {...checkboxProps} /> {checkboxVariant === "icon" && isChecked && ( )} ); }; return (

{showNumbers && ( {index + 1} )} {checkboxPosition !== "right" && renderIndicator()}

{option.label} {option.badge && ( {option.badge} )}

{checkboxPosition === "right" && renderIndicator()}

); })}

); }