"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HomeView = HomeView;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ink_1 = require("ink");
const ink_text_input_1 = tslib_1.__importDefault(require("ink-text-input"));
const TrelloContext_1 = require("../state/TrelloContext");
const NavigationContext_1 = require("../state/NavigationContext");
const ink_spinner_1 = tslib_1.__importDefault(require("ink-spinner"));
function HomeView() {
    const { state: trelloState, loadBoards, loadBoard, syncCache } = (0, TrelloContext_1.useTrello)();
    const { state: navState, dispatch, config } = (0, NavigationContext_1.useNavigation)();
    const { exit } = (0, ink_1.useApp)();
    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
    const [filterText, setFilterText] = (0, react_1.useState)("");
    (0, react_1.useEffect)(() => {
        loadBoards();
    }, [loadBoards]);
    const boards = trelloState.boards;
    const filteredBoards = (0, react_1.useMemo)(() => {
        if (!filterText.trim())
            return boards;
        const lower = filterText.toLowerCase();
        return boards.filter((b) => b.name.toLowerCase().includes(lower));
    }, [boards, filterText]);
    // Keep selected index within bounds when filter changes
    (0, react_1.useEffect)(() => {
        if (selectedIndex >= filteredBoards.length) {
            setSelectedIndex(Math.max(0, filteredBoards.length - 1));
        }
    }, [filteredBoards.length, selectedIndex]);
    (0, ink_1.useInput)((input, key) => {
        if (navState.mode !== "normal")
            return;
        if (key.escape) {
            if (filterText) {
                setFilterText("");
                setSelectedIndex(0);
            }
            else {
                exit();
            }
            return;
        }
        if (input === "q" && !filterText) {
            exit();
            return;
        }
        if (input === "s" && !filterText) {
            syncCache().then(() => loadBoards());
            return;
        }
        if (input === "m" && !filterText) {
            dispatch({ type: "SET_VIEW", view: "my-cards" });
            return;
        }
        if (key.upArrow) {
            setSelectedIndex((prev) => Math.max(0, prev - 1));
            return;
        }
        if (key.downArrow) {
            setSelectedIndex((prev) => Math.min(filteredBoards.length - 1, prev + 1));
            return;
        }
        if (key.return && filteredBoards.length > 0) {
            const board = filteredBoards[selectedIndex];
            if (board) {
                loadBoard(board);
                dispatch({ type: "SET_VIEW", view: "board" });
                setFilterText("");
            }
            return;
        }
    });
    if (trelloState.loading && boards.length === 0) {
        return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: config.theme.primary, children: (0, jsx_runtime_1.jsx)(ink_spinner_1.default, { type: "dots" }) }), " ", "Loading boards..."] }) }));
    }
    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", paddingX: 1, children: [(0, jsx_runtime_1.jsxs)(ink_1.Box, { marginBottom: 1, paddingX: 1, children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { bold: true, color: config.theme.primary, children: "Your Boards" }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { color: config.theme.muted, children: [" ", "(", filteredBoards.length, filterText ? ` of ${boards.length}` : "", " boards)"] })] }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { paddingX: 1, marginBottom: 1, children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: config.theme.primary, bold: true, children: "Filter: " }), (0, jsx_runtime_1.jsx)(ink_text_input_1.default, { value: filterText, onChange: (val) => {
                            setFilterText(val);
                            setSelectedIndex(0);
                        }, onSubmit: () => {
                            if (filteredBoards.length > 0) {
                                const board = filteredBoards[selectedIndex];
                                if (board) {
                                    loadBoard(board);
                                    dispatch({ type: "SET_VIEW", view: "board" });
                                    setFilterText("");
                                }
                            }
                        } })] }), filteredBoards.length === 0 ? ((0, jsx_runtime_1.jsx)(ink_1.Box, { paddingX: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { color: config.theme.muted, children: filterText ? "No boards match your filter." : "No boards found. Press [s] to sync your data." }) })) : (filteredBoards.map((board, index) => ((0, jsx_runtime_1.jsxs)(ink_1.Box, { paddingX: 1, children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { color: index === selectedIndex ? config.theme.primary : undefined, bold: index === selectedIndex, children: [index === selectedIndex ? "> " : "  ", board.name] }), board.desc ? ((0, jsx_runtime_1.jsxs)(ink_1.Text, { color: config.theme.muted, children: [" ", "- ", truncate(board.desc, 50)] })) : null] }, board.id))))] }));
}
function truncate(str, maxLen) {
    if (str.length <= maxLen)
        return str;
    return str.slice(0, maxLen - 3) + "...";
}
