import { useEffect } from 'react';
import useAdmui from './useAdmui';
import { HiCheck } from "react-icons/hi";
function AdmuiCheck({ label = 'aui-control-label', x = null, required = false, name }) {
    const { control, field, isInvalid, id } = useAdmui({ name, required });
    useEffect(() => {
        switch (field.value) {
            case 'false':
                field.onChange(false);
                break;
            case '0':
                field.onChange(false);
                break;
            case 0:
                field.onChange(false);
                break;
            case 'true':
                field.onChange(true);
                break;
            case '1':
                field.onChange(true);
                break;
            case 1:
                field.onChange(true);
                break;
        }
    }, [field.value]);

    const checkBoxClick = () => {
        field.onChange(!field.value);
        // field.onChange('false);
    }

    return (
        <>
            <div className={`aui-control-container ${x ? 'aui-control-container-x' : 'aui-control-container-y-checkbox'} ${isInvalid ? 'aui-control-container-invalid' : ''}`}
                style={{ '--aui-control-container-x': `${x}px` }}
            >
                <div className="aui-control-label-container" onClick={() => checkBoxClick()}>
                    <label className="aui-control-label">{label}</label> {required ? <AdmuiAsterisk isInvalid={isInvalid} /> : ''}
                </div>
                <div className="aui-control-control-container" >
                    <div className="aui-control-checkbox-container" onClick={() => checkBoxClick()}>
                        <div className="aui-control-checkbox">
                            {field.value ?
                                <div className="aui-control-checkbox-checked">
                                    <HiCheck />
                                </div>
                                : ''}
                        </div>

                    </div>

                    {/* <input
                        className="aui-control-input"
                        id={id} {...field}
                        value={field.value ?? ''}
                        autoComplete='off'
                    /> */}
                </div>
            </div >
        </>
    )
}
export default AdmuiCheck