/**
 * Dialog component for editing an existing field's label and type
 * Pre-populated with current field values
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useEffect, useMemo } from 'react';
import { cn } from '../../utils/cn.js';
import { Dialog, DialogContent, DialogHeader as DefaultDialogHeader, DialogFooter as DefaultDialogFooter, DialogTitle as DefaultDialogTitle, DialogDescription as DefaultDialogDescription, } from '../shared/dialog/index.js';
import { ADD_FIELD_TYPE_META } from '../hazo_add_field_dialog/types.js';
import { FieldTypeCombobox } from '../hazo_add_field_dialog/components/field_type_combobox.js';
import { OptionsListEditor } from '../hazo_add_field_dialog/options/options_list_editor.js';
import { DateOptions } from '../hazo_add_field_dialog/options/date_options.js';
import { CheckboxOptions } from '../hazo_add_field_dialog/options/checkbox_options.js';
import { FileSettings } from '../shared/file_settings/index.js';
/**
 * HazoEditFieldDialog - Dialog for editing an existing field's properties
 *
 * Opens a modal dialog that allows users to:
 * - Edit the field label/question
 * - Change the field type
 * - Configure type-specific options (for Radio/Combo, Date, Checkbox)
 * - Toggle required state
 *
 * Note: Always uses the built-in Dialog and DialogContent to ensure proper
 * portal/overlay behavior. Consumer-provided dialog_components only customize
 * DialogHeader, DialogFooter, DialogTitle, and DialogDescription.
 */
export function HazoEditFieldDialog({ open, on_open_change, field_data, on_confirm, on_cancel, on_delete, title = 'Edit Field', exclude_types = [], dialog_components, combobox_components, }) {
    // Always use built-in Dialog and DialogContent to ensure proper portal/overlay behavior
    // Only use consumer-provided components for inner dialog elements (header, footer, title, description)
    const DialogHeader = dialog_components?.DialogHeader ?? DefaultDialogHeader;
    const DialogFooter = dialog_components?.DialogFooter ?? DefaultDialogFooter;
    const DialogTitle = dialog_components?.DialogTitle ?? DefaultDialogTitle;
    const DialogDescription = dialog_components?.DialogDescription ?? DefaultDialogDescription;
    // Editing state - initialized from field_data
    const [label, set_label] = useState(field_data.label);
    const [field_type, set_field_type] = useState(field_data.field_type);
    const [required, set_required] = useState(field_data.required ?? false);
    const [options, set_options] = useState(field_data.options || [{ label: 'Option 1', value: 'option_1' }]);
    const [date_config, set_date_config] = useState(field_data.date_config || { date_mode: 'single' });
    const [checkbox_config, set_checkbox_config] = useState(field_data.checkbox_config || {});
    const [accept_public_files, set_accept_public_files] = useState(field_data.accept_public_files ?? 'none');
    const [accept_private_files, set_accept_private_files] = useState(field_data.accept_private_files ?? 'none');
    // Available field types (excludes DataTable, Group, and any types in exclude_types)
    const available_types = useMemo(() => ADD_FIELD_TYPE_META.filter(meta => meta.type !== 'HazoCollabFormDataTable' &&
        meta.type !== 'Group' &&
        !exclude_types.includes(meta.type)), [exclude_types]);
    // Reset form when dialog opens or field_data changes
    useEffect(() => {
        if (open) {
            set_label(field_data.label);
            set_field_type(field_data.field_type);
            set_required(field_data.required ?? false);
            set_options(field_data.options || [{ label: 'Option 1', value: 'option_1' }]);
            set_date_config(field_data.date_config || { date_mode: 'single' });
            set_checkbox_config(field_data.checkbox_config || {});
            set_accept_public_files(field_data.accept_public_files ?? 'none');
            set_accept_private_files(field_data.accept_private_files ?? 'none');
        }
    }, [open, field_data]);
    // Handle field type change - reset type-specific config when type changes
    const handle_type_change = useCallback((type) => {
        set_field_type(type);
        // Initialize options for Radio/Combo if not already set
        if (['HazoCollabFormRadio', 'HazoCollabFormCombo'].includes(type)) {
            if (!options || options.length === 0) {
                set_options([{ label: 'Option 1', value: 'option_1' }]);
            }
        }
        // Initialize date config for Date if not already set
        if (type === 'HazoCollabFormDate') {
            if (!date_config.date_mode) {
                set_date_config({ date_mode: 'single' });
            }
        }
    }, [options, date_config]);
    // Handle confirm
    const handle_confirm = useCallback(() => {
        if (!label.trim())
            return;
        const updated_field = {
            id: field_data.id,
            label: label.trim(),
            field_type,
            required,
        };
        // Add type-specific options
        if (['HazoCollabFormRadio', 'HazoCollabFormCombo'].includes(field_type)) {
            updated_field.options = options;
        }
        if (field_type === 'HazoCollabFormDate') {
            updated_field.date_config = date_config;
        }
        if (field_type === 'HazoCollabFormCheckbox') {
            updated_field.checkbox_config = checkbox_config;
        }
        // File settings
        updated_field.accept_public_files = accept_public_files;
        updated_field.accept_private_files = accept_private_files;
        if (field_data.private_files_permission) {
            updated_field.private_files_permission = field_data.private_files_permission;
        }
        on_confirm(updated_field);
        on_open_change(false);
    }, [field_data.id, field_data.private_files_permission, label, field_type, required, options, date_config, checkbox_config, accept_public_files, accept_private_files, on_confirm, on_open_change]);
    // Handle cancel
    const handle_cancel = useCallback(() => {
        on_cancel?.();
        on_open_change(false);
    }, [on_cancel, on_open_change]);
    // Handle delete
    const handle_delete = useCallback(() => {
        on_delete?.();
        on_open_change(false);
    }, [on_delete, on_open_change]);
    // Check if field type needs options editor
    const needs_options = ['HazoCollabFormRadio', 'HazoCollabFormCombo'].includes(field_type);
    const needs_date_config = field_type === 'HazoCollabFormDate';
    const needs_checkbox_config = field_type === 'HazoCollabFormCheckbox';
    return (_jsx(Dialog, { open: open, onOpenChange: on_open_change, children: _jsxs(DialogContent, { className: "cls_edit_field_dialog_content", style: { maxWidth: '480px' }, prevent_close_on_outside_click: true, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: "Edit the field label and type." })] }), _jsxs("div", { className: "space-y-4 py-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "edit-field-label", className: "text-sm font-medium leading-none", children: "Label" }), _jsx("input", { id: "edit-field-label", type: "text", value: label, onChange: e => set_label(e.target.value), placeholder: "Enter field label...", autoFocus: true, className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium leading-none", children: "Field Type" }), _jsx("div", { children: _jsx(FieldTypeCombobox, { value: field_type, available_types: available_types, on_change: handle_type_change, combobox_components: combobox_components }) })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("input", { id: "edit-field-required", type: "checkbox", checked: required, onChange: e => set_required(e.target.checked), className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" }), _jsx("label", { htmlFor: "edit-field-required", className: "text-sm font-medium leading-none cursor-pointer", children: "Required field" })] }), _jsx(FileSettings, { accept_public_files: accept_public_files, on_accept_public_files_change: set_accept_public_files, accept_private_files: accept_private_files, on_accept_private_files_change: (v) => set_accept_private_files(v), id_prefix: "edit-field-" }), needs_options && (_jsx(OptionsListEditor, { options: options, on_options_change: set_options, label: "Options", min_options: 1, max_options: 10 })), needs_date_config && (_jsx(DateOptions, { config: date_config, on_config_change: set_date_config })), needs_checkbox_config && (_jsx(CheckboxOptions, { config: checkbox_config, on_config_change: set_checkbox_config }))] }), _jsxs(DialogFooter, { className: "flex-row justify-between", children: [on_delete && (_jsx("button", { type: "button", onClick: handle_delete, className: "cls_edit_field_dialog_delete inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-destructive ring-offset-background transition-colors hover:bg-destructive/10 hover:text-destructive focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", children: "Delete Field" })), _jsxs("div", { className: "flex gap-3", children: [_jsx("button", { type: "button", onClick: handle_confirm, disabled: !label.trim(), className: cn('cls_edit_field_dialog_confirm inline-flex h-10 items-center justify-center rounded-md px-4 py-2 text-sm font-medium ring-offset-background transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', label.trim()
                                        ? 'bg-primary text-primary-foreground hover:bg-primary/90'
                                        : 'bg-muted text-muted-foreground cursor-not-allowed'), children: "Save Changes" }), _jsx("button", { type: "button", onClick: handle_cancel, className: "cls_edit_field_dialog_cancel inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", children: "Cancel" })] })] })] }) }));
}
//# sourceMappingURL=hazo_edit_field_dialog.js.map