<template>
  <div class="columns">
    <div class="column">
      <div class="field">
        <label class="label">Date de projection</label>
        <div class="control">
          <input class="input" type="datetime-local" />
        </div>
      </div>
      <div class="field">
        <label class="label">Titre</label>
        <div class="control">
          <input v-model="title" class="input" type="text" @change="findFilm" />
        </div>
      </div>
      <div class="field">
        <label class="label">Réalisateur</label>
        <div class="control">
          <input v-model="director" class="input" type="text" />
        </div>
      </div>
      <div class="field">
        <label class="label">Durée</label>
        <div class="control">
          <input class="input" type="number" />
        </div>
      </div>
    </div>

    <div class="column">
      <!-- doc : https://bluefantail.github.io/bulma-list/ -->
      <div class="list has-visible-pointer-controls">
        <div
          v-for="(foundFilm, index) of foundFilms?.results"
          :key="foundFilm.id"
          class="list-item"
        >
          <div class="list-item-image">
            <figure class="image is-64x64">
              <img :src="image(index)" />
            </figure>
          </div>
          <div class="list-item-content">
            <div class="list-item-title">{{ foundFilm.title }}</div>
            <div class="list-item-description">
              {{ foundFilm.release_date }}
            </div>
          </div>
          <div class="list-item-controls">
            <div class="buttons is-right">
              <button class="button">Préremplir</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "admin",
})

const foundFilms = ref()
const title = ref<string>()

const { data: films } = await useFetch("http://localhost:8000/api/films/", {
  params: { test: 2 },
})

// https://developers.themoviedb.org/3/getting-started/images
const image = computed(() => (index: number) => {
  return `https://image.tmdb.org/t/p/w500${foundFilms.value?.results[index].poster_path}`
})

async function findFilm() {
  foundFilms.value = await $fetch("https://api.themoviedb.org/3/search/movie", {
    params: {
      api_key: "INSERT API KEY HERE",
      language: "fr-FR",
      query: title.value,
    },
  })
}
</script>
