import { ChangeEvent, FocusEvent } from 'react';
import { FieldValues, useController, UseControllerProps } from 'react-hook-form';
import { isBoolean, isString } from 'lodash';

import { useDefaultProps } from '../../hooks';
import { useLocalization } from '../../localization';
import { Checkbox, CheckBoxProps } from '../checkbox';

export type RHFCheckBoxProps<T extends FieldValues = FieldValues> = UseControllerProps<T> &
	Omit<CheckBoxProps, 'value' | 'disabled' | 'ref' | 'error' | 'defaultValue' | 'name'>;

function RHFCheckbox<T extends FieldValues>(inProps: RHFCheckBoxProps<T>) {
	const {
		/** React Hook Form */
		name,
		rules,
		control,
		disabled,
		defaultValue,
		shouldUnregister,
		/** React Hook Form */

		label,
		required,
		helperText,
		onChange,
		onBlur,

		...props
	} = useDefaultProps({ name: 'ReevolveRHFCheckbox', props: inProps });

	const { translate } = useLocalization();

	const {
		field,
		fieldState: { error }
	} = useController<T>({
		name,
		defaultValue,
		disabled,
		shouldUnregister,
		control,
		rules: rules && {
			...rules,
			required: rules?.required === true ? translate('validation.required', { label }) : rules?.required
		}
	});

	function onChangeHandler(e: ChangeEvent<HTMLInputElement>, isChecked: boolean) {
		field.onChange(isChecked);
		onChange?.(e, isChecked);
	}

	function onBlurHandler(e: FocusEvent<HTMLButtonElement, Element>) {
		field.onBlur();
		onBlur?.(e);
	}

	return (
		<Checkbox
			name={field.name}
			label={label}
			ref={field.ref}
			value={field.value ?? false}
			disabled={field.disabled}
			onBlur={onBlurHandler}
			onChange={onChangeHandler}
			error={!!error}
			required={
				isBoolean(rules?.required) ? rules.required : isString(rules?.required) || rules?.required?.value || required
			}
			helperText={error?.message || helperText}
			{...props}
		/>
	);
}

declare module '@mui/material' {
	interface Components {
		ReevolveRHFCheckbox?: {
			defaultProps?: Partial<RHFCheckBoxProps>;
		};
	}
}

export default RHFCheckbox;