import { ChatPanel } from './chat-app.js';
import { FilesPanel } from './files-app.js';
import { VideoApp } from './video-app.js';
import { MusicApp } from './music-app.js';
import { PhotosApp } from './photos-app.js';

/**
 * Every group "application", in tab order.
 *
 * Adding one (Videos, Music, Photos — none of them need an MNP change, see
 * the node's indexer classifying video/audio/image already) means a new file
 * exporting a component and one entry here. Nothing in group-page.js changes:
 * every registered component receives the same shared context (see its
 * `commonProps`) and renders itself into the active tab.
 *
 * `key` doubles as the identifier the node's `apps_enabled` setting uses, so
 * it must match `ALLOWED_APPS` in the node's webrtc_server.py.
 */
const APPS = [
  { key: 'chat', icon: 'chat', labelKey: 'group.tab_chat', Component: ChatPanel },
  { key: 'files', icon: 'folder', labelKey: 'group.tab_files', Component: FilesPanel },
  { key: 'video', icon: 'video', labelKey: 'group.tab_video', Component: VideoApp },
  { key: 'music', icon: 'music', labelKey: 'group.tab_music', Component: MusicApp },
  { key: 'photo', icon: 'image', labelKey: 'group.tab_photos', Component: PhotosApp },
];

/** The registry filtered to what this group has enabled, in registry order. */
function visibleApps(enabledKeys) {
  const enabled = new Set(
    enabledKeys && enabledKeys.length ? enabledKeys : APPS.map(a => a.key));
  return APPS.filter(a => enabled.has(a.key));
}

export { APPS, visibleApps };