<template>
<div >
<div class="page subsciptions_container">
    <!-- <div v-for="x in updates" :key="e.id">
    </div> -->

        <div id="filters-group" class="filters-group">
            <div id="topic_tag_bar" class="topic_tag_bar filter-options">
              <div class="reset_button">
                <button @click="shuffleFilter()" class="topic_tag left coolbtn"><i class="fa fa-times"></i></button>
              </div>
              <div v-for="i in topics" :key="i.id" class="left topic_tag">
                <button @click="shuffleFilter(i.topic)" :id="i.topic" class="coolbtn ">{{i.topic}}</button>
              </div>
            </div>
        </div>

    <!-- <button @click="addItem" class="coolbtn">Add Item</button> -->
    <div id="grid" class="row my-shuffle-container">


    <div v-for="i in posts" :key="i.id" :class="i.platform" class="picture-item" :data-groups="JSON.stringify(i.topics)" :data-date-created="i.createdAt" :data-title="i.title">



        <figure class="update">
          <div class="update_inner">
            <div class="update_top">
              <div class="right">
                  <div class="dropdown">

                    <div class="dropdown-toggle-ellipsis" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="fa fa-ellipsis-v"></i>
                    </div>

                    <div class="dropdown-menu mini dropdown-menu-right" aria-labelledby="dropdownMenuButton">

                      <a @click.prevent='modal("NewTip")' class="dropdown-item tip" href="#"><i class="fa fa-dollar-sign"></i> Send Tip</a>
                      <div class="dropdown-divider"></div>
                      <a @click.prevent='createNotification' class="dropdown-item" href="#">Unsubscribe</a>
                      <a @click.prevent='createNotification' class="dropdown-item" href="#">Mute</a>

                      <div v-if="isMyChannel(i.owner)">
                        <div class="dropdown-divider"></div>
                        <a @click.prevent='deleteNotification(i.id)' class="dropdown-item" href="#">Delete</a>
                        <a @click.prevent='createNotification' class="dropdown-item" href="#">Resend Notifcation</a>
                      </div>

                    </div>
              </div>
            </div>
              <div @click="openChannel(i.owner)" class="creator_meta">
                <div v-bind:style="{ 'background-image': 'url(' + i.channel.avatar + ')' }" class="creator_avatar avatar"></div>
                <div class="creator_name">{{i.channel.displayName}}</div>
                <div class="post_time"> {{ niceTime(i.createdAt) }} </div>
              </div>
            </div>
            <div class="thumbnail_container">
            <!-- <a :href="i.link" target="blank"> -->

              <div v-if="i.platform == 'Instagram'"><div class="icon instagram"></div></div>
              <div v-if="i.platform == 'Soundcloud'"><div class="icon soundcloud"></div></div>


              <div v-if="i.duration" class="duration">{{convertDuration(i.duration)}}</div>
              <div class="update_thumb">

                <!-- REMOVE THE IF -->

                <div class="thumb_img" v-if="i.thumbnail.medium" :style="{ 'background-image': 'url(' + i.thumbnail.medium.url + ')' }"></div>
                <div class="thumb_img" v-else :style="{ 'background-image': 'url(' + i.thumbnail + ')' }"></div>


                <!-- {{getColors(i.thumbnail, i.id)}} -->

                </div>
                            <!-- </a> -->

            </div>
            <div class="update_title"> {{ trimmedTitle(i.title) }} </div>

          </div>
        </figure>


    </div>


    </div>

</div>

</div>
</template>




<script>
// import FeedItem from '@/components/feeditem'
import { server } from '@/main'
import $ from 'jquery'
import Shuffle from 'shufflejs'

import moment from 'moment'
import momentDurationFormatSetup from 'moment-duration-format'

// import numeral from 'numeral'
// import Vibrant from 'node-vibrant'
// import { xyzToCIELab } from 'node-vibrant/lib/util'

export default {
    name: 'subscriptions',
    components: {
        // FeedItem
    },
    data() {
        return {
            shuffleInstance: null
            // topics: [// CHANGE TO STORE ( add computed)
            //   {id:this.uuid(), topic:'fortnite'},
            //   {id:this.uuid(), topic:'gaming'},
            //   {id:this.uuid(), topic:'overwatch'},
            //   {id:this.uuid(), topic:'comedy'},
            //   {id:this.uuid(), topic:'commentary'},
            // ]
        }
    },
    mounted() {
        // init shuffle JS
        this.feedShuffle()

        // $('#grid').css('overflow', '')
        this.shuffleInstance.filter()

        // this.shuffleInstance.filter(function(element) {
        //  return element.getAttribute('data-date-created') < 10
        // })

        this.shuffleInstance.sort((a, b) => new Date(a.getAttribute('data-date')) - new Date(b.getAttribute('data-date')))

        // this.feedShuffle.prototype.onAppendBoxes = function (newItems) {
        //  newItems.forEach(function (newItem) {
        //      this.feedShuffle.element.appendChild(newItem);
        //  }, this);
        // }
    },
    updated() {
        var vm = this
        this.feedShuffle(function() {
            vm.shuffleInstance.filter('ijernfeofimnreon')
            setTimeout(function() {
                vm.shuffleInstance.filter()
            }, 300)
        })
    },
    methods: {
        feedShuffle(callback) {
            var element = document.querySelector('.my-shuffle-container')
            var sizer = element.querySelector('.my-sizer-element')

            this.shuffleInstance = new Shuffle(element, {
                itemSelector: '.picture-item',
                sizer: sizer // could also be a selector: '.my-sizer-element'
            })
            if (callback) callback()
            // shuffleInstance.filter('animal');
        },
        shuffleFilter(topic) {
            this.shuffleInstance.filter(topic)
            $('#topic_tag_bar .active').removeClass('active')
            if (topic !== undefined) {
                document.getElementById(topic).classList.add('active')
                // $('.reset_button').show()
            }
        },

        addItem() {
            console.log(this.shuffleInstance)
            this.shuffleInstance.add([
                {
                    id: 4,
                    owner: 3,
                    title: 'FouseyTube goes off on keemstar!',
                    platform: 'yotube',
                    datePublished: '2018-07-16T06:57:31.000Z',
                    duration: 420,
                    link: 'https://www.youtube.com/watch?v=GnH2DIFPnDk&ab_channel=Tys',
                    topics: ['fuck', 'you'],
                    meta: null,
                    thumbnail: 'https://i.ytimg.com/vi/GnH2DIFPnDk/mqdefault.jpg',
                    createdAt: '2018-07-19T14:24:36.463Z',
                    updatedAt: '2018-07-19T14:24:36.463Z',
                    deletedAt: null
                }
            ])
        },

        deleteNotification(id) {
            console.log('deleting notification')
            server
                .delete(`post/` + id)
                .then(response => {
                    var removed = this.removeByKey(this.$store.state.posts, {
                        key: 'id',
                        value: id
                    })
                    // this.$parent.updates = removed
                    this.saveData('posts', removed)
                    console.log(response)
                })
                .catch(err => {})
        },
        niceTime(time) {
            moment.updateLocale('en', {
                relativeTime: {
                    future: 'in %s',
                    past: '%s',
                    s: '1s',
                    m: '1m',
                    mm: '%dm',
                    h: '1hr',
                    hh: '%dhr',
                    d: '1d',
                    dd: '%dd',
                    M: '1 month',
                    MM: '%d months',
                    y: '1 year',
                    yy: '%d years'
                }
            })
            return moment(time).fromNow()
        },
        trimmedTitle(title) {
            if (title.length > 55) {
                return title.substring(0, 55) + '...'
            }

            return title
        },
        convertDuration(duration) {
            if (duration === undefined) return null
            return moment.duration(duration, 'minutes').format()
            // return dur.format('HH:mm:ss', {trim: false})
        }
    },
    computed: {
        posts() {
            return this.$store.getters.getFeed
        },
        topics() {
            return this.$store.getters.getTopics
        }
    }
    // watch: {
    //  topics() {}
    // }
}
</script>


<style>
</style>