import { defineStore } from 'pinia'
import { ref, type Ref } from 'vue'

export interface FontOption {
  title: string
  value: string
}

export const useFontStore = defineStore('font', {
  state: () => ({
    loadedFonts: ref<FontOption[]>([]),
    fontStyles: ref<string>('')
  }),
  getters: {
    getLoadedFonts(): FontOption[] {
      return this.loadedFonts?.value || []
    }
  },
  actions: {
    setLoadedFonts(fonts: FontOption[]) {
      this.loadedFonts.value = fonts
    },
    addFont(font: FontOption) {
      if (this.loadedFonts && this.loadedFonts.value) {
        this.loadedFonts.value.push(font)
      }
    },
    addFontStyle(style: string) {
      if (this.fontStyles && this.fontStyles.value !== undefined) {
        this.fontStyles.value += style
      }
    },
    setFontStyles(styles: string) {
      this.fontStyles.value = styles
    },
    clearFontStyles() {
      this.fontStyles.value = ''
    }
  }
})
