<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
	<div :class="$style.userTimelineRoot">
		<MkLoading v-if="loading"/>
		<template v-else-if="user">
			<div v-if="normalizedShowHeader" :class="$style.userHeader">
				<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
					<MkAvatar :class="$style.avatar" :user="user"/>
				</a>
				<div :class="$style.headerTitle">
					<I18n :src="i18n.ts.noteOf" tag="div">
						<template #user>
							<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
								<Mfm :text="user.name ?? `@${user.username}`" :plain="true"/>
							</a>
						</template>
					</I18n>
					<div :class="$style.sub"></div>
				</div>
				<a :href="url" :class="$style.instanceIconLink" target="_blank" rel="noopener noreferrer">
					<img
						:class="$style.instanceIcon"
						:src="instance.iconUrl || '/favicon.ico'"
					/>
				</a>
			</div>
			<MkNotes
				:class="$style.userTimelineNotes"
				:pagination="pagination"
				:noGap="true"
				:ad="false"
			/>
		</template>
		<XNotFound v-else/>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import * as Misskey from 'misskey-js';
import MkNotes from '@/components/MkNotes.vue';
import XNotFound from '@/pages/not-found.vue';
import type { Paging } from '@/components/MkPagination.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { url } from '@/config.js';

const props = defineProps<{
	username: string;
	showHeader?: string;
}>();

const normalizedShowHeader = computed(() => props.showHeader !== 'false');

const user = ref<Misskey.entities.UserLite | null>(null);
const pagination = computed(() => ({
	endpoint: 'users/notes',
	params: {
		userId: user.value?.id,
	},
} as Paging));
const loading = ref(true);

misskeyApi('users/show', {
	username: props.username,
}).then(res => {
	user.value = res;
	loading.value = false;
}).catch(err => {
	console.error(err);
	loading.value = false;
});
</script>

<style lang="scss" module>
.userTimelineRoot {
	background-color: var(--panel);
	height: 100%;
	max-height: var(--embedMaxHeight, none);
	display: flex;
	flex-direction: column;
}

.userHeader {
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: var(--margin);
	border-bottom: 1px solid var(--divider);

	.avatar {
		display: inline-block;
		width: 32px;
		height: 32px;
	}

	.headerTitle {
		font-weight: 700;

		.sub {
			font-size: 0.8em;
			font-weight: 400;
			opacity: 0.7;
		}
	}

	.instanceIconLink {
		display: block;
		margin-left: auto;
	}

	.instanceIcon {
		height: 24px;
		border-radius: 4px;
	}
}

.userTimelineNotes {
	flex: 1;
	overflow-y: auto;
}
</style>
