/**
 * TUI settings panel — toggles and submenus for user preferences.
 *
 * Renders a bordered SettingsList with items for auto-approve, images, theme,
 * telemetry, etc. Theme selection uses a nested SelectSubmenu with live preview.
 */
import { APPROVAL_MODE } from '../../../app/settings-manager.js';
import { Container, getCapabilities, SelectList, SettingsList, Spacer, Text } from '../../../tui/index.js';
import { theme } from '../../theme/runtime.js';
import { getSelectListTheme, getSettingsListTheme } from '../../theme/theme.js';
import { DynamicBorder } from '../primitives/dynamic-border.js';
/**
 * A submenu component for selecting from a list of options.
 */
class SelectSubmenu extends Container {
    selectList;
    constructor(title, description, options, currentValue, onSelect, onCancel, onSelectionChange) {
        super();
        // Title
        this.addChild(new Text(theme.bold(theme.fg('accent', title)), 0, 0));
        // Description
        if (description) {
            this.addChild(new Spacer(1));
            this.addChild(new Text(theme.fg('muted', description), 0, 0));
        }
        // Spacer
        this.addChild(new Spacer(1));
        // Select list
        this.selectList = new SelectList(options, Math.min(options.length, 10), getSelectListTheme());
        // Pre-select current value
        const currentIndex = options.findIndex((o) => o.value === currentValue);
        if (currentIndex !== -1) {
            this.selectList.setSelectedIndex(currentIndex);
        }
        this.selectList.onSelect = (item) => {
            onSelect(item.value);
        };
        this.selectList.onCancel = onCancel;
        if (onSelectionChange) {
            this.selectList.onSelectionChange = (item) => {
                onSelectionChange(item.value);
            };
        }
        this.addChild(this.selectList);
        // Hint
        this.addChild(new Spacer(1));
        this.addChild(new Text(theme.fg('dim', '  Enter to select · Esc to go back'), 0, 0));
    }
    handleInput(data) {
        this.selectList.handleInput(data);
    }
}
/**
 * Main settings selector component.
 */
export class SettingsSelectorComponent extends Container {
    settingsList;
    constructor(config, callbacks) {
        super();
        const supportsImages = getCapabilities().images;
        const items = [
            {
                id: 'auto-approve',
                label: 'Spreadsheet approvals',
                description: 'Whether spreadsheet changes require confirmation',
                currentValue: config.autoApprove ? APPROVAL_MODE.AUTO : APPROVAL_MODE.ASK,
                values: [APPROVAL_MODE.ASK, APPROVAL_MODE.AUTO]
            },
            {
                id: 'collapse-changelog',
                label: 'Collapse changelog',
                description: 'Show condensed changelog after updates',
                currentValue: config.collapseChangelog ? 'true' : 'false',
                values: ['true', 'false']
            },
            {
                id: 'quiet-startup',
                label: 'Quiet startup',
                description: 'Disable verbose printing at startup',
                currentValue: config.quietStartup ? 'true' : 'false',
                values: ['true', 'false']
            },
            {
                id: 'telemetry',
                label: 'Upload conversation data',
                description: 'Upload conversation data',
                currentValue: config.telemetry ? 'true' : 'false',
                values: ['true', 'false']
            },
            {
                id: 'show-cache-tokens',
                label: 'Show cache tokens',
                description: 'Show cache read/write tokens (R/W) in footer',
                currentValue: config.showCacheTokens ? 'true' : 'false',
                values: ['true', 'false']
            },
            {
                id: 'tool-summaries',
                label: 'Tool summaries',
                description: 'Show delayed one-line summaries for supported tools',
                currentValue: config.toolSummaries ? 'true' : 'false',
                values: ['true', 'false']
            },
            {
                id: 'durable-memory',
                label: 'Durable memory',
                description: 'Enable the background durable-memory agent',
                currentValue: config.durableMemory ? 'true' : 'false',
                values: ['true', 'false']
            },
            {
                id: 'theme',
                label: 'Theme',
                description: 'Color theme for the interface',
                currentValue: config.currentTheme,
                submenu: (currentValue, done) => new SelectSubmenu('Theme', 'Select color theme', config.availableThemes.map((t) => ({
                    value: t,
                    label: t
                })), currentValue, (value) => {
                    callbacks.onThemeChange(value);
                    done(value);
                }, () => {
                    // Restore original theme on cancel
                    callbacks.onThemePreview?.(currentValue);
                    done();
                }, (value) => {
                    // Preview theme on selection change
                    callbacks.onThemePreview?.(value);
                })
            }
        ];
        // Only show image toggle if terminal supports it
        if (supportsImages) {
            // Insert after steering-mode
            items.splice(1, 0, {
                id: 'show-images',
                label: 'Show images',
                description: 'Render images inline in terminal',
                currentValue: config.showImages ? 'true' : 'false',
                values: ['true', 'false']
            });
        }
        // Add borders
        this.addChild(new DynamicBorder());
        this.settingsList = new SettingsList(items, 10, getSettingsListTheme(), (id, newValue) => {
            switch (id) {
                case 'auto-approve':
                    callbacks.onAutoApproveChange(newValue === APPROVAL_MODE.AUTO);
                    break;
                case 'show-images':
                    callbacks.onShowImagesChange(newValue === 'true');
                    break;
                case 'collapse-changelog':
                    callbacks.onCollapseChangelogChange(newValue === 'true');
                    break;
                case 'quiet-startup':
                    callbacks.onQuietStartupChange(newValue === 'true');
                    break;
                case 'telemetry':
                    callbacks.onTelemetryChange(newValue === 'true');
                    break;
                case 'show-cache-tokens':
                    callbacks.onShowCacheTokensChange(newValue === 'true');
                    break;
                case 'tool-summaries':
                    callbacks.onToolSummariesChange(newValue === 'true');
                    break;
                case 'durable-memory':
                    callbacks.onDurableMemoryChange(newValue === 'true');
                    break;
            }
        }, callbacks.onCancel, { enableSearch: true });
        this.addChild(this.settingsList);
        this.addChild(new DynamicBorder());
    }
    getSettingsList() {
        return this.settingsList;
    }
}
//# sourceMappingURL=settings-selector.js.map