import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { FormLabel } from '../../../../../scalars/components/fragments/form-label/form-label.js';
import { Icon } from '../../../icon/icon.js';
import { cn } from '../../../../../scalars/lib/utils.js';
import { InputDiff } from '../../input/subcomponent/input-diff.js';
import { TextDiff } from '../../input/subcomponent/text-diff.js';
import { getDateFormat, parseDateTimeValueToInput } from '../utils.js';
import { formatInputToDisplayValid } from '../../time-picker/utils.js';
const DateTimeInputDiff = ({ value, baseValue, viewMode, icon, label, required, dateFormat, timeFormat = 'hh:mm a', timeIntervals = 1, ...props }) => {
    const is12HourFormat = timeFormat.includes('a') || timeFormat.includes('A');
    const internalFormat = getDateFormat(dateFormat ?? '');
    const newValue = parseDateTimeValueToInput(value ?? '', internalFormat, is12HourFormat, timeIntervals);
    const newBaseValue = parseDateTimeValueToInput(baseValue ?? '', internalFormat, is12HourFormat, timeIntervals);
    const valueSplitDate = newValue.split(' ')[0];
    const valueSplitTime = newValue.split(' ')[1];
    const formattedValueTime = formatInputToDisplayValid(valueSplitTime, is12HourFormat, timeIntervals);
    const baseSplitDate = newBaseValue.split(' ')[0];
    const baseSplitTime = newBaseValue.split(' ')[1];
    const formattedBaseTime = formatInputToDisplayValid(baseSplitTime, is12HourFormat, timeIntervals);
    return (_jsxs(_Fragment, { children: [label && (_jsx(FormLabel, { disabled: true, required: required, children: label })), _jsx(InputDiff, { className: cn('group'), ...props, children: viewMode === 'mixed' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn('flex flex-1 items-center gap-2 truncate [&>span]:truncate'), children: [_jsx(Icon, { name: icon, size: 16 }), _jsx(TextDiff, { value: `${valueSplitDate} ${formattedValueTime}`, baseValue: `${baseSplitDate} ${formattedBaseTime}`, viewMode: "removal", diffMode: "sentences", className: cn('flex-1') })] }), _jsx("div", { className: cn('ml-3 mr-3 h-[34px] w-px bg-gray-300') }), _jsxs("div", { className: cn('flex flex-1 items-center gap-2 truncate [&>span]:truncate'), children: [_jsx(Icon, { name: icon, size: 16 }), _jsx(TextDiff, { value: `${valueSplitDate} ${formattedValueTime}`, baseValue: `${baseSplitDate} ${formattedBaseTime}`, viewMode: "addition", diffMode: "sentences", className: cn('flex-1') })] })] })) : (_jsxs("div", { className: cn('flex flex-1 items-center gap-2 truncate [&>span]:truncate'), children: [_jsx(Icon, { name: icon, size: 16 }), _jsx(TextDiff, { value: `${valueSplitDate} ${formattedValueTime}`, baseValue: `${baseSplitDate} ${formattedBaseTime}`, viewMode: viewMode, diffMode: "sentences", className: cn('flex-1') })] })) })] }));
};
export default DateTimeInputDiff;
//# sourceMappingURL=date-time-picker-diff.js.map