import Vue from 'vue/dist/vue.esm'
import { socket } from '../socket.js'
import { artistView, albumView } from '../tabs.js'
import Downloads from '../downloads.js'
import QualityModal from '../quality-modal.js'
import TrackPreview from '../track-preview.js'
import Utils from '../utils.js'

const ChartsTab = new Vue({
	data() {
		return {
			country: '',
			id: 0,
			countries: [],
			chart: []
		}
	},
	methods: {
		artistView,
		albumView,
		playPausePreview: TrackPreview.playPausePreview,
		previewMouseEnter: TrackPreview.previewMouseEnter,
		previewMouseLeave: TrackPreview.previewMouseLeave,
		convertDuration: Utils.convertDuration,
		addToQueue(e) {
			e.stopPropagation()
			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
		},
		openQualityModal(e) {
			QualityModal.open(e.currentTarget.dataset.link)
		},
		getTrackList(e) {
			this.country = e.currentTarget.dataset.title
			localStorage.setItem('chart', this.country)
			this.id = e.currentTarget.dataset.id
			socket.emit('getChartTracks', this.id)
		},
		setTracklist(data) {
			this.chart = data
		},
		changeCountry() {
			this.country = ''
			this.id = 0
		},
		initCharts(data) {
			this.countries = data
			this.country = localStorage.getItem('chart') || ''

			if (!this.country) return

			let i = 0
			for (; i < this.countries.length; i++) {
				if (this.countries[i].title == this.country) break
			}

			if (i !== this.countries.length) {
				this.id = this.countries[i].id
				socket.emit('getChartTracks', this.id)
			} else {
				this.country = ''
				localStorage.setItem('chart', this.country)
			}
		}
	},
	mounted() {
		socket.on('init_charts', this.initCharts)
		socket.on('setChartTracks', this.setTracklist)
	}
}).$mount('#charts_tab')

export default ChartsTab
