import { useMemo } from 'react';
import { Rocket, List } from 'lucide-react';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceLayout } from 'officerdev';

import { createSettingsPanelComponents, type SettingsSection } from '../SettingsPanel';
import { AppsList } from './AppsList';

const GLOBAL_KEY = 'APPS_SETTINGS_SELECTED';

const sections: SettingsSection[] = [
  { key: 'published-apps', icon: List, title: 'Published Apps', description: 'View and manage your published apps', content: <AppsList /> },
];

const { Sidebar, Content } = createSettingsPanelComponents({
  globalKey: GLOBAL_KEY,
  sidebarIcon: Rocket,
  sidebarLabel: 'Apps',
  sections,
});

const layout: LayoutNode = {
  type: 'group',
  id: 'apps-settings-root',
  direction: 'horizontal',
  children: [
    { node: { type: 'panel', id: 'apps-settings-left', appType: null }, size: 20 },
    { node: { type: 'panel', id: 'apps-settings-right', appType: null }, size: 80 },
  ],
};

export const AppsSettings = () => {
  const panelComponents: PanelComponents = useMemo(
    () => ({
      'apps-settings-left': Sidebar,
      'apps-settings-right': Content,
    }),
    [],
  );

  return (
    <div className="h-full w-full pt-2">
      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
    </div>
  );
};
