<script lang="ts">
	import type { PageProps } from './$types';
	import type { Posting } from '$lib/types';
	import { employmentTypeDisplayName, userState } from '$lib/shared.svelte';
	import { PERMISSIONS } from '$lib/consts';

	const dateFormatOptions: Intl.DateTimeFormatOptions = {
		year: 'numeric',
		month: 'short',
		day: 'numeric'
	};

	function logoFallback(e: Event, posting: Posting) {
		(e.target as HTMLImageElement).src =
			`https://ui-avatars.com/api/?background=random&format=svg&name=${encodeURIComponent(posting.company.name || 'COMPANY')}`;
	}

	let { data }: PageProps = $props();
</script>

<div class="base-container-small">
	<div class="content">
		<div class="elevated separator-borders ml-4 mt-4 inline-block h-min w-full rounded p-4">
			<div class="bottom-border elevated-bg flex justify-between pb-2">
				<div class="inline-block">
					<img
						class="inline-block rounded"
						src="/uploads/logos/{data.posting.companyId || 'default'}.svg"
						alt="Company Logo"
						height="64"
						width="64"
						onerror={(e) => logoFallback(e, data.posting)}
					/>
					<div class="inline-block pl-2 align-top">
						<h1>{data.posting.title}</h1>
						<h2>Company: {data.posting.company.name}</h2>
					</div>
				</div>
				{#if userState.perms >= 0 && ((userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0 || ((userState.perms & PERMISSIONS.SUBMIT_POSTINGS) > 0 && userState.companyId === data.posting.company.id))}
					<a
						class="dull-primary-bg-color inline-block h-min rounded-md px-2.5 py-1 align-top"
						href="/postings/{data.posting.id}/manage">Manage posting</a
					>
				{:else if (userState.perms & PERMISSIONS.APPLY_FOR_JOBS) > 0}
					<a
						class="dull-primary-bg-color inline-block h-min rounded-md px-2.5 py-1 align-top"
						href="/postings/{data.posting.id}/apply">Apply</a
					>
				{/if}
			</div>
			<div class="scrollbar-on-elevated details-height overflow-y-scroll">
				<h2 class="pt-2 font-semibold">Contact</h2>
				<p>{data.posting.employer?.fullName} ({data.posting.employer?.username})</p>
				<a class="hover-hyperlink" href="mailto:{data.posting.employer?.email}"
					>{data.posting.employer?.email}</a
				>
				<a class="hover-hyperlink" href="tel:{data.posting.employer?.phone}"
					>{data.posting.employer?.phone}</a
				>
				<h2 class="pt-2 font-semibold">Details</h2>
				{#if data.posting.employmentType}
					<p>{employmentTypeDisplayName(data.posting.employmentType)}</p>
				{/if}
				{#if data.posting.address}
					<a
						href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
						class="block w-max"
						>Address: <span class="hover-hyperlink">{data.posting.address}</span></a
					>
				{/if}
				{#if data.posting.wage}
					<p>Wage: {data.posting.wage}</p>
				{/if}
				{#if data.posting.createdAt}
					<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
				{/if}
				{#if data.posting.link}
					<a href={data.posting.link} class="block w-max"
						>More information: <span class="hyperlink-color hyperlink-underline"
							>{data.posting.link}</span
						></a
					>
				{/if}
				{#if data.posting.flyerLink}
					<a href={data.posting.flyerLink} class="block w-max"
						>Flyer: <span class="hyperlink-color hyperlink-underline">{data.posting.flyerLink}</span
						></a
					>
				{/if}
				<h2 class="pt-2 font-semibold">Job Description</h2>
				<p class="whitespace-pre-wrap">{data.posting.description}</p>
			</div>
		</div>
	</div>
</div>
