<template>
  <div>
    <header>
      <PageNav />
    </header>
    <main>
      <span>Content</span>

      <ol>
        <li v-for="video in videos" :key="video.id">
          {{ video.snippet.title }}
        </li>
      </ol>
    </main>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { GoogleApiYouTubeActivityResource } from '@types/gapi.youtube'

export default Vue.extend({
  name: 'IndexPage',

  data(): {
    hasError: boolean
    videos: GoogleApiYouTubeActivityResource[]
  } {
    return {
      hasError: false,
      videos: [],
    }
  },

  async fetch() {
    try {
      const response = await fetch(
        `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId=${process.env.YOUTUBE_UPLOADS_PLAYLIST_ID}&key=${process.env.YOUTUBE_API_KEY}`
      )
      const json = await response.json()
      this.videos = json.items
    } catch (error: any) {
      this.hasError = true
      throw new Error(error)
    }
  },

  fetchOnServer: true,
})
</script>
