/**
 * HazoCollabFormSplitAmount — Composite field for splitting an expense amount
 * between work and personal use.
 *
 * Renders three labeled inputs in a 3-column grid:
 *   1. Total        — editable numeric input (currency)
 *   2. Work %       — editable integer input (0–100), clamped on change
 *   3. Deductible   — readonly, computed as total × work_percent / 100
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { parse_split_value, compute_deductible, clamp_work_percent, } from '../utils/split_amount.js';
/**
 * Composite form field that splits an expense into total, work %, and
 * computed deductible portions.
 */
export function HazoCollabFormSplitAmount({ field_id, label, value, onChange, default_work_percent = 100, currency_symbol = '$', decimal_places = 2, }) {
    const parsed = React.useMemo(() => parse_split_value(value, default_work_percent), [value, default_work_percent]);
    const deductible = React.useMemo(() => compute_deductible(parsed), [parsed]);
    const handle_total_change = React.useCallback((e) => {
        const raw = e.target.value;
        const new_total = raw === '' || raw === '-' ? 0 : parseFloat(raw);
        const total = Number.isFinite(new_total) ? new_total : 0;
        onChange?.({ total, work_percent: parsed.work_percent });
    }, [parsed.work_percent, onChange]);
    const handle_work_percent_change = React.useCallback((e) => {
        const clamped = clamp_work_percent(e.target.value, default_work_percent);
        onChange?.({ total: parsed.total, work_percent: clamped });
    }, [parsed.total, default_work_percent, onChange]);
    const total_id = `${field_id}_total`;
    const work_pct_id = `${field_id}_work_percent`;
    const deductible_id = `${field_id}_deductible`;
    return (_jsxs("div", { className: "cls_split_amount_wrapper flex flex-col gap-1", children: [_jsx("span", { className: "cls_split_amount_label text-sm font-medium leading-none", children: label }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: total_id, className: "cls_split_amount_total_label text-xs text-muted-foreground", children: "Total" }), _jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground text-xs pointer-events-none select-none", children: currency_symbol }), _jsx("input", { id: total_id, type: "number", step: decimal_places > 0 ? `0.${'0'.repeat(decimal_places - 1)}1` : '1', value: parsed.total.toFixed(decimal_places), onChange: handle_total_change, className: "cls_split_amount_total w-full h-8 rounded-md border border-input bg-transparent pl-6 pr-2 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })] })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: work_pct_id, className: "cls_split_amount_work_label text-xs text-muted-foreground", children: "Work %" }), _jsx("input", { id: work_pct_id, type: "number", min: 0, max: 100, step: 1, value: String(parsed.work_percent), onChange: handle_work_percent_change, className: "cls_split_amount_work_percent w-full h-8 rounded-md border border-input bg-transparent px-2 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: deductible_id, className: "cls_split_amount_deductible_label text-xs text-muted-foreground", children: "Deductible" }), _jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground text-xs pointer-events-none select-none", children: currency_symbol }), _jsx("input", { id: deductible_id, type: "number", readOnly: true, tabIndex: -1, value: deductible.toFixed(decimal_places), className: "cls_split_amount_deductible w-full h-8 rounded-md border border-input bg-slate-100 pl-6 pr-2 py-1 text-sm shadow-sm cursor-default" })] })] })] })] }));
}
HazoCollabFormSplitAmount.displayName = 'HazoCollabFormSplitAmount';
//# sourceMappingURL=hazo_collab_form_split_amount.js.map