<template>
    <div class="player">
        <div class="player__cover">
            <img :src="currentPlay.art" alt="player"/>
        </div>
        <div class="player__content">
            <div class="player__top">
                <button v-if="currentPlay.isPlay" @click="handlerPause" class="button player__btn m--pause">
                </button>
                <button v-else @click="handlerPlay" class="button player__btn m--play">
                </button>
                <div class="player__executor">
                    {{currentPlay.title || '—'}}
                    <span>{{currentPlay.artist || '—'}}</span>
                </div>
                <div class="player__favorites" :class="[isFavorites&&'m--active']" @click="handlerFavorites">
                </div>
                <div class="player__tools">
					{{isLive}}
                    <FormKit
                        v-model="isLive"
                        type="toggle"
                        label="Включить мою музыку"
                    />
                    <div class="player__volume">
                        <span @click="setVolume"/>
                        <input type="range" v-model="player.volume" @change="changeVolume">
                    </div>
                </div>
            </div>
            <div class="player__bottom">
                <div class="player__time m--ether">
                    Эфир
                </div>
                <div class="player__progress">
                    <input :disabled="player.live" type="range" v-model="player.progress">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {audio as Player, app} from "@/services";

export default {
    name: 'player',
    data() {
        return {
            audioUrl: 'http://82.97.242.49:18000/radio.mp3',
            isFavorites: false,
            isPlayRadio: true,
			connection: null,
			isLive: false
		}
    },
	computed:{
		user() {
			return this.$store.state.user;
		},
		currentPlay(){
			return this.$store.state.currentPlay
		},
		player(){
			return this.$store.state.player
		}
	},
	watch:{
		'currentPlay': {
			immediate: true,
			handler() {
				console.debug('this.currentPlay.live',!this.currentPlay.live)
				this.isLive = !this.currentPlay.live
			},
		}
	},
	created() {
		this.connectionPlayer();
	},
	mounted() {
		// if (!this.player.target){
			this.$store.dispatch('initPlayer');
		// }
    },
    methods: {
		connectionPlayer() {
			if (this.connection) {
				this.connection.removePlay();
			}
			this.connection = new Player();
			this.connection.init();
			this.connection.onHandler(this.getPlaying);
		},
		getPlaying (e){
			const jsonData = JSON.parse(e.data)
			if (jsonData?.pub?.data){
				const data = jsonData?.pub?.data;
				if (this.currentPlay.live){
					if (data.np.station.listen_url!==this.player.target.src){
						this.$store.dispatch('changePlayer', data.np.station.listen_url);
					}
					this.$store.dispatch('setCurrentPlay', {...data.np.now_playing.song, live: false});
				}
			}
		},
        updateProgress(){
            console.log(this.$refs.player.currentTime)
            console.log(this.$refs.player.duration)
        },
        handlerPlay() {
			this.$store.dispatch('handlerPlayer', {play: true});
        },
        handlerPause() {
			this.$store.dispatch('handlerPlayer', {pause: true});
        },
        handlerFavorites(){
			if (this.user?.id){
				this.isFavorites = !this.isFavorites;
				const params = {...this.currentPlay, azura_id:this.currentPlay.id};
				app.createFavoriteForUser(params).then(()=>{

				})
			}else {
				this.$emit('shopAuthentication', true)
			}
			
        },
        setVolume(){
			this.$store.dispatch('handlerPlayer', {volume: 100});
		},
        changeVolume() {
			this.$store.dispatch('handlerPlayer', {volume: 100});
        },

    }
}
</script>
