import { computed, inject, onMounted, provide, type InjectionKey, type ComputedRef } from 'vue'
import { getConfig } from '@/config/app-config'
import { useSettingsStore } from '@/store/settingsStore'
import {
  getAboutSettingText,
  resolveAboutSections,
  type AboutSection,
} from '../aboutContent'

export interface AboutPageContext {
  projectName: ComputedRef<string>
  aboutSections: ComputedRef<AboutSection[]>
}

export const ABOUT_PAGE_CONTEXT_KEY: InjectionKey<AboutPageContext> = Symbol('aboutPageContext')

export function useAboutPage() {
  const settingsStore = useSettingsStore()
  const projectName = computed(() => getConfig('name_fa', 'کشکول گلد'))

  const aboutSections = computed(() => {
    void settingsStore.settings
    const fromSettings = getAboutSettingText((key) => settingsStore.getSettingByKey(key))
    return resolveAboutSections(projectName.value, fromSettings)
  })

  onMounted(() => {
    void settingsStore.fetchSettings()
  })

  const context: AboutPageContext = { projectName, aboutSections }
  provide(ABOUT_PAGE_CONTEXT_KEY, context)
  return context
}

export function useAboutPageContext() {
  const context = inject(ABOUT_PAGE_CONTEXT_KEY)
  if (!context) throw new Error('useAboutPageContext must be used within useAboutPage')
  return context
}