import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId, useMemo } from 'react';
import { CheckboxBase } from '../checkbox-base.js';
import { FormLabel } from '../../../../../scalars/components/fragments/form-label/index.js';
import { cn } from '../../../../../scalars/lib/utils.js';
const CheckboxDiff = ({ value, label, required, disabled, baseValue = false, viewMode = 'edition', name, }) => {
    const generatedId = useId();
    const id = generatedId;
    const hasDifference = useMemo(() => {
        if (baseValue === value) {
            return { hasDiff: false, type: 'neutral' };
        }
        if (!baseValue && value === true) {
            return { hasDiff: true, type: 'addition' };
        }
        return { hasDiff: true, type: 'removal' };
    }, [baseValue, value]);
    return (_jsxs("div", { className: "flex flex-row items-center gap-2", "data-testid": "checkbox-diff", children: [_jsx(CheckboxBase, { id: id, name: name, checked: value, disabled: disabled, required: required }), _jsx(FormLabel, { htmlFor: id, required: required, disabled: disabled, inline: true, className: cn(hasDifference.hasDiff &&
                    (viewMode === 'addition' || viewMode === 'mixed') &&
                    hasDifference.type === 'addition'
                    ? 'bg-green-600/30'
                    : hasDifference.hasDiff &&
                        (viewMode === 'removal' || viewMode === 'mixed') &&
                        hasDifference.type === 'removal'
                        ? 'bg-red-600/30'
                        : undefined), children: label })] }));
};
CheckboxDiff.displayName = 'CheckboxDiff';
export { CheckboxDiff };
//# sourceMappingURL=checkbox-diff.js.map