<template>
<article class='card inline-block'>
  <input type="text" v-model='name' placeholder="Name">
  <input type="text" v-model='description' placeholder="Description">

  <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 {
  props: {
    modelValue: String
  },
  data: () => {
    return {
      name: '',
      sources: '',
      url: '',
      error: '' }
  },
  methods: {
    async addCohort () {
      const cohort = await $fetch('/api/cohort', { method: 'POST', body: {
        name: this.name,
        sources: this.sources.map(s => s.id)
      }})      
      this.$emit("addCohort", cohort)
    },
    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.sources.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>
