import { SelectList, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
const REWIND_PICKER_MAX_VISIBLE = 8;
const SELECT_LIST_LAYOUT = {
    minPrimaryColumnWidth: 12,
    maxPrimaryColumnWidth: 32,
    truncatePrimary: ({ text, maxWidth }) => truncateToWidth(text, maxWidth, "…"),
};
export class RewindPickerComponent {
    theme;
    items;
    list;
    onSelect;
    onCancel;
    constructor(theme, items) {
        this.theme = theme;
        this.items = items;
        this.list = this.createSelectList(items);
    }
    setTheme(theme) {
        const selected = this.list.getSelectedItem();
        this.theme = theme;
        this.list = this.createSelectList(this.items);
        if (selected) {
            const index = this.items.findIndex((item) => item.id === selected.value);
            if (index >= 0) {
                this.list.setSelectedIndex(index);
            }
        }
    }
    invalidate() {
        this.list.invalidate();
    }
    render(width) {
        if (width <= 1) {
            return [this.borderColor()("─").repeat(Math.max(0, width))];
        }
        const innerWidth = Math.max(0, width - 2);
        const header = this.renderHeaderLine(width, innerWidth);
        const footer = this.renderFooterLine(innerWidth);
        const vertical = this.borderColor()("│");
        const listLines = this.list
            .render(innerWidth)
            .map((line) => `${vertical}${this.pad(line, innerWidth)}${vertical}`);
        return [header, ...listLines, footer];
    }
    handleInput(data) {
        this.list.handleInput(data);
    }
    createSelectList(items) {
        const selectItems = items.map((item) => ({
            value: item.id,
            label: item.label,
            description: item.description,
        }));
        const list = new SelectList(selectItems, REWIND_PICKER_MAX_VISIBLE, this.theme.editorTheme.selectList, SELECT_LIST_LAYOUT);
        list.setSelectedIndex(Math.max(0, selectItems.length - 1));
        list.onSelect = (item) => this.onSelect?.(item.value);
        list.onCancel = () => this.onCancel?.();
        return list;
    }
    borderColor() {
        return this.theme.editorBorderForReasoning("none");
    }
    renderHeaderLine(width, innerWidth) {
        const borderColor = this.borderColor();
        if (width === 2) {
            return `${borderColor("╭")}${borderColor("╮")}`;
        }
        const leftCorner = borderColor("╭");
        const rightCorner = borderColor("╮");
        const dash = borderColor("─");
        const label = this.theme.palette.textDim(" rewind ");
        if (innerWidth <= 0 || innerWidth < visibleWidth(label)) {
            return `${leftCorner}${dash.repeat(innerWidth)}${rightCorner}`;
        }
        const fillWidth = Math.max(0, innerWidth - visibleWidth(label));
        return `${leftCorner}${label}${dash.repeat(fillWidth)}${rightCorner}`;
    }
    renderFooterLine(innerWidth) {
        const borderColor = this.borderColor();
        return `${borderColor("╰")}${borderColor("─").repeat(innerWidth)}${borderColor("╯")}`;
    }
    pad(text, width) {
        const padding = Math.max(0, width - visibleWidth(text));
        return `${text}${" ".repeat(padding)}`;
    }
}
//# sourceMappingURL=rewind_picker.js.map