import { remove, find } from 'lodash'
import { defineStore } from 'pinia'

export const useBookmarkFoldersStore = defineStore('bookmarkFolders', {
  state: () => ({
    allFolders: []
  }),
  getters: {
    findBookmarkFolderName () {
      return (id) => {
        const folder = this.allFolders.find(folder => folder.id === id)
  
        if (!folder) return
        return folder.name
      }
    }
  },
  actions: {
    setBookmarkFolders (value) {
      this.allFolders = value
    },
    setBookmarkFolder ({ id, name, emoji, emoji_url: emojiUrl }) {
      const entry = find(this.allFolders, { id })
      if (!entry) {
        this.allFolders.push({ id, name, emoji, emoji_url: emojiUrl })
      } else {
        entry.name = name
        entry.emoji = emoji
        entry.emoji_url = emojiUrl
      }
    },
    createBookmarkFolder ({ name, emoji }) {
      return window.vuex.state.api.backendInteractor.createBookmarkFolder({ name, emoji })
        .then((folder) => {
          this.setBookmarkFolder(folder)
          return folder
        })
    },
    updateBookmarkFolder ({ folderId, name, emoji }) {
      return window.vuex.state.api.backendInteractor.updateBookmarkFolder({ folderId, name, emoji })
        .then((folder) => {
          this.setBookmarkFolder(folder)
          return folder
        })
    },
    deleteBookmarkFolder ({ folderId }) {
      window.vuex.state.api.backendInteractor.deleteBookmarkFolder({ folderId })
      remove(this.allFolders, folder => folder.id === folderId)
    }
  }
})