@props([
    'station' => '',
    'reactions' => []
])

@php
    $icons = [
        'react-thumbs' => 1,
        'react-pray' => 2,
        'react-light' => 3,
        'react-heartbreak' => 4,
        'react-heart' => 5
    ];

@endphp

<div 
    x-transition
    x-data="{
        app_env: @js( config('app.env') ),
        icons: @js( $icons ),
        reactions: @js( $reactions ),
        update(reaction) {
            this.reactions.push( reaction ); 
            axios.post(`/reactions/${$store.global.station.slug}`, { reaction }, { headers: { 'X-Socket-Id': pusher.connection.socket_id} } ).then( (data) => {
                // this.reactions.push( parseInt( data.data ) ); 
            }).catch((e) => {
                this.reactions.pop();
                if( e.response.status === 401 )
                    this.$dispatch('showsignupmodal')
            })
        },
        numFormat(reaction) {

            let value = this.reactions.filter( ( item, index ) => item == reaction );
            value = value.length;
            if(value >= 1000000000) return (value / 1000000000).toFixed(1).replace('.0','') + 'b';
            if(value >= 1000000) return (value / 1000000).toFixed(1).replace('.0','') + 'm';
            if (value >= 1000) return (value / 1000).toFixed(1).replace('.0','') + 'k';
            return value;
             
        },

        init(){
            
            this.subscribePusher();

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

                let alpine = this;
                let channel = pusher.subscribe(`${$store.global.app_env}.station.reaction.${$store.global.station.id}`);
                channel.bind('App\\Events\\Reaction', function(data) {
                    alpine.reactions.push( parseInt( data[0] ) );
                });

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

            }
        }


    }"
    x-show="$store.global.liveStream"
    class="flex justify-center gap-0 md:gap-3 my-6"
>
    @foreach($icons as $icon => $value)
        <div>
            <x-player.react-icon @click="update('{{ $value }}')" :icon="$icon"></x-player.react-icon>
            <div class="text-xs text-center text-grey-450" x-text="numFormat( @js($value) )">-</div>
        </div>
    @endforeach
        <a href="#talk-to-us" class="block">
            <x-player.react-icon icon="react-chat"></x-player.react-icon>
        </a>
    
</div>