@props([
    'station' => null,
])
<div 
    id="highlight-content"
    x-data="
    {
        animations: [],
        stationId: @js( $station->id ),
        app_env: @js( config('app.env') ),
        timer: null,
        updationInProcess: false,
        init(){
            
            this.subscribePusher();

            $watch('$store.global.liveStream', () => {
                this.subscribePusher();
            })

            setInterval( () => {
                this.updateBank()
            },3000)
        },
        subscribePusher(){
            if($store.global.liveStream){

                let alpine = this;
                let channel = pusher.subscribe(`${$store.global.app_env}.station.streamfeature.${$store.global.station.id}`);
                channel.bind('App\\Events\\StreamFeature', function(data) {
                    alpine.animate(data);
                    this.timer = 600;
                });

            }else{

                pusher.unsubscribe(`${$store.global.app_env}.station.streamfeature.${$store.global.station.id}`)

            }
        },
        updateBank(){
            let futureFeatureMatures = $store.global.checkStandby();
            
            if( this.timer % 600 === 0 || futureFeatureMatures ){

                this.updationInProcess = true;
                let alpine = this;
                axios.get(`/stations/${ @js($station->slug) }/streamfeatures`).then( (data) => {
                    $store.global.updateBank( data.data );
                    this.updationInProcess = false;

                }).catch((e) => {    
                    this.updationInProcess = false;
                })
            }

            if( !this.updationInProcess ){
                let now = moment(new Date());
                let bank = $store.global.bank.filter( (item) => {
                    return moment(item.display_to).diff(now) > 0;
                })
                $store.global.updateBank( bank );
            }
            this.timer += 3;
        },
        getClassName(item){
            if(item.generic_thumbnail_img) item.type='4'
            
            switch(item.type){
                case '1':
                    return 'animate-fadein bg-grad-grey rounded-sm xl:col-span-2 flex'
                case '2':
                    return 'animate-fadein bg-grad-grey rounded-sm flex'
                case '3':
                    return 'animate-fadein bg-grad-grey rounded-sm flex'
                case '4':
                    return 'animate-fadein md:col-span-2 bg-grad-grey md:bg-none rounded-sm overflow-hidden flex'
                default:
                    return null
            }
        },
        animate(data){
            let position = $store.global.bank.findIndex((obj) => obj.id === data.id);

            if( data.deleted ){
                $store.global.removeElement( position )
                return;
            }
            if( position > -1 ){
                $store.global.removeElement( position )
            }


            if( $store.global.unshiftBank( data ))
            {

                let things = Array.from(document.querySelectorAll('#highlight-content div'));
                

                    this.animations = things.map(thing => {
                        let oldPos = thing.getBoundingClientRect();

                        return () => {
                            let newPos = thing.getBoundingClientRect();

                            thing.animate([
                                { transform: `translate(${oldPos.left - newPos.left }px, ${oldPos.top - newPos.top }px)` },
                                { transform: `translate(0, 0)` },
                            ], { duration: 250, easing: 'ease-out' });
                        }
                    });


                    things.forEach(thing => {
                        thing.getAnimations().forEach(animation => animation.finish());
                    });

                setTimeout(() => {
                    while(this.animations.length) {
                        this.animations.shift()();
                    }
                }, 100)
            }
        }
    }  
    "
    class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-11"
>
    <template x-for="item in $store.global.bank" :key="item.id">
        <div :class="getClassName(item)">

            <!-- Verse -->
            <template x-if="item.type == '3'">
                <div class="flex flex-col p-7 text-white">
                    <p class="italic flex-auto max-w-md" x-text="item.bible_verse_text"></p>
                    <h5 class="text-lg font-bold pt-2" x-text="item.bible_verse_reference"></h5>
                </div>
            </template>
            

            <!-- Quote -->
            <template x-if="item.type == '2'">
                <div class="flex flex-col p-7 text-white">
                    <x-icon name="quote" size="1.3rem" />
                    <p class="italic flex-auto py-2 max-w-md" x-text="item.quote_quote"></p>
                    <h5 class="text-lg font-bold pt-8" x-text="item.quote_author_name"></h5>
                    <h5 x-text="item.quote_footnote"></h5>
                </div>
            </template>

            <!-- Generic with Image -->
            <template x-if="item.type == '4'">
                <div class="text-white flex flex-col md:flex-row items-center md:items-stretch w-full">
                    <div class="flex flex-none max-w-[10rem] pt-7 pb-5 md:py-5 relative">
                        <div class="bg-grad-grey px-5 rounded-l-sm absolute inset-y-0 right-0 hidden md:block"></div>
                        <div class="flex items-center">
                            <img class="relative items-center block" width="400" height="600"  alt="" :src="item.generic_thumbnail_img" />
                        </div>
                    </div>
                    <div class="md:bg-grad-grey pt-0 p-7 md:pt-7 flex flex-col md:pl-5 text-center md:text-left w-full">
                        <h5 class="text-lg font-bold" x-text="item.generic_title"></h5>
                        <p class="" x-text="item.generic_subtitle"></p>
                        <p class="pt-4 pb-2 flex-auto max-w-2xl" x-text="item.generic_body"></p>
                        <a target="_blank" :href="item.generic_link_url" class="font-bold text-pink underline" x-text="item.generic_link_label"></a>
                    </div>
                </div>
            </template>

            <!-- Generic without Image -->
            <template x-if="item.type == '1'">
                <div class="p-7 text-white flex flex-col w-full">
                    <h5 class="text-lg font-bold" x-text="item.generic_title"></h5>
                    <p class="" x-text="item.generic_subtitle"></p>
                    <p class="pt-4 pb-2 flex-auto" x-text="item.generic_body"></p>
                    <a target="_blank" :href="item.generic_link_url" class="font-bold text-pink underline" x-text="item.generic_link_label"></a>
                </div>
            </template>
        </div>
    </template>
</div>