<template>
	<Dialog v-if="pg" v-model="show">
		<!-- Title -->
		<template v-slot:body-title>
			<h1 class="font-semibold">
				{{ pg.title }}
			</h1>
		</template>

		<!-- Message and Traceback -->
		<template v-slot:body-content>
			<div
				:if="pg.message"
				v-html="pg.message"
				class="flex flex-col gap-2 whitespace-pre-wrap text-p-base text-gray-700"
			></div>

			<div v-if="pg.traceback" class="relative mt-6">
				<button
					class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-white p-1 text-xs text-gray-600"
					variant="outline"
					@click="copyTraceback"
				>
					{{ copied ? 'copied' : 'copy' }}
				</button>
				<div
					class="max-h-48 w-full overflow-scroll rounded-sm border border-gray-200 bg-gray-100 p-3 text-xs text-gray-600"
				>
					<pre>{{ pg.traceback }}</pre>
				</div>
			</div>

			<ErrorMessage :message="error" class="mt-2"></ErrorMessage>
		</template>

		<!-- Help and Done -->
		<template v-slot:actions>
			<div class="flex justify-end gap-5">
				<Link v-if="pg.assistance_url" class="cursor-pointer" @click="help">
					Help
				</Link>

				<Button
					v-if="!pg.is_addressed"
					variant="solid"
					class="w-40"
					@click="done"
				>
					Done
				</Button>
			</div>
		</template>
	</Dialog>
</template>
<script>
import { Button, Dialog, FeatherIcon, ErrorMessage } from 'frappe-ui';

export default {
	props: {
		name: String,
	},
	components: {
		Dialog,
		Button,
		FeatherIcon,
	},
	emits: ['done'],
	data() {
		return {
			helpViewed: false,
			show: true,
			copied: false,
			error: '',
		};
	},
	resources: {
		notification() {
			return {
				type: 'document',
				doctype: 'Press Notification',
				name: this.name,
				whitelistedMethods: {
					markAsAddressed: 'mark_as_addressed',
				},
			};
		},
	},
	computed: {
		pg() {
			return this.$resources.notification.pg ?? null;
		},
	},
	methods: {
		async copyTraceback() {
			await navigator.clipboard.writeText(this.pg.traceback);
			this.copied = true;
			setTimeout(() => (this.copied = false), 4000);
		},
		async done() {
			if (this.pg.assistance_url && !this.helpViewed) {
				this.error =
					'Please follow the steps mentioned in <i>Help</i> before clicking Done';
				return;
			}

			await this.$resources.notification.markAsAddressed.submit();
			this.show = false;
			this.$emit('done');
		},
		help() {
			this.error = '';
			this.helpViewed = true;
			window.open(this.pg.assistance_url, '_blank');
		},
	},
};
</script>
