<script lang="ts" setup>
import {computed, onMounted, ref} from "vue";

type errObj = {
  blog?: object,
  git?: object
}

const {$mitt} = useNuxtApp()
const recentPosts = ref<IPost[] | null>(null);
const recentActivities = ref<IActivity[] | null>(null);
const isLoading = ref({
  blog: true,
  git: true
});
const isError = ref({
  blog: false,
  git: false
});
const errMsg = ref<errObj>({
  blog: undefined,
  git: undefined
})

const config = useRuntimeConfig()
const getBlogRecentPost = get<IBlogResponse<IPostsData>, any>('/blog/index.php/api/posts', {
  params: {
    showDigest: "excerpt",
    limit: 100
  }
})
const getActivity = get<IActivity[], any>('/git/api/v1/users/cantyonion/activities/feeds', {
  headers: {
    Authorization: ` ${config.public.gitApiKey}`
  },
  params: {
    limit: 10,
  }
})

const hasPosts = computed(() => (recentPosts.value ?? []).length > 0);
const hasActivities = computed(() => (recentActivities.value ?? []).length > 0);
const postsData = computed(() => {
  if (!recentPosts.value) return [];
  if (recentPosts.value.length > 4)
    return recentPosts.value.slice(0, 4)
  return recentPosts.value
})
const activitiesData = computed((): IActivity<IContent>[] => {
  if (!Array.isArray(recentActivities.value)) return [];
  return recentActivities.value.map(item => {
    try {
      if (item.op_type === "commit_repo")
        return {
          ...item,
          content: JSON.parse(item.content)
        }
      else return null
    } catch (e) {
      return null
    }
  }).filter(item => item !== null)
})

const reloadPosts = async () => {
  try {
    isLoading.value.blog = true
    isError.value.blog = false
    const postData = await getBlogRecentPost()
    if (postData !== null)
      recentPosts.value = postData.data.dataSet
  } catch (e) {
    isError.value.blog = true
    errMsg.value.blog = e as object
  }
  finally {
    isLoading.value.blog = false
  }
}

const reloadActivities = async () => {
  try {
    isLoading.value.git = true
    isError.value.git = false
    recentActivities.value = await getActivity()
  } catch (e) {
    isError.value.git = true
    errMsg.value.git = e as object
  }
  finally {
    isLoading.value.git = false
  }
}

await Promise.allSettled([reloadPosts(), reloadActivities()])

onMounted(() => {
  $mitt.emit('startLoading', false)
})
</script>

<template>
  <!--  个人介绍  -->
  <card-full-screen-intro-card/>

  <div class="container mx-auto xl:max-w-screen-xl">
    <!-- 博客部分 -->
    <section class="w-full px-4 sm:px-0">
      <!-- 标题部分 -->
      <card-title :icon="['fas', 'blog']"  title="最近文章"/>

      <card-section-card :empty="!hasPosts" :error="isError.blog" :loading="isLoading.blog" @reload="reloadPosts" :err-msg="errMsg.blog">
        <template v-slot:default>
          <div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            <card-article-card v-for="item in postsData" :key="item.cid" :post="item"/>
          </div>
        </template>
      </card-section-card>
    </section>

    <!-- Git部分 -->
    <section class="my-4 w-full px-4 sm:px-0">
      <card-title :icon="['fas', 'code']" title="最近活动"/>

      <card-section-card :empty="!hasActivities" :error="isError.git" :loading="isLoading.git" @reload="reloadActivities" :err-msg="errMsg.git">
        <template v-slot:default>
          <div class="grid w-full grid-cols-1 gap-4 lg:grid-cols-2">
            <card-git-card v-for="item in activitiesData" :key="item.id" :commit="item"/>
          </div>
        </template>
      </card-section-card>
    </section>
  </div>
</template>

<style scoped>

</style>