import { debounce } from 'lodash';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { STATUS_CODES } from 'vj/constant/record';
import { AutoloadPage } from 'vj/misc/Page';
import {
api, gql, i18n, request,
} from 'vj/utils';
export default new AutoloadPage('omnibar', () => {
if (document.documentElement.dataset.layout !== 'basic') return;
const $search = $(`
`);
const $entry = $(`
`);
$(document.body).append($search);
$(document.body).append($entry);
const $input = $('.omnibar input') as JQuery;
const prefix = window.location.pathname.startsWith('/d/') ? `/d/${UiContext.domainId}` : '';
let setSearching;
let pdocs = [];
let psdict = {};
let udocs = [];
function SearchResult() {
const [searching, set] = React.useState(false);
setSearching = set;
return (
<>
{searching && Searching...
}
{pdocs.length > 0 && {i18n('Problems')}
}
{pdocs.map((i) => ({ ...i, base: i.domainId !== UiContext.domainId ? `/d/${i.domainId}` : prefix })).map(({
domainId, docId, pid, title, nSubmit, nAccept, base,
}) => (
{domainId !== UiContext.domainId ? `${domainId}#` : ''}{pid || docId}
{nAccept}/{nSubmit}
))}
{udocs.length > 0 && {i18n('Users')}
}
{udocs.map(({
_id, uname, avatarUrl,
}) => (
))}
>
);
}
ReactDOM.createRoot(document.getElementById('omnibar-content')!).render();
async function search(query: string) {
if (!query?.trim()) {
pdocs = [];
setSearching?.(false);
return;
}
setSearching?.(true);
[{ pdocs, psdict }, udocs] = await Promise.all([
request.get(`/d/${UiContext.domainId}/p`, { q: query, limit: 10 }),
api(gql`
users(search: ${query}) {
_id
uname
displayName
avatarUrl
}
`, ['data', 'users']),
]);
setSearching?.(false);
}
$input.on('input', debounce((ev) => search(ev.target.value), 1000));
let open = false;
const show = () => {
$search.show();
setTimeout(() => {
$search.css('opacity', '1');
$input.focus();
}, 20);
open = true;
};
const hide = () => {
$search.css('opacity', '0');
setTimeout(() => $search.hide(), 200);
open = false;
};
$entry.on('click', () => (open ? hide() : show()));
$input.on('click', (ev) => ev.stopPropagation());
$('.omnibar-main').on('click', '.omnibar-content-section', (ev) => ev.stopPropagation());
$search.on('click', hide);
});