<script>
import { defineComponent } from 'vue'
import Sidebar from '@/components/Sidebar.vue'
import axios from 'axios'
import { config } from '@/main'
import ExploreVideo from '@/components/ExploreVideo.vue'

export default defineComponent({
	name: 'ExploreView',
	components: { ExploreVideo, Sidebar },
	created() {
		// Fetch explore data //
		axios
			.get(`${config.serverURL}/video/explore`, {
				withCredentials: true,
			})
			.then((response) => {
				if (response.data.error) return
				this.data = response.data
				console.log(this.data)
			})
			.catch((error) => {
				console.error('Error in getting feed!')
				console.error(error)
			})
	},
	data() {
		return {
			data: null,
		}
	},
})
</script>

<template>
	<div class="main">
		<Sidebar />
		<div class="videos" v-if="this.data">
			<ExploreVideo :id="video.id" v-for="video in this.data" />
		</div>
		<p v-else>loading</p>
	</div>
</template>

<style scoped>
.videos {
	width: 100%;
	height: 100%;

	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px;
	flex-direction: row;
	overflow-y: scroll;
}

.main {
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: row;
}
</style>
