import { Container, SelectList, SettingsList, Spacer, Text } from "@earendil-works/pi-tui";
import { getSelectListTheme, getSettingsListTheme, parseAutoThemeSetting, theme, } from "../theme/theme.js";
const SETTINGS_SUBMENU_SELECT_LIST_LAYOUT = {
    minPrimaryColumnWidth: 12,
    maxPrimaryColumnWidth: 32,
};
const AUTOMATIC_THEME_VALUE = "/";
/**
 * A submenu component for selecting from a list of options.
 */
export class WarningSettingsSubmenu extends Container {
    constructor(warnings, onChange, onCancel) {
        super();
        this.state = { ...warnings };
        const items = [
            {
                id: "anthropic-extra-usage",
                label: "Anthropic extra usage",
                description: "Warn when Anthropic subscription auth may use paid extra usage",
                currentValue: (this.state.anthropicExtraUsage ?? true) ? "true" : "false",
                values: ["true", "false"],
            },
        ];
        this.settingsList = new SettingsList(items, Math.min(items.length, 10), getSettingsListTheme(), (id, newValue) => {
            switch (id) {
                case "anthropic-extra-usage":
                    this.state = { ...this.state, anthropicExtraUsage: newValue === "true" };
                    onChange({ ...this.state });
                    break;
            }
        }, onCancel);
        this.addChild(this.settingsList);
    }
    handleInput(data) {
        this.settingsList.handleInput(data);
    }
}
export class SelectSubmenu extends Container {
    constructor(title, description, options, currentValue, onSelect, onCancel, onSelectionChange) {
        super();
        this.addChild(new Text(theme.bold(theme.fg("accent", title)), 0, 0));
        if (description) {
            this.addChild(new Spacer(1));
            this.addChild(new Text(theme.fg("muted", description), 0, 0));
        }
        this.addChild(new Spacer(1));
        this.selectList = new SelectList(options, Math.min(options.length, 10), getSelectListTheme(), SETTINGS_SUBMENU_SELECT_LIST_LAYOUT);
        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);
        this.addChild(new Spacer(1));
        this.addChild(new Text(theme.fg("dim", "  enter select · esc back"), 0, 0));
    }
    handleInput(data) {
        this.selectList.handleInput(data);
    }
}
export function themeItems(availableThemes) {
    return availableThemes.map((name) => ({ value: name, label: name }));
}
function singleModeThemeItems(availableThemes) {
    return [
        {
            value: AUTOMATIC_THEME_VALUE,
            label: "Automatic",
            description: "Use separate themes for light and dark terminal appearance",
        },
        ...themeItems(availableThemes),
    ];
}
function preferredTheme(availableThemes, preferred, fallback) {
    if (preferred && availableThemes.includes(preferred))
        return preferred;
    if (availableThemes.includes(fallback))
        return fallback;
    return availableThemes[0] ?? fallback;
}
function defaultAutomaticThemes(currentThemeSetting, availableThemes) {
    const autoTheme = parseAutoThemeSetting(currentThemeSetting);
    if (autoTheme)
        return autoTheme;
    const currentFixedTheme = currentThemeSetting.includes("/") ? undefined : currentThemeSetting;
    const themeName = preferredTheme(availableThemes, currentFixedTheme, "dark");
    return { lightTheme: themeName, darkTheme: themeName };
}
export class ThemeSubmenu extends Container {
    constructor(currentThemeSetting, terminalTheme, availableThemes, callbacks, onDone) {
        super();
        this.callbacks = callbacks;
        this.availableThemes = availableThemes;
        this.terminalTheme = terminalTheme;
        this.onDone = onDone;
        this.originalThemeSetting = currentThemeSetting;
        const autoTheme = parseAutoThemeSetting(currentThemeSetting);
        const automaticThemes = defaultAutomaticThemes(currentThemeSetting, availableThemes);
        const fixedTheme = autoTheme || currentThemeSetting.includes("/") ? undefined : currentThemeSetting;
        this.mode = autoTheme ? "automatic" : "single";
        this.lightTheme = automaticThemes.lightTheme;
        this.darkTheme = automaticThemes.darkTheme;
        this.singleTheme = preferredTheme(availableThemes, fixedTheme ?? (autoTheme ? this.getActiveAutomaticTheme() : undefined), "dark");
        if (this.mode === "automatic") {
            this.showAutomaticMenu();
        }
        else {
            this.showSingleMenu();
        }
    }
    handleInput(data) {
        this.inputComponent?.handleInput?.(data);
    }
    setContent(renderComponent, inputComponent = renderComponent) {
        this.clear();
        this.addChild(renderComponent);
        this.inputComponent = inputComponent;
    }
    showSingleMenu() {
        this.mode = "single";
        const menu = new SelectSubmenu("Theme", "Select a theme, or choose Automatic to follow terminal appearance.", singleModeThemeItems(this.availableThemes), this.singleTheme, (value) => {
            if (value === AUTOMATIC_THEME_VALUE) {
                this.mode = "automatic";
                this.callbacks.onThemePreview?.(this.getThemeSetting());
                this.showAutomaticMenu();
                return;
            }
            this.singleTheme = value;
            this.apply(value);
        }, () => this.cancel(), (value) => {
            this.callbacks.onThemePreview?.(value === AUTOMATIC_THEME_VALUE ? this.getAutomaticThemeSetting() : value);
        });
        this.setContent(menu);
    }
    showAutomaticMenu() {
        this.mode = "automatic";
        const content = new Container();
        content.addChild(new Text(theme.bold(theme.fg("accent", "Automatic Theme")), 0, 0));
        content.addChild(new Spacer(1));
        content.addChild(new Text(theme.fg("muted", "Choose themes for terminal light and dark appearance."), 0, 0));
        content.addChild(new Text(theme.fg("muted", "Light/dark detection requires terminal support."), 0, 0));
        content.addChild(new Spacer(1));
        const items = [
            {
                id: "light-theme",
                label: "Light theme",
                description: "Theme to use in automatic mode when the terminal is light",
                currentValue: this.lightTheme,
                submenu: (currentValue, done) => this.createThemeSelect("Light Theme", "Select the theme to use for light terminal appearance", currentValue, done, (value) => {
                    this.lightTheme = value;
                    this.callbacks.onThemePreview?.(this.getThemeSetting());
                    done(value);
                }),
            },
            {
                id: "dark-theme",
                label: "Dark theme",
                description: "Theme to use in automatic mode when the terminal is dark",
                currentValue: this.darkTheme,
                submenu: (currentValue, done) => this.createThemeSelect("Dark Theme", "Select the theme to use for dark terminal appearance", currentValue, done, (value) => {
                    this.darkTheme = value;
                    this.callbacks.onThemePreview?.(this.getThemeSetting());
                    done(value);
                }),
            },
            {
                id: "apply",
                label: "Apply",
                description: "Save and go back",
                currentValue: "save and go back",
                values: ["save and go back"],
            },
            {
                id: "single-mode",
                label: "Change mode",
                description: "Switch to one theme for light and dark",
                currentValue: "switch to single theme",
                values: ["switch to single theme"],
            },
        ];
        const settingsList = new SettingsList(items, Math.min(items.length, 10), getSettingsListTheme(), (id) => {
            switch (id) {
                case "single-mode":
                    this.mode = "single";
                    this.singleTheme = this.getActiveAutomaticTheme();
                    this.callbacks.onThemePreview?.(this.singleTheme);
                    this.showSingleMenu();
                    break;
                case "apply":
                    this.apply(this.getAutomaticThemeSetting());
                    break;
            }
        }, () => this.cancel());
        content.addChild(settingsList);
        this.setContent(content, settingsList);
    }
    createThemeSelect(title, description, currentValue, done, onSelect) {
        return new SelectSubmenu(title, description, themeItems(this.availableThemes), currentValue, onSelect, () => {
            this.callbacks.onThemePreview?.(this.getThemeSetting());
            done();
        }, (value) => this.callbacks.onThemePreview?.(value));
    }
    getThemeSetting() {
        return this.mode === "automatic" ? this.getAutomaticThemeSetting() : this.singleTheme;
    }
    getActiveAutomaticTheme() {
        return this.terminalTheme === "light" ? this.lightTheme : this.darkTheme;
    }
    getAutomaticThemeSetting() {
        return `${this.lightTheme}/${this.darkTheme}`;
    }
    apply(themeSetting) {
        this.onDone(themeSetting);
    }
    cancel() {
        this.callbacks.onThemePreview?.(this.originalThemeSetting);
        this.onDone();
    }
}
//# sourceMappingURL=settings-selector-submenus.js.map