import { defineStore } from 'pinia'
import renderNewsletter from 'src/utils/renderNewsletter'
import checkNewsletter from 'src/utils/checkNewsletter'
import elements from 'src/utils/elements'

export const useNewsletterStore = defineStore('newsletter', {
  state: () => ({
    newsletter: {
      // newsletter is loaded here
    },
    elements
  }),
  actions: {
    // load a newsletter from object and validate its format
    loadNewsletter (newsletter) {
      checkNewsletter(newsletter, this.elements)

      // no errors found proceeding to load the newsletter
      this.newsletter = newsletter
    },
    // remove element from newsletter by id
    removeElement (id) {
      const element = this.newsletter.sections.flatMap(section => section.elements).find(element => element.id === id)
      const section = this.newsletter.sections.find(section => section.elements.includes(element))
      section.elements = section.elements.filter(element => element.id !== id)
    },
    // add an element based on its name to a given section (index)
    addElement (name, index) {
      const section = this.newsletter.sections[index]
      section.elements.push({
        id: `${index}-${section.elements.length}`,
        type: name,
        data: JSON.parse(JSON.stringify(this.elements[name].data))
      })
    }
  },
  getters: {
    renderNewsletter
  }
})