import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getSettings } from '@/api/configuration'

export interface AppSetting {
  id?: number
  key?: string | number
  title_fa?: string
  value?: string | number
  description?: string
  is_active?: boolean
  type?: string
}

export const useSettingsStore = defineStore('settings', () => {
  const settings = ref<AppSetting[]>([])
  const loaded = ref(false)
  let fetchPromise: Promise<AppSetting[]> | null = null

  function getSettingByKey(key: string) {
    const item = settings.value.find((setting) => setting?.key === key)
    return item?.value ?? null
  }

  function mergeSettings(items?: AppSetting[] | null) {
    if (!items?.length) {
      return
    }

    const merged = [...settings.value]
    items.forEach((item) => {
      if (!item?.key) {
        return
      }

      const index = merged.findIndex((setting) => setting.key === item.key)
      if (index >= 0) {
        merged[index] = { ...merged[index], ...item }
      } else {
        merged.push(item)
      }
    })

    settings.value = merged
  }

  async function fetchSettings(force = false) {
    if (!force && fetchPromise) {
      return fetchPromise
    }

    fetchPromise = (async () => {
      try {
        const data = await getSettings()
        if (Array.isArray(data)) {
          mergeSettings(data)
        }
      } catch (error) {
        console.log(error)
      } finally {
        loaded.value = true
      }

      return settings.value
    })()

    return fetchPromise
  }

  return {
    settings,
    loaded,
    fetchSettings,
    mergeSettings,
    getSettingByKey,
  }
})