<script>
import { defineComponent } from 'vue'
import Sidebar from '@/components/Sidebar.vue'
import Cookies from 'js-cookie'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { config } from '@/main.js'
import PremiumProfilePicturePicker from '@/components/PremiumProfilePicturePicker.vue'

export default defineComponent({
	name: 'UpdateAccountView',
	setup() {
		const router = useRouter()
		// no this here
		if (!Cookies.get('token') || !Cookies.get('token').startsWith('HajeebToken'))
			return router.push('/profile/myself')
		return { router }
	},
	components: { PremiumProfilePicturePicker, Sidebar },
	methods: {
		async handleSubmit(e) {
			e.preventDefault()
			if (!this.signedIn()) return this.router.push('/login');
			document.getElementById('submit').disabled = true

			const formData = new FormData(e.target);
			const response = await axios.post(`${config.serverURL}/account/update`, formData, {
				withCredentials: true,
			})

			if(response.data.error) {
				alert(`update error: ${response.data.message}`);
				return console.error(response.data);
			}

			if(response.data.id) {
				alert(`Account updated successfully!`);
				return this.router.push(`/profile/myself`);
			}
		},
		signedIn() {
			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
		},
		premium() {
			document.getElementById('submit').disabled = true;
			document.getElementById('picker').classList.remove('hidden');
		}
	},
	data () {
		return {
			config
		}
	}
})
</script>

<template>
	<div class="main">
		<PremiumProfilePicturePicker class="hidden" id="picker" />
		<Sidebar />
		<div class="update-container">
			<form class="update" id="form" @submit="handleSubmit" enctype="multipart/form-data">
				<img src="/assets/hajeebtok.png" width="300px" alt="HajeebTok logo" />
				<label for="picture">current profile picture:</label>
				<img class="profile-picture" :src="`${config.serverURL}/account/myself/picture`" alt="profile picture" />
				<input
					type="file"
					name="picture"
					accept="image/png, image/jpeg, image/jpg, image/webp"
				/>
				<h1>OR pick a PREMIUM profile picture!!!</h1>
				<button @click="premium" class="india-button">PREMIUM profile PICTURES!!!</button>
				<input type="text" placeholder="biography" name="bio" />
				<input type="submit" value="update Account" id="submit" />
			</form>
		</div>
	</div>
</template>

<style scoped>
.update-container {
	width: 100%;
	height: 100%;
	margin: 0;
	position: absolute;

	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
}

@media screen and (max-width: 580px) {
	.update-container {
		font-size: 10px;
	}

	input {
		font-size: 15px !important; /* i love css */
	}
}

.hidden {
	display: none;
}

.update {
	background-color: var(--secondary-background-color);
	color: white;

	padding: 10px;
	border-radius: 5px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-self: center;
	gap: 10px;
}

input {
	font-family: 'Knewave', system-ui;
	font-size: 30px;

	border: 2px solid var(--accent-color);
	border-radius: 5px;
}

input:focus {
	outline: none;
}

.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: 30px;

	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;
}

.profile-picture {
	width: 100px;
	height: 100px;
	border-radius: 100%;
}
</style>
