'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Conditional Tab - Dependency/conditional display configuration
 */
import { useMemo } from 'react';
import { HiX } from 'react-icons/hi';
import { useTemplateGenerator } from '../../context.js';
import { get_all_field_ids, get_field_by_path, find_field_path_by_id } from '../../utils/template_utils.js';
import { EditorSection, EditorLabel, EditorInput, EditorSelect, EditorHelpText, LABEL_ICONS, } from '../../../shared/editor_theme/index.js';
export function ConditionalTab({ field, on_update, on_commit, readonly = false }) {
    const { state } = useTemplateGenerator();
    // Parse current dependency
    const parsed_dependency = useMemo(() => {
        if (!field.dependency)
            return null;
        const parts = field.dependency.split(':');
        if (parts.length !== 2)
            return null;
        return {
            field_id: parts[0].trim(),
            value: parts[1].trim(),
        };
    }, [field.dependency]);
    // Get all available field IDs (excluding this field)
    const available_fields = useMemo(() => {
        const all_ids = get_all_field_ids(state.sections);
        return all_ids.filter(id => id !== field.id);
    }, [state.sections, field.id]);
    // Get options for selected dependency field
    const dependency_field_options = useMemo(() => {
        if (!parsed_dependency?.field_id)
            return null;
        const path = find_field_path_by_id(state.sections, parsed_dependency.field_id);
        if (!path)
            return null;
        const dep_field = get_field_by_path(state.sections, path);
        if (!dep_field)
            return null;
        // Return options if it's a combo/radio field
        if (dep_field.component_type === 'HazoCollabFormCombo' ||
            dep_field.component_type === 'HazoCollabFormRadio') {
            return dep_field.input_options ?? [];
        }
        // For checkbox, suggest true/false
        if (dep_field.component_type === 'HazoCollabFormCheckbox') {
            return [
                { label: 'Checked', value: 'true' },
                { label: 'Unchecked', value: 'false' },
            ];
        }
        return null;
    }, [state.sections, parsed_dependency?.field_id]);
    // Handle field selection
    const handle_field_change = (field_id) => {
        if (!field_id) {
            on_update({ dependency: undefined });
        }
        else {
            // Keep existing value or use empty placeholder (will show value selector)
            const value = parsed_dependency?.value ?? '';
            on_update({ dependency: `${field_id}:${value}` });
        }
        on_commit('Update dependency field');
    };
    // Handle value change
    const handle_value_change = (value) => {
        if (!parsed_dependency?.field_id)
            return;
        if (!value) {
            on_update({ dependency: undefined });
        }
        else {
            on_update({ dependency: `${parsed_dependency.field_id}:${value}` });
        }
    };
    // Clear dependency
    const handle_clear = () => {
        on_update({ dependency: undefined });
        on_commit('Clear dependency');
    };
    return (_jsxs("div", { children: [_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.depends_on, children: "Conditional Display" }), _jsx(EditorHelpText, { children: "Show this field only when another field has a specific value" })] }), field.dependency && (_jsx(EditorSection, { children: _jsxs("div", { className: "flex items-center gap-2 p-3 border rounded-lg bg-muted/20", children: [_jsx("div", { className: "flex-1", children: _jsxs("div", { className: "text-sm", children: ["Show when ", _jsx("code", { className: "px-1 bg-background rounded", children: parsed_dependency?.field_id }), ' ', "= ", _jsx("code", { className: "px-1 bg-background rounded", children: parsed_dependency?.value })] }) }), !readonly && (_jsx("button", { onClick: handle_clear, className: "p-1.5 hover:bg-muted rounded text-muted-foreground hover:text-foreground", title: "Remove dependency", children: _jsx(HiX, { className: "w-4 h-4" }) }))] }) })), _jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.depends_on, children: "Depends on Field" }), _jsxs(EditorSelect, { value: parsed_dependency?.field_id ?? '', onChange: (e) => handle_field_change(e.target.value), disabled: readonly, children: [_jsx("option", { value: "", children: "No dependency (always show)" }), available_fields.map((id) => (_jsx("option", { value: id, children: id }, id)))] })] }), parsed_dependency?.field_id && (_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.when_value, children: "When Value Equals" }), dependency_field_options ? (_jsxs(EditorSelect, { value: parsed_dependency.value, onChange: (e) => {
                            handle_value_change(e.target.value);
                            on_commit('Update dependency value');
                        }, disabled: readonly, children: [_jsx("option", { value: "", children: "Select a value..." }), dependency_field_options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })) : (_jsx(EditorInput, { type: "text", value: parsed_dependency.value, onChange: (e) => handle_value_change(e.target.value), onBlur: () => on_commit('Update dependency value'), disabled: readonly, placeholder: "Enter the value to match" })), _jsx(EditorHelpText, { children: "This field will only be shown when the dependency field equals this value (string comparison)" })] })), _jsx(EditorSection, { last: true, children: _jsxs("div", { className: "p-4 border rounded-lg bg-blue-50/50 dark:bg-blue-900/10", children: [_jsx("h5", { className: "text-sm font-medium text-blue-800 dark:text-blue-300", children: "How Dependencies Work" }), _jsxs("ul", { className: "mt-2 text-xs text-blue-700 dark:text-blue-400 space-y-1", children: [_jsx("li", { children: "Dependencies use string comparison: the value is converted to string before comparing" }), _jsx("li", { children: "For checkboxes, use \"true\" or \"false\" as values" }), _jsx("li", { children: "For combo/radio, use the option's value (not label)" }), _jsx("li", { children: "If the dependency field is empty or doesn't exist, this field will be hidden" })] })] }) })] }));
}
//# sourceMappingURL=conditional_tab.js.map