import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getTenantIdFromProject } from "@vertesia/common";
import { VTabs, VTabsBar, VTabsPanel, VTooltip } from "@vertesia/ui/core";
import { Env } from "@vertesia/ui/env";
import { useUserSession } from "@vertesia/ui/session";
import { Check, CopyIcon } from "lucide-react";
import { useState } from "react";
export function InfoItems({ title, value }) {
    function copyToClipboard(value) {
        navigator.clipboard.writeText(value);
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 2000);
    }
    const [isCopied, setIsCopied] = useState(false);
    return (_jsxs("div", { className: "w-full flex justify-between items-center mb-1", children: [_jsxs("div", { className: "flex flex-col w-[calc(100%-3rem)]", children: [_jsx("div", { className: 'text-sm px-2 dark:text-slate-200', children: title }), _jsx(VTooltip, { description: value, size: "xs", placement: "left", children: _jsxs("div", { className: 'text-xs truncate text-muted w-full text-left px-2', children: [value, " "] }) })] }), isCopied ?
                _jsx(Check, { className: "size-4 cursor-pointer text-success" })
                :
                    _jsx(CopyIcon, { className: "size-4 cursor-pointer text-gray-400 dark:text-slate-400", onClick: () => copyToClipboard(value) })] }));
}
export default function InfoList() {
    const session = useUserSession();
    const { account, project, client, authToken } = session;
    const server = new URL(client.baseUrl).hostname;
    const store = new URL(client.store.baseUrl).hostname;
    const tenantId = project ? getTenantIdFromProject(project) : '';
    const tabs = [
        {
            name: 'user',
            label: 'User',
            content: _jsxs("div", { className: "space-y-1 p-2", children: [_jsx(InfoItems, { title: "Organization ID", value: account?.id ?? 'Unknown' }), _jsx(InfoItems, { title: "Project ID", value: project?.id ?? 'Unknown' }), _jsx(InfoItems, { title: "User ID", value: authToken?.sub ?? 'Unknown' }), _jsx(InfoItems, { title: "Organization Roles", value: authToken?.account_roles?.join(',') ?? 'Unknown' }), _jsx(InfoItems, { title: "Project Roles", value: authToken?.project_roles?.join(',') ?? 'Unknown' })] })
        },
        {
            name: 'environment',
            label: 'Environment',
            content: _jsxs("div", { className: "space-y-1 p-2", children: [_jsx(InfoItems, { title: "Tenant ID", value: tenantId }), _jsx(InfoItems, { title: "Environment", value: Env.type }), _jsx(InfoItems, { title: "Server", value: server }), _jsx(InfoItems, { title: "Store", value: store }), _jsx(InfoItems, { title: "App Version", value: Env.version })] })
        }
    ];
    return (_jsx("div", { className: "w-full", children: _jsxs(VTabs, { defaultValue: "user", tabs: tabs, fullWidth: true, updateHash: false, children: [_jsx(VTabsBar, {}), _jsx(VTabsPanel, {})] }) }));
}
//# sourceMappingURL=UserInfo.js.map