import {
  defineComponent, inject, PropType, provide, renderSlot, Component,
  computed, type ComputedRef,
} from 'vue';
import { RACE_KEY } from './consts';

const injectKey = 'wc3ui-config';

type InternalAPI = {
  readonly theme: ComputedRef<RACE_KEY>
}

type IConfigAPI = {
  theme: ComputedRef<RACE_KEY>
}

export type WidgetsList = Record<string, Component>;

export default defineComponent({
  props: {
    theme: {
      type: String as PropType<RACE_KEY>,
      default: RACE_KEY.HUMAN,
    },
  },
  setup(props, ctx) {
    // Use computed so theme stays reactive when prop changes
    const theme = computed(() => props.theme);

    const api: InternalAPI = { theme };
    provide(injectKey, api);

    return () => renderSlot(ctx.slots, 'default');
  },
});

export function useConfig(): IConfigAPI {
  const config = inject(injectKey) as InternalAPI | undefined;

  return {
    // Return a computed ref so consumers can track reactivity with .value
    theme: computed(() => config?.theme.value ?? RACE_KEY.HUMAN),
  };
}