import { type Ref, reactive, toRefs, unref, watch } from "vue"
import { isNil } from "lodash"

import blogPostsApi, { type BlogPost } from "@/api/blog-posts-api"

export { type BlogPost }

export function useBlogPost(idOrSlug: Ref<number | string | null | undefined>) {
  const state = reactive<{
    blogPost: BlogPost | null
    isLoading: boolean
    isErrored: boolean
  }>({
    blogPost: null,
    isLoading: false,
    isErrored: false,
  })

  async function fetch(): Promise<BlogPost> {
    const staticIdOrSlug = unref(idOrSlug)
    if (isNil(staticIdOrSlug)) {
      throw new Error("idOrSlug is required")
    }

    state.isLoading = true
    try {
      const { blogPost } = await blogPostsApi.get(staticIdOrSlug)
      state.isErrored = false
      state.blogPost = blogPost
      return blogPost
    } catch (error) {
      console.error("Failed to fetch blog post:", error)
      state.isErrored = true
      throw error
    } finally {
      state.isLoading = false
    }
  }

  async function save(): Promise<BlogPost> {
    const staticIdOrSlug = unref(idOrSlug)
    if (isNil(staticIdOrSlug)) {
      throw new Error("idOrSlug is required")
    }

    if (isNil(state.blogPost)) {
      throw new Error("No blog post to save")
    }

    state.isLoading = true
    try {
      const { blogPost } = await blogPostsApi.update(staticIdOrSlug, state.blogPost)
      state.isErrored = false
      state.blogPost = blogPost
      return blogPost
    } catch (error) {
      console.error("Failed to save blog post:", error)
      state.isErrored = true
      throw error
    } finally {
      state.isLoading = false
    }
  }

  watch(
    () => unref(idOrSlug),
    async (newIdOrSlug) => {
      if (isNil(newIdOrSlug)) return

      await fetch()
    },
    { immediate: true }
  )

  return {
    ...toRefs(state),
    fetch,
    refresh: fetch,
    save,
  }
}

export default useBlogPost