<template>
<div>
	<div class="services-menu">
	<button class="selected">Services</button>
	<button>Credits</button>
	<div class="menu-slider"><div></div></div>
	</div>
	<h4 class="credits-display">Credits: {{credits}}</h4>
	<div class="services-legend"><h5>Name</h5>
<h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5></div>
<ServicePane :site="'youtube'" :services="services" @select="select"></ServicePane>
<ServicePane :site="'instagram'" :services="services" @select="select"></ServicePane>
<ServicePane :site="'twitter'" :services="services" @select="select"></ServicePane>
<ServicePane :site="'tiktok'" :services="services" @select="select"></ServicePane>
<div id="overlay" v-if="selected">
	<div v-if="!completed" class="overlay-item">
	<img @click="completed = false; selected = null" class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
		<img v-if="selected.site == 'youtube'" class="icon" src="../../images/youtube-icon.svg" alt="">
		<img v-if="selected.site == 'instagram'" class="icon" src="../../images/instagram-icon.svg" alt="">
		<img v-if="selected.site == 'twitter'" class="icon" src="../../images/twitter.svg" alt="">
		<img v-if="selected.site == 'tiktok'" class="icon" src="../../images/tik-tok.svg" alt="">
		<h3>{{selected.name}}</h3>
		<h4>Cost: {{cost.toLocaleString('en')}}</h4>
		<h4>Quantity</h4>
		<div><input required :min="selected.minimum" :max="selected.maximum" type="number" v-model="amount" id="selQty"><span> / {{selected.maximum.toLocaleString('en')}}</span></div> 
		<template v-if="selected.modifier == 'location'">
		<h4>Location</h4>
		<div><select required id="country" name="">
		<option value="usa">USA</option>
		<option value="canada">Canada</option>
		<option value="uk">United Kingdom</option>
		<option value="germany">Germany</option>
		<option value="france">France</option>
		</select></div> 
		</template>
		<h4>URL</h4>
		<div><input required type="url" id="url" v-model="url"></div> 
		<button @click="buyService" :disabled="paying">Submit<loading v-if="paying"></loading></button>
		<p id="overlay-error"></p>
	</div>
	<div class="overlay-item" v-else-if="completed">
	<img @click="completed = false; selected = null" class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
	<img class="icon" src="../../images/checked2.svg" alt="">
	<h3>Success!</h3>
	</div>
</div>
</div>
</template>

<script>
import ServicePane from './service-pane.vue'
import Loading from '../icons/loading.vue'

function select(service) {
	this.completed = false
	this.selected = service
}

function cost() {
	return Math.ceil(this.selected.price * this.amount / 1000)
}

function buyService() {
	if (!this.url) {
		document.getElementById('overlay-error').textContent = "You must provide a URL."	
		return
	}
	this.paying = true
	let note = ''
	let country = document.getElementById('country')

	if (country) {
		note = JSON.stringify({'location': country.value})
	}
	
	fetch('/panel/orders', {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'service': this.selected.id,
		'quantity': this.amount, 'url': this.url, 'note': note}), }).then(
			response => {
				if (response.ok) {
					document.getElementById('overlay-error').textContent = `Success!`
					this.completed = true
					this.$emit('updateUser')
				} else {
					document.getElementById('overlay-error').textContent = `Error
					${response.status}: ${response.statusText}`
				}
				this.paying = false
			}
		)

}

export default {
	data() {
		return {servicePane: true, services: null, selected: null, amount: 0,
		paying: false, url: '', completed: false}
	},
	components: {ServicePane, Loading},
	props: ['token', 'credits'],
	created() {
		fetch("/panel/services", {
			method: 'GET',
			headers: {'Content-Type': 'application/json',
				'Accept': 'application/json',
				'X-XSRF-TOKEN': this.token}
		}).then(response => {
			response.json().then(data => {this.services = data})
		})
	},
	methods: {select, buyService},
	computed: {cost},
	emits: ['updateUser']
}
</script>