<script lang="ts">
import { defineComponent } from 'vue'
import { config } from '@/main'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
	name: 'PremiumProfilePicturePicker',
	data() {
		return {
			config,
			profilePictures: null,
			currentProfilePicture: 0
		}
	},
	created() {
		axios
			.get(`${config.serverURL}/account/availablePremiumProfilePictures`)
			.then((response) => {
				if (response.data.error) {
					console.error('error in getting available premium profile pictures!!!')
					return console.error(response.data.error)
				}

				this.profilePictures = response.data
			})
	},
	methods: {
		decrement() {
			if(this.currentProfilePicture - 1 > 1) this.currentProfilePicture -= 1
		},

		increment() {
			if(this.currentProfilePicture + 1 < this.profilePictures.length) this.currentProfilePicture += 1
		},

		select (event) {
			event.target.disabled = true;
			const formData = new FormData();
			formData.set("picture_hash", `premium_${this.profilePictures[this.currentProfilePicture]}`);
			axios.post(`${config.serverURL}/account/update`, formData, {
				withCredentials: true
			}).then(response => {
				if(response.data.error) {
					console.error("error in updating account with premium profile picture!!!");
					console.error(response.data);
					alert("error in updating account. try again!!!!!!");
					return this.router.go();
				}

				alert("success!!");
				return this.router.go();
			})
		}
	},
	setup() {
		const router = useRouter();
		return { router };
	}
})
</script>

<template>
	<div class="main" v-if="this.profilePictures">
		<button class="india-button" @click="decrement"><</button>
		<div class="flex-column">
			<h1>Premium profile picture {{this.profilePictures[this.currentProfilePicture]}}</h1>
			<img class="pfp" :src="`${config.serverURL}/account/getPremiumProfilePicture/${this.profilePictures[this.currentProfilePicture]}`" alt="profile picture" />
			<button class="india-button" style="display: flex; justify-content: center;" @click="select">SELECT</button>
		</div>
		<button class="india-button" @click="increment">></button>
	</div>
	<p v-else>loading</p>
</template>

<style scoped>
.main {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;

	background-color: var(--background-color);
	z-index: 9990;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.india-button {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 10px 10px;
	background: none;
	color: var(--accent-color);
	font-family: 'Pinyon Script', cursive;
	font-size: 60px;

	border-style: solid;
	border-width: 10px 20px;
	border-image-source: url('/assets/indiaButton.png');
	border-image-slice: 0 80 fill;
	border-image-repeat: stretch;
	border-image-outset: 0;
	border-image-width: 10px 40px;
	border-radius: 40px;
	background-clip: padding-box;
}

.india-button:hover {
	animation-name: interaction;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	cursor: pointer;
}

.india-button:disabled {
	border-image-source: url('/assets/indiaButtonDisabled.png');
	color: black;
}

.flex-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}

.pfp {
	width: 500px;
	height: 500px;
}

@media screen and (max-width: 1000px) {
	.pfp {
		width: 300px;
		height: 300px;
	}
}
</style>
