<template>
<section class='mt-4'>
  <v-data-table dense
    :items="cohorts"
    :headers="headers">
    <template v-slot:item.actions="{ item }">
      <v-btn target="_blank" :href='`/api/cohort/${item.id}.rss`' small text color='orange' label='rss feed'><v-icon>mdi-rss</v-icon> Rss</v-btn>
      <v-btn @click='copy($event, item)' small text color='primary' label='embedd'><v-icon>mdi-application-brackets-outline</v-icon> Embed</v-btn>      
    </template>
  </v-data-table>  
  <v-card>
    <v-card-title>Add your group</v-card-title>
    <v-card-subtitle>Search for a source to add</v-card-subtitle>
    <v-card-text>
      <v-text-field label='Name' v-model='cohort.name'></v-text-field>
      <v-text-field label='Description' v-model='cohort.description'></v-text-field>
      <v-autocomplete
        v-model='source'
        :search-input.sync="search"
        label='Source'
        hide-no-data
        item-value="id"
        item-text="name"
        :items="sources"
        :disabled='loading'
        :loading='loading'
        prepend-icon="mdi-magnify"
        placeholder="Start typing to search for a source to add"
        clearable
        return-object
        no-filter>
        <template v-slot:append-outer>
          <v-btn text link :disabled='!source' @click='addSource'>Add this source</v-btn>
        </template>
        <template v-slot:item="{ item }">
          <v-list-item-content three-line>
            <v-list-item-title>{{item.name}}</v-list-item-title>
            <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
            <v-list-item-subtitle>Last update: {{ item.updatedAt }} / Tags: / Link: {{item.link}}</v-list-item-subtitle>
          </v-list-item-content>
        </template>
      </v-autocomplete>
      <v-btn @click='addCohort' text color='primary'>Create group</v-btn>
      <v-list>
        <v-list-item v-for='source in cohortSources' :key='source.id'>
          <v-list-item-content>
            <v-list-item-title>{{source.name}}  <small>{{source.link}}</small></v-list-item-title>
            <v-list-item-subtitle>{{source.description}}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card-text>
  </v-card>
  <!-- <section class="flex place-content-center gap-5">
    <add-cohort></add-cohort>
  </section> -->
  <!-- <v-row>
    <v-col>
    <nuxt-link :to='`/group/${cohort.id}`' v-for='cohort in cohorts' :key='cohort.id'>
      <cohort :cohort='cohort' :max-posts='5'/>
    </nuxt-link>
    </v-col>
  </v-row> -->

</section>
</template>
<script>
// import AddCohort from '@/components/AddCohort.vue'
// import debounce from 'lodash/debounce'
import Cohort from '@/components/Cohort.vue'
// import Post from '@/components/Post.vue'
// import TextCohort from '@/components/TextCohort.vue'

export default {
  components: { Cohort },
  data: () => ({
    cohort: {},
    loading: true,
    source: null,
    search: '',
    cohorts: [],
    cohortSources: [],
    sources: [],
    loading: false,
    headers: [
      { text: 'Actions', value: 'actions' },
      { text: 'Name', value: 'name' },
      { text: 'Description', value: 'description' },
      { text: 'Updated', value: 'updatedAt' },
      { text: 'Sources', value: 'sources' },
    ]
  }),
  async fetch() {
    // const lastPosts = await fetch('http://localhost:3000/api/posts').then(res => res.json())
    this.cohorts = await this.$http.$get('http://localhost:3000/api/cohorts')
  },
  watch: {
    async search (value) {
      if (!value) return
      this.makeSearch()
    }
  },
  methods: {
    async makeSearch () {
      this.loading = true
      this.sources = await this.$http.$get(`/api/source/search?search=${encodeURIComponent(this.search)}`)
      this.loading = false
    },
    async addCohort () {
      const cohort = await this.$http.$post('/api/cohort', { ...this.cohort, sources: this.cohortSources.map(s => s.id) })
      this.cohorts.unshift(cohort)
      this.cohort = {}
    },
    async addSource () {
      this.cohortSources.unshift(this.source)
      this.source = null
      this.sources = []
    },
    copy (ev, item) {
      console.error('dentro copy')
      const str = `<display-feed feed='http://localhost:3000/api/cohort/${item.id}'></display-feed>`
      try {
        navigator.clipboard.writeText(str)
      } catch (e) {
        const el = document.createElement('textarea')
        el.addEventListener('focusin', e => e.stopPropagation())
        el.value = str
        document.body.appendChild(el)
        el.select()
        document.execCommand('copy')
        document.body.removeChild(el)
      }
    },    
  }
}
</script>