import axios from 'axios'
import { defineStore } from 'pinia'

export const templatesEndpoint = '/api/templates'


export const useTemplatesStore = defineStore('templates', {
  state: () => ({
    content: [],
    industries: {},
    types: {},
    allLoaded: false,
    loading: false
  }),
  getters: {
    getBySlug: (state) => (slug) => {
      if (state.content.length === 0) return null
      return state.content.find(item => item.slug === slug)
    },
    getTemplateTypes: (state) => (slugs) => {
      if (state.types.length === 0) return null
      return Object.values(state.types).filter((val) => slugs.includes(val.slug)).map((item) => { return item.name })
    },
    getTemplateIndustries: (state) => (slugs) => {
      if (state.industries.length === 0) return null
      return Object.values(state.industries).filter((val) => slugs.includes(val.slug)).map((item) => { return item.name })
    }
  },
  actions: {
    set (items) {
      this.content = items
      this.allLoaded = true
    },
    append (items) {
      const ids = items.map((item) => { return item.id })
      this.content = this.content.filter((val) => !ids.includes(val.id))
      this.content = this.content.concat(items)
    },
    addOrUpdate (item) {
      this.content = this.content.filter((val) => val.id !== item.id)
      this.content.push(item)
    },
    remove (item) {
      this.content = this.content.filter((val) => val.id !== item.id)
    },
    startLoading () {
      this.loading = true
    },
    stopLoading () {
      this.loading = false
    },
    setAllLoaded (val) {
      this.allLoaded = val
    },
    resetState () {
      this.set([])
      this.stopLoading()
    },
    loadTypesAndIndustries () {
      if (Object.keys(this.industries).length === 0) {
        import('@/data/forms/templates/industries.json').then((module) => {
          this.industries = module.default
        })
      }
      if (Object.keys(this.types).length === 0) {
        import('@/data/forms/templates/types.json').then((module) => {
          this.types = module.default
        })
      }
    },
    loadTemplate (slug) {
      this.startLoading()
      this.loadTypesAndIndustries()

      if (this.getBySlug(slug)) {
        this.stopLoading()
        return Promise.resolve()
      }

      return axios.get(templatesEndpoint + '/' + slug).then((response) => {
        this.addOrUpdate(response.data)
        this.stopLoading()
      }).catch((error) => {
        this.stopLoading()
      })
    },
    loadAll (options=null) {
      this.startLoading()
      this.loadTypesAndIndustries()

      // Prepare with options
      let queryStr = ''
      if(options !== null){
        for (const [key, value] of Object.entries(options)) {
          queryStr += '&' + encodeURIComponent(key) + '=' + encodeURIComponent(value)
        }
        queryStr = queryStr.slice(1)
      }
      return axios.get((queryStr) ? templatesEndpoint + '?' + queryStr : templatesEndpoint).then((response) => {
        if(options !== null){
          this.set(response.data)
          this.setAllLoaded(false)
        } else {
          this.append(response.data)
          this.setAllLoaded(true)
        }
        this.stopLoading()
      }).catch((error) => {
        this.stopLoading()
      })
    },
    loadIfEmpty () {
      if (!this.allLoaded) {
        return this.loadAll()
      }
      this.stopLoading()
      return Promise.resolve()
    }
  }
})