import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useState } from "react";
import {} from "../utils.js";
import { MailboxTable } from "./mailbox-table.js";
export function ChannelInspector({ remoteName, channel, onBack, onRefresh, }) {
    const [sorts, setSorts] = useState({
        inbox: undefined,
        outbox: undefined,
        deadLetter: undefined,
    });
    const [collapsed, setCollapsed] = useState({
        inbox: false,
        outbox: false,
        deadLetter: false,
    });
    const handleToggleCollapse = (mailbox) => {
        setCollapsed((prev) => ({
            ...prev,
            [mailbox]: !prev[mailbox],
        }));
    };
    const handleSort = (mailbox, columnKey) => {
        setSorts((prev) => {
            const currentSort = prev[mailbox];
            const newDirection = currentSort?.column === columnKey && currentSort.direction === "asc"
                ? "desc"
                : "asc";
            return {
                ...prev,
                [mailbox]: { column: columnKey, direction: newDirection },
            };
        });
    };
    return (_jsxs("div", { className: "flex h-full flex-col gap-4 p-4", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-700 hover:bg-gray-100", onClick: onBack, type: "button", children: [_jsx(Icon, { className: "rotate-90", name: "ChevronDown", size: 14 }), "Back"] }), _jsxs("h2", { className: "text-lg font-semibold text-gray-900", children: ["Channel: ", remoteName] })] }), onRefresh && (_jsxs("button", { className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100", onClick: onRefresh, type: "button", children: [_jsx(Icon, { name: "Reload", size: 14 }), "Refresh"] }))] }), _jsxs("div", { className: "flex flex-1 flex-col gap-6 overflow-auto", children: [_jsx(MailboxTable, { collapsed: collapsed.inbox, mailboxType: "inbox", onSort: handleSort, onToggleCollapse: () => handleToggleCollapse("inbox"), operations: channel.inbox.items, sort: sorts.inbox, title: "Inbox" }), _jsx(MailboxTable, { collapsed: collapsed.outbox, mailboxType: "outbox", onSort: handleSort, onToggleCollapse: () => handleToggleCollapse("outbox"), operations: channel.outbox.items, sort: sorts.outbox, title: "Outbox" }), _jsx(MailboxTable, { collapsed: collapsed.deadLetter, mailboxType: "deadLetter", onSort: handleSort, onToggleCollapse: () => handleToggleCollapse("deadLetter"), operations: channel.deadLetter.items, sort: sorts.deadLetter, title: "Dead Letter" })] })] }));
}
//# sourceMappingURL=channel-inspector.js.map