// Generated, do not edit. sha256:8af265c01fc0e6317d5563eb76a9a712b80e1831a203564f5447704bbed5c878
import { t } from '../i18n/index.js';
import { getPref, setPref } from '../data/preferences.js';
import { EVENTS_PAGE, targetHash } from '../../shared/config.js';
import { create as createTabs } from '../ui/tabs.js';
import { attentionForRoute, attentionDotHtml } from '../ui/attention.js';
import { clearPageHint } from '../ui/page-hint.js';
import * as accounts from './event-accounts.js';
import * as valuations from './valuations.js';
import * as trades from './trades.js';
import * as transfers from './transfers.js';
import * as interest from './interest.js';
import * as reservations from './reservations.js';

export const title = () => t('nav.events');

const ROUTE = EVENTS_PAGE.ROUTE;
const TABS = EVENTS_PAGE.TABS;
const TAB_IDS = Object.values(TABS);
const PREF_SCOPE = ROUTE;

const RENDER = {
  [TABS.ACCOUNTS]:   (panel) => accounts.render(panel),
  [TABS.VALUATIONS]: (panel) => valuations.render(panel),
  [TABS.TRADES]:     (panel) => trades.render(panel),
  [TABS.TRANSFERS]:  (panel) => transfers.render(panel),
  [TABS.INTEREST]:   (panel) => interest.render(panel),
  [TABS.RESERVATIONS]: (panel) => reservations.render(panel),
};

const parseHash = () => (location.hash || '').replace(/^#\/?/, '').split('/')[1] || null;
const hashFor = tab => targetHash({ route: ROUTE, tab });

function tabDot(tabId) {
  return attentionDotHtml(attentionForRoute(ROUTE).filter(a => (a.tab || '').split('/')[0] === tabId));
}

export async function render(el) {
  let tab = parseHash();
  if (!TAB_IDS.includes(tab)) {
    const att = attentionForRoute(ROUTE).find(a => TAB_IDS.includes((a.tab || '').split('/')[0]));
    tab = att ? att.tab.split('/')[0] : await getPref(PREF_SCOPE, 'tab', TABS.ACCOUNTS);
    if (!TAB_IDS.includes(tab)) tab = TABS.ACCOUNTS;
    history.replaceState(null, '', hashFor(tab));
  }

  el.innerHTML = '<div data-tabs></div>';
  createTabs(el.querySelector('[data-tabs]'), {
    size: 'lg',
    active: tab,
    items: TAB_IDS.map(id => ({ id, label: t(`nav.${id}`), dot: () => tabDot(id) })),
    render: (id, panel) => { clearPageHint(); return RENDER[id](panel); },
    onChange: (id) => {
      setPref(PREF_SCOPE, 'tab', id).catch(() => { });
      if (location.hash !== hashFor(id)) history.pushState(null, '', hashFor(id));
    },
    syncOn: ['attention-changed'],
  });
}