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

export default defineComponent({
	name: 'ProfileView',
	components: { Checkmark2Icon, Sidebar, ProfileVideo },
	data() {
		return {
			config,
			data: null,
			videos: null
		}
	},
	setup() {
		const router = useRouter()
		return { router }
	},
	watch: {
		'$route.params.id'(newId, oldId) {
			this.data = null
			this.fetchData(newId)
		}
	},
	created() {
		this.fetchData(this.$route.params.id)
	},
	methods: {
		fetchData(id) {
			// Fetch account data //
			axios
				.get(`${config.serverURL}/account/${id}/get`, {
					withCredentials: true
				})
				.then((response) => {
					if (response.data.error)
						return (this.data = {
							username: 'profile not found',
							followers: 'profile not found',
							following: 'profile not found'
						})
					this.data = response.data
					console.log(this.data)
				})
				.catch((error) => {
					this.data = {
						username: 'profile not found',
						followers: 'profile not found',
						following: 'profile not found'
					}

					console.error('Error in getting profile id ' + id + '!')
					console.error(error)
				})

			// Fetch video data //
			axios
				.get(`${config.serverURL}/account/${id}/videos`, {
					withCredentials: true
				})
				.then((response) => {
					if (response.data.error) return (this.videos = [])
					this.videos = response.data
				})
				.catch((error) => {
					this.videos = []

					console.error('Error in getting profile id ' + id + ' videos!')
					console.error(error)
				})
		},
		openBio() {
			document.getElementById('bio-container').classList.remove('hidden')
		},
		closeBio() {
			document.getElementById('bio-container').classList.add('hidden')
		},
		signedIn() {
			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
		},
		async follow() {
			const response = await axios.post(`${config.serverURL}/account/${this.$route.params.id}/follow`, {}, {
				withCredentials: true
			});

			if(response.data.error) {
				alert(`error ${this.data.error} following ${this.data.username}. try again later`);
				return console.error(response.data);
			}

			if(response.data.successful) {
				alert("successfully followed " + this.data.username + "!!!");
				return this.router.go();
			} else {
				alert(response.data.message);
				return this.router.go();
			}
		}
	}
})
</script>

<template>
	<div class="main">
		<Sidebar />
		<div class="profile-container">
			<div class="profile-details">
				<span class="profile-detail" id="profile-picture">
					<img
						:src="`${config.serverURL}/account/${$route.params.id}/picture`"
						class="profile-picture"
						alt="profile"
					/>

					<span class="profile-details" v-if="this.data">
						<span>{{ this.data.username }}</span>
						<Checkmark2Icon v-if="this.data.verified" class="checkmark" />
					</span>
					<span v-else>loading</span>
				</span>

				<span class="profile-detail">
					<span class="profile-row" id="buttons">
						<span v-if="this.data">
							<button class="india-button" disabled
									v-if="this.data.followed || this.data.myself">follow</button>
							<button class="india-button" v-else @click="follow">follow</button>
						</span>
						<span v-if="this.data">
							<button class="india-button" disabled
									v-if="this.data.myself">message</button>
							<button class="india-button" v-else>message</button>
						</span>
						<span v-if="this.data">
							<button
								class="india-button"
								v-if="this.data.myself"
								@click="this.router.push('/upload')"
							>
								upload
							</button>
						</span>
						<span v-else>loading</span>

						<span v-if="this.data">
							<button
								class="india-button"
								v-if="this.data.myself"
								@click="this.router.push('/updateAccount')"
							>
								edit account
							</button>
						</span>
						<span v-else>loading</span>
					</span>

					<span class="profile-row" id="numbers">
						<span class="profile-row">
							<span v-if="this.data">{{ this.data.followers }}</span>
							<span v-else>loading</span>
							<p class="dark">followers</p>
						</span>

						<span class="profile-row">
							<span v-if="this.data">{{ this.data.following }}</span>
							<span v-else>loading</span>
							<p class="dark">following</p>
						</span>

						<span class="profile-row">
							<span v-if="this.videos">{{ this.videos.length }}</span>
							<span v-else>loading</span>
							<p class="dark">videos</p>
						</span>

						<span class="profile-row">
							<span v-if="this.data">{{ this.data.socialCredit }}</span>
							<span v-else>loading</span>
							<p class="dark">social credit</p>
						</span>
					</span>

					<span class="profile-row">
						<a v-if="this.data" @click="openBio" class="bio-text">more details</a>
						<p v-else>loading</p>
					</span>
				</span>
			</div>

			<div class="profile-videos">
				<ProfileVideo
					:account-id="$route.params.id"
					:id="video.id"
					v-for="video in videos"
				/>
			</div>
		</div>

		<div class="bio-container hidden" id="bio-container">
			<div class="bio-panel">
				<button class="india-button bio-text" @click="closeBio">close</button>
				<div class="profile-links" v-if="this.data" v-for="link in this.data.links">
					<a :href="link.url" class="profile-link">{{ link.url }}</a>
				</div>
				<div v-else>loading</div>
				<p v-if="this.data">{{ this.data.bio }}</p>
				<p v-else>loading</p>
			</div>
		</div>
	</div>
</template>

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

	display: flex;
	flex-direction: column;
}

.profile-details {
	background-color: var(--accent-color);
	display: flex;
	flex-direction: row;

	justify-content: flex-start;

	padding: 20px;
}

.profile-detail {
	display: flex;
	flex-direction: column;
	gap: 10px;

	justify-content: center;
	align-items: center;
	text-align: center;

	font-size: 20px;
}

.profile-picture {
	width: 200px;
	height: 200px;
	border-radius: 100%;
	font-size: 1em;
}

.profile-videos {
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px;
	overflow-y: scroll;
}

.profile-row {
	display: flex;
	flex-direction: row;
	gap: 20px;

	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.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:disabled {
	border-image-source: url('/assets/indiaButtonDisabled.png');
	color: black;
}

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

.dark {
	color: var(--secondary-background-color);
}

.hidden {
	display: none !important;
}

.bio-container {
	background-color: var(--accent-color);
	position: absolute;
	width: 100vw;
	height: 100vh;
	margin: 0;

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

.bio-panel {
	background-color: var(--secondary-background-color);
	padding: 20px;
	border-radius: 10px;
	width: 50%;
	height: 50%;

	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 10px;
	font-size: 30px;

	overflow-y: scroll;
}

.bio-text {
	text-decoration: underline;
	cursor: pointer;
}

.checkmark {
	width: 40px;
	height: 30px;
}

@media only screen and (max-width: 768px) {
	.profile-detail {
		font-size: 20px;
	}

	.profile-picture {
		width: 100px;
		height: 100px;
	}

	.bio-panel {
		font-size: 20px;
	}

	#buttons {
		gap: 5px;
	}

	#numbers {
		gap: 10px;
		line-height: 0px;
	}

	.india-button {
		padding: 0;
	}
}

@media only screen and (max-width: 500px) {
	.profile-detail {
		font-size: 15px;
	}
}
</style>
