'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Icons Behaviour Tab - Configure icons_behaviour at form-set level
 * Includes control display settings and role management
 * Note: icons_behaviour is now at form-set level (state.icons_behaviour), not section level
 */
import { useState } from 'react';
import { HiPlus, HiTrash, HiPencil, HiCheck, HiX } from 'react-icons/hi';
import { useTemplateGenerator } from '../../context.js';
import { ALL_CONTROL_NAMES, CONTROL_NAME_LABELS, get_default_icons_behaviour, } from '../../types.js';
import { Switch } from '../ui/switch.js';
import { cn } from '../../../../utils/cn.js';
import { EditorSection, EditorLabel, EditorSelect, LABEL_ICONS, } from '../../../shared/editor_theme/index.js';
export function IconsBehaviourTab({ readonly = false }) {
    const { state, actions } = useTemplateGenerator();
    // icons_behaviour is now at form-set level, not section level
    const icons_behaviour = state.icons_behaviour ?? get_default_icons_behaviour();
    return (_jsxs("div", { children: [_jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.show_icons, children: "Icon Display Configuration" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Configure which controls have borders and how they are displayed. Controls are automatically consolidated into a kebab menu when 2+ non-extracted controls are visible." })] }), _jsxs(EditorSection, { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.data_ok, children: "Data OK Mode" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Display mode for Data OK controls across all fields" }), _jsxs(EditorSelect, { value: icons_behaviour.data_ok_mode ?? 'checkbox', onChange: (e) => {
                            actions.update_icons_behaviour({
                                data_ok_mode: e.target.value,
                            });
                        }, disabled: readonly, field_width: "md", children: [_jsx("option", { value: "checkbox", children: "Checkbox (OK / Not OK)" }), _jsx("option", { value: "multistate", children: "Multi-State (OK / Not OK / Pending)" })] })] }), _jsx(EditorSection, { children: _jsx(ControlSelector, { label: "Border On", description: "Controls that show borders", selected: icons_behaviour.border_on ?? [], on_change: (value) => {
                        actions.update_icons_behaviour({ border_on: value });
                    }, disabled: readonly }) }), _jsx(EditorSection, { children: _jsx(ControlSelector, { label: "Always Extracted", description: "Controls always shown inline (never in kebab menu)", selected: icons_behaviour.always_extracted ?? [], on_change: (value) => {
                        actions.update_icons_behaviour({ always_extracted: value });
                    }, disabled: readonly }) }), _jsx(EditorSection, { children: _jsx(ControlSelector, { label: "Extracted on Value", description: "Controls extracted from kebab when they have values/activity (e.g., notes exist, chat has messages)", selected: icons_behaviour.extracted_on_value ?? [], on_change: (value) => {
                        actions.update_icons_behaviour({ extracted_on_value: value });
                    }, disabled: readonly }) }), _jsx(EditorSection, { children: _jsx(IconOrderEditor, { order: icons_behaviour.icon_order ?? ALL_CONTROL_NAMES, on_change: (value) => {
                        actions.update_icons_behaviour({ icon_order: value });
                    }, disabled: readonly }) }), _jsxs(EditorSection, { last: true, children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("div", { children: [_jsx(EditorLabel, { icon: LABEL_ICONS.editable, children: "Roles" }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Define roles with different control permissions" })] }), !readonly && (_jsxs("button", { onClick: () => {
                                    const role_id = `role_${Date.now().toString(36)}`;
                                    const new_role = {
                                        role_id,
                                        role_name: 'New Role',
                                        controls: {},
                                    };
                                    actions.add_role(new_role);
                                }, className: "flex items-center gap-1 px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors", children: [_jsx(HiPlus, { className: "w-4 h-4" }), "Add Role"] }))] }), _jsx("div", { className: "space-y-3", children: (icons_behaviour.roles ?? []).length === 0 ? (_jsxs("div", { className: "p-4 border border-dashed rounded-lg text-center text-muted-foreground", children: [_jsx("p", { className: "text-sm", children: "No roles defined" }), _jsx("p", { className: "text-xs mt-1", children: "Add roles to define different control permissions" })] })) : ((icons_behaviour.roles ?? []).map((role) => (_jsx(RoleEditor, { role: role, on_update: (updates) => actions.update_role(role.role_id, updates), on_delete: () => actions.delete_role(role.role_id), disabled: readonly }, role.role_id)))) })] })] }));
}
function ControlSelector({ label, description, selected, on_change, disabled }) {
    const toggle = (control) => {
        if (disabled)
            return;
        const new_value = selected.includes(control)
            ? selected.filter((c) => c !== control)
            : [...selected, control];
        on_change(new_value);
    };
    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-medium", children: label }), _jsx("p", { className: "text-xs text-muted-foreground", children: description })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: ALL_CONTROL_NAMES.map((control) => {
                    const is_selected = selected.includes(control);
                    return (_jsx("button", { onClick: () => toggle(control), disabled: disabled, className: cn('px-3 py-1.5 text-xs rounded-full border transition-colors', is_selected
                            ? 'bg-primary text-primary-foreground border-primary'
                            : 'bg-background hover:bg-muted border-border', disabled && 'opacity-50 cursor-not-allowed'), children: CONTROL_NAME_LABELS[control] }, control));
                }) })] }));
}
function IconOrderEditor({ order, on_change, disabled }) {
    const move_up = (index) => {
        if (disabled || index === 0)
            return;
        const new_order = [...order];
        [new_order[index - 1], new_order[index]] = [new_order[index], new_order[index - 1]];
        on_change(new_order);
    };
    const move_down = (index) => {
        if (disabled || index === order.length - 1)
            return;
        const new_order = [...order];
        [new_order[index], new_order[index + 1]] = [new_order[index + 1], new_order[index]];
        on_change(new_order);
    };
    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-medium", children: "Icon Order" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Display order of icons (left to right)" })] }), _jsx("div", { className: "space-y-1 p-3 border rounded-lg bg-muted/30", children: order.map((control, index) => (_jsxs("div", { className: "flex items-center justify-between py-1.5 px-2 bg-background rounded border", children: [_jsx("span", { className: "text-sm", children: CONTROL_NAME_LABELS[control] }), !disabled && (_jsxs("div", { className: "flex gap-1", children: [_jsx("button", { onClick: () => move_up(index), disabled: index === 0, className: "p-1 text-muted-foreground hover:text-foreground disabled:opacity-30", children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) }) }), _jsx("button", { onClick: () => move_down(index), disabled: index === order.length - 1, className: "p-1 text-muted-foreground hover:text-foreground disabled:opacity-30", children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })] }))] }, control))) })] }));
}
function RoleEditor({ role, on_update, on_delete, disabled }) {
    const [is_expanded, set_is_expanded] = useState(false);
    const [is_editing_name, set_is_editing_name] = useState(false);
    const [name_value, set_name_value] = useState(role.role_name);
    const save_name = () => {
        on_update({ role_name: name_value });
        set_is_editing_name(false);
    };
    const cancel_name = () => {
        set_name_value(role.role_name);
        set_is_editing_name(false);
    };
    const toggle_control = (control, field) => {
        if (disabled)
            return;
        const current = role.controls[control] ?? { visible: false, enabled: false };
        const updated = {
            ...current,
            [field]: !current[field],
        };
        // If enabling, also make visible
        if (field === 'enabled' && updated.enabled) {
            updated.visible = true;
        }
        on_update({
            controls: {
                ...role.controls,
                [control]: updated,
            },
        });
    };
    return (_jsxs("div", { className: "border rounded-lg overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between p-3 bg-muted/30", children: [_jsx("div", { className: "flex items-center gap-2 flex-1", children: is_editing_name ? (_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx("input", { type: "text", value: name_value, onChange: (e) => set_name_value(e.target.value), className: "flex-1 px-2 py-1 text-sm border rounded bg-background", autoFocus: true, onKeyDown: (e) => {
                                        if (e.key === 'Enter')
                                            save_name();
                                        if (e.key === 'Escape')
                                            cancel_name();
                                    } }), _jsx("button", { onClick: save_name, className: "p-1 text-green-600 hover:bg-green-100 rounded", children: _jsx(HiCheck, { className: "w-4 h-4" }) }), _jsx("button", { onClick: cancel_name, className: "p-1 text-red-600 hover:bg-red-100 rounded", children: _jsx(HiX, { className: "w-4 h-4" }) })] })) : (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: () => set_is_expanded(!is_expanded), className: "flex items-center gap-2", children: [_jsx("svg", { className: cn('w-4 h-4 transition-transform', is_expanded && 'rotate-90'), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }), _jsx("span", { className: "font-medium text-sm", children: role.role_name })] }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", role.role_id, ")"] }), !disabled && (_jsx("button", { onClick: () => set_is_editing_name(true), className: "p-1 text-muted-foreground hover:text-foreground", children: _jsx(HiPencil, { className: "w-3 h-3" }) }))] })) }), !disabled && (_jsx("button", { onClick: on_delete, className: "p-1.5 text-red-500 hover:bg-red-100 rounded", title: "Delete role", children: _jsx(HiTrash, { className: "w-4 h-4" }) }))] }), is_expanded && (_jsxs("div", { className: "p-3 border-t", children: [role.role_description && (_jsx("p", { className: "text-xs text-muted-foreground mb-3", children: role.role_description })), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-xs text-muted-foreground border-b", children: [_jsx("th", { className: "text-left py-2 pr-4", children: "Control" }), _jsx("th", { className: "text-center py-2 px-4", children: "Visible" }), _jsx("th", { className: "text-center py-2 px-4", children: "Enabled" })] }) }), _jsx("tbody", { children: ALL_CONTROL_NAMES.map((control) => {
                                        const behaviour = role.controls[control] ?? { visible: false, enabled: false };
                                        return (_jsxs("tr", { className: "border-b last:border-0", children: [_jsx("td", { className: "py-2 pr-4", children: CONTROL_NAME_LABELS[control] }), _jsx("td", { className: "text-center py-2 px-4", children: _jsx(Switch, { checked: behaviour.visible, onCheckedChange: () => toggle_control(control, 'visible'), disabled: disabled }) }), _jsx("td", { className: "text-center py-2 px-4", children: _jsx(Switch, { checked: behaviour.enabled, onCheckedChange: () => toggle_control(control, 'enabled'), disabled: disabled || !behaviour.visible }) })] }, control));
                                    }) })] }) }), !disabled && (_jsxs("div", { className: "flex gap-2 mt-3 pt-3 border-t", children: [_jsx("button", { onClick: () => {
                                    const all_visible = {};
                                    ALL_CONTROL_NAMES.forEach((c) => {
                                        all_visible[c] = { visible: true, enabled: true };
                                    });
                                    on_update({ controls: all_visible });
                                }, className: "text-xs px-2 py-1 border rounded hover:bg-muted transition-colors", children: "Enable All" }), _jsx("button", { onClick: () => {
                                    const all_hidden = {};
                                    ALL_CONTROL_NAMES.forEach((c) => {
                                        all_hidden[c] = { visible: false, enabled: false };
                                    });
                                    on_update({ controls: all_hidden });
                                }, className: "text-xs px-2 py-1 border rounded hover:bg-muted transition-colors", children: "Hide All" }), _jsx("button", { onClick: () => {
                                    const read_only = {};
                                    ALL_CONTROL_NAMES.forEach((c) => {
                                        read_only[c] = { visible: true, enabled: false };
                                    });
                                    on_update({ controls: read_only });
                                }, className: "text-xs px-2 py-1 border rounded hover:bg-muted transition-colors", children: "Read Only" })] }))] }))] }));
}
//# sourceMappingURL=icons_behaviour_tab.js.map