<template>
  <div class="bg-white">
    <div
      class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8"
    >
      <h2 class="sr-only">Videos</h2>

      <div
        class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
      >
        <a v-for="video in videos" :key="video.id" class="group">
          <VideoPreview :video="video" />
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

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

  data(): {
    hasError: boolean
    videos: []
  } {
    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>
