import { type ChangeEvent } from 'react';

import {
    formFieldClassName,
    formHelpClassName,
    formLabelClassName,
    radioInFormOptionClassName,
} from '@admin/components/ui/field-styles';
import { cn } from '@admin/lib/utils';

type FormCheckboxFieldProps = {
    id?: string;
    label: string;
    checkboxLabel: string;
    checked: boolean;
    disabled?: boolean;
    helpText?: string;
    onChange: (checked: boolean) => void;
};

export function FormCheckboxField({
    id,
    label,
    checkboxLabel,
    checked,
    disabled,
    helpText,
    onChange,
}: FormCheckboxFieldProps) {
    const inputId = id ?? label.toLowerCase().replace(/\s+/g, '-');

    return (
        <div className={cn(formFieldClassName, 'mb-4')}>
            <span className={formLabelClassName}>{label}</span>
            <label
                htmlFor={inputId}
                className={cn(
                    radioInFormOptionClassName,
                    'min-h-[42px] items-center',
                    disabled && 'cursor-not-allowed opacity-50',
                )}
            >
                <input
                    type="checkbox"
                    id={inputId}
                    className="ti-form-checkbox shrink-0"
                    checked={checked}
                    disabled={disabled}
                    onChange={(event: ChangeEvent<HTMLInputElement>) => onChange(event.target.checked)}
                />
                <span className="ms-2 text-sm text-gray-500 dark:text-white/70">{checkboxLabel}</span>
            </label>
            {helpText ? <p className={formHelpClassName}>{helpText}</p> : null}
        </div>
    );
}