import { inject, provide } from 'vue';
import type { Component, InjectionKey } from 'vue';
import EmptyState from './EmptyState.vue';
import PageHeader from './PageHeader.vue';
import Panel from './Panel.vue';
import StatusPill from './StatusPill.vue';
import TabNav from './TabNav.vue';

export type ThemeUi = {
    Panel: Component;
    PageHeader: Component;
    TabNav: Component;
    EmptyState: Component;
    StatusPill: Component;
};

const key: InjectionKey<ThemeUi> = Symbol('deskmethod-theme-ui');

export const defaultThemeUi: ThemeUi = {
    Panel,
    PageHeader,
    TabNav,
    EmptyState,
    StatusPill,
};

export function provideThemeUi(overrides: Partial<ThemeUi> = {}): void {
    provide(key, { ...defaultThemeUi, ...overrides });
}

export function useThemeUi(): ThemeUi {
    return inject(key, defaultThemeUi);
}