import { defineStore } from 'pinia'
import { ref } from 'vue'
import { formatRelative } from 'date-fns'
import { fr } from 'date-fns/locale'
import { marked } from 'marked'
import { API_BASE_URL } from '@/config.js'

export const usePostsStore = defineStore('posts', () => {
  const postsApiPath = API_BASE_URL + '/posts'

  const posts = ref([])

  function fetchPosts() {
    return fetch(postsApiPath)
      .then((response) => {
        return response.json()
      })
      .then(async (data) => {
        posts.value = data.sort((a, b) => b.id - a.id) // highest ID (more recent) first
        for (const post of posts.value) {
          const postDate = new Date(post.date)
          post.formatedDate = formatRelative(postDate, new Date(), { locale: fr })
          post.formatedDescription = marked.parse(post.description)
        }

        return posts.value
      })
      .catch((error) => {
        console.log('post list parsing failed with error: ' + error)
      })
  }

  return { posts, fetchPosts }
})