import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../../../scalars/lib/utils.js';
import { useId, useMemo } from 'react';
import { ToggleBase } from '../toggle-base.js';
const ToggleDiff = ({ value, label, optionalLabel, required, disabled, baseValue = false, viewMode = 'edition', onChange, 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 justify-end gap-2", children: [_jsx("span", { className: cn('text-gray-700', 'font-inter text-sm font-semibold leading-[22px]', hasDifference.hasDiff && (viewMode === 'removal' || viewMode === 'mixed')
                    ? hasDifference.type === 'removal'
                        ? 'bg-red-600/30'
                        : undefined
                    : undefined), children: optionalLabel }), _jsx(ToggleBase, { "aria-labelledby": `${id}-label`, required: required, name: name, id: id, checked: value, onCheckedChange: onChange, disabled: disabled }), _jsx("span", { className: cn('text-gray-700', 'text-sm font-semibold leading-[22px]', hasDifference.hasDiff && (viewMode === 'addition' || viewMode === 'mixed')
                    ? hasDifference.type === 'addition'
                        ? 'bg-green-600/30'
                        : undefined
                    : undefined), children: label })] }));
};
export default ToggleDiff;
//# sourceMappingURL=toogle-diff.js.map