<template>
<article class='card inline-block'>
  <h3 class='text-xl font-bold'>Add source</h3>
  <span>Aggiungi una sorgente, un sito, un feed rss/atom/json, un account mastodon, twitter, facebook</span>
  <p>{{search}} {{items.length}}</p>
  <input type="text" v-model='url' placeholder="Feed URL" @keydown.enter="addSource">
  <span v-if='error' class="text-red-500">{{error}}</span>
  <span v-else class="font-light">Add your feed</span>
  <!-- <ul>
    <li class="p-2 bg-slate-700 " v-for='source, id in sources' :key="id">
      <div class="font-bold text-xl">{{ source.name }}</div>
      <span class="text-red-500">{{source.description}}</span>
    </li>
  </ul> -->
  <button @click='addCohort' class="p-2 text-xl font-bold border-2 rounded mt-5">Create +</button>
</article>
</template>
<script>
export default {
  // emits: ['update:modelValue', 'addSource'],
    // async function runSearch() {
    //   console.error('sono dentro run search', search.value)
    //   items.value = await $fetch('/api/source/search', { params: { search: search.value }})
    //   console.error(items)
    // }

    // let items = reactive([])
    // return { source, url, error, search, items }
  // },
  // asyncComputed: {
  //   async items () {
  //     console.error('dentro items vado di search', this.search)
  //     return await $fetch('/api/source/search', { search: this.search })
  //   }
  // },
  methods: {
    async addSource() {
      console.error('dentro add source', this.url, this.name)
      this.error = ''
      // invio un url al backend
      // se e' un feed valido, lo aggiungo ai sources e all cohort appena creata
      // se non e' valido provo a cercare il feed dentro quell'url
      try {
        const source = await $fetch('/api/source', { method: 'POST', body: { URL: this.url } })
        this.source.push( source )
        // this.$emit('addCohort', { id: 1, title: this.title })
        this.url = ''
      } catch (e) {
        this.error = String(e)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.card {
  @apply w-full rounded-md border-2 border-dashed p-2 mt-3
    max-w-sm border-pink-500;
}
</style>
