import { Checkmark , Indeterminate } from '@amsterdam/asc-assets' ; import type { ChangeEvent , HTMLAttributes } from 'react' ; import { forwardRef , useContext , useEffect , useImperativeHandle , useMemo , useRef , useState , } from 'react' ; import LabelContext from '../Label/LabelContext' ; import type { Props } from './CheckboxStyle' ; import CheckboxStyle , { CheckboxIconStyle , CheckboxWrapperStyle , } from './CheckboxStyle' ; const Checkbox = forwardRef < HTMLInputElement , Props & HTMLAttributes < HTMLInputElement > > ( ( { checked : checkedProp , className , onChange , disabled , error , indeterminate , ... otherProps } , externalRef ) => { const [ checked , setChecked ] = useState ( ! ! checkedProp ) ; const { setActive } = useContext ( LabelContext ) ; const ref = useRef < HTMLInputElement > ( null ) ; useImperativeHandle ( externalRef , ( ) => ref . current as HTMLInputElement ) ; useEffect ( ( ) => { if ( ref . current ) { ref . current . indeterminate = indeterminate ?? false ; } } , [ ref , indeterminate ] ) ; useEffect ( ( ) => { setActive ( checked ) ; } , [ checked , setActive ] ) ; useMemo ( ( ) => { setChecked ( ! ! checkedProp ) ; } , [ checkedProp , setChecked ] ) ; return ( < CheckboxWrapperStyle { ... { className , disabled , checked , error } } aria - disabled = { disabled } > < CheckboxIconStyle { ... { disabled , checked , error , indeterminate } } data - testid = "checkboxIcon" size = { 15 } > { ! checked && indeterminate && < Indeterminate />} { checked && < Checkmark />} < /CheckboxIconStyle> < CheckboxStyle { ... { ... otherProps , disabled , checked , ref } } onChange = { ( e ) => { if ( onChange ) { onChange ( e ) ; } if ( typeof checkedProp === 'undefined' ) { setChecked ( ! checked ) ; } } } /> < /CheckboxWrapperStyle>); } ) ; export default Checkbox ;