<template>
	<div class="page">
		<div class="body">
			<Post :post="post" />

			<form
				class="writer"
				@submit.prevent="addComment"
			>
				<textarea
					v-model="newComment"
					placeholder="Write a new comment"
					class="input"
				/>

				<div class="actions">
					<button class="button">Comment</button>
				</div>
			</form>

			<ul class="comments nolist">
				<li
					v-for="comment in comments"
					:key="comment.id"
				><Comment :comment="comment" /></li>
			</ul>
		</div>

		<div class="sidebar">
			{{ shelf.name }}
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import Post from '../../components/posts/post.vue';
import Comment from '../../components/comments/comment.vue';
import * as api from '../../assets/js/api';
import { reload } from '../../assets/js/navigate';

import { usePageContext } from '../../renderer/usePageContext';

const { pageData } = usePageContext();

const {
	shelf,
	post,
	comments,
} = pageData;

const newComment = ref('');

async function addComment() {
	await api.post(`/posts/${post.id}/comments`, {
		body: newComment.value,
		parentId: null,
	});

	reload();
}
</script>

<style scoped>
.page {
	display: flex;
	padding: .5rem;
}

.title {
	margin: 0 0 .5rem 0;
}

.body {
	flex-grow: 1;
}

.post {
	margin-bottom: .5rem;
}

.writer {
	width: 40rem;
	background: var(--background);
	padding: .5rem;
	border-radius: .5rem;
	margin-bottom: .5rem;

	.input {
		width: 100%;
		margin-bottom: .25rem;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
	}
}

.sidebar {
	background: var(--background);
	width: 20rem;
	padding: .5rem;
	border-radius: .5rem;
	margin-left: .5rem;
}
</style>
