//
// Copyright 2020 DXOS.org
//
import React, { Suspense } from 'react';
import { Link, Outlet, useLocation } from 'react-router-dom';
import { DeviceKind, useDevices, useIdentity } from '@dxos/react-client/halo';
import { Icon } from '@dxos/react-ui';
import { mx } from '@dxos/ui-theme';
import { ErrorBoundary } from '../components';
import { useSections } from '../hooks';
export const RootContainer = () => {
    const { pathname } = useLocation();
    return (React.createElement("div", { className: 'flex is-full bs-full overflow-hidden' },
        React.createElement(Sidebar, null),
        React.createElement("div", { className: 'flex flex-col grow overflow-hidden' },
            React.createElement(ErrorBoundary, { key: pathname },
                React.createElement(Suspense, null,
                    React.createElement(Outlet, null))))));
};
const Sidebar = () => {
    const { pathname } = useLocation();
    const sections = useSections();
    return (React.createElement("div", { className: 'flex flex-col is-[180px] shrink-0 overflow-hidden overflow-y-auto border-r border-separator' },
        React.createElement("div", { className: 'flex flex-col gap-4 divide-y divide-separator' }, sections.map((section) => (React.createElement("div", { key: section.id },
            React.createElement("div", { className: 'flex text-sm pis-4 plb-1' }, section.title),
            React.createElement("div", null, section.items?.map(({ id, title, icon }) => (React.createElement("div", { key: id, className: mx('flex items-center pis-4 gap-2', id === pathname && 'bg-activeSurface') },
                React.createElement(Icon, { icon: icon, size: 4 }),
                React.createElement(Link, { to: id, className: 'grow' },
                    React.createElement("span", null, title)))))))))),
        React.createElement("div", { className: 'grow' }),
        React.createElement(Footer, null)));
};
const Footer = () => {
    const identity = useIdentity();
    const devices = useDevices();
    const device = devices.find(({ kind }) => kind === DeviceKind.CURRENT);
    return (React.createElement("div", { className: 'flex p-2' },
        React.createElement("div", { className: 'flex flex-col is-full text-sm text-neutral-500' },
            React.createElement("div", { className: 'grid grid-cols-2 gap-2' },
                React.createElement("div", { className: 'text-neutral-300 text-right' }, "Identity"),
                React.createElement("div", { className: 'font-mono' }, identity?.identityKey.truncate())),
            React.createElement("div", { className: 'grid grid-cols-2 gap-2' },
                React.createElement("div", { className: 'text-neutral-300 text-right' }, "Device"),
                React.createElement("div", { className: 'font-mono' }, device?.deviceKey.truncate())),
            React.createElement("div", { className: 'grid grid-cols-2 gap-2' },
                React.createElement("div", { className: 'text-neutral-300 text-right' }, "Version"),
                React.createElement("div", { className: 'font-mono' }, process.env.PACKAGE_VERSION ?? 'DEV')))));
};
//# sourceMappingURL=RootContainer.js.map