<script lang="ts">
    const { data } = $props();

    import Toc from './toc.svelte'
	import Share from './share.svelte'
	import Profile from './profile.svelte'
	import { base } from '$app/paths';
	import { PUBLIC_HOSTNAME, PUBLIC_POST_REPO } from '$env/static/public';
	import { onMount } from 'svelte';

	import '$lib/components/rainbow.css';
	import '$lib/components/Markdown.css';

	const baseURL = `https://${PUBLIC_HOSTNAME}${base}`

	onMount(()=>{
        let toggleHide = function(e:MessageEvent){
            if (e.data.message === 'toggleHide') {
                let iframes = document.querySelectorAll('.markdown iframe')

                for ( let i = 0; i < iframes.length; i++ ){
                    let frame = iframes[i]
                    
                    if (frame instanceof HTMLIFrameElement && new URL(frame.src).origin === window.origin && frame.contentWindow?.name == e.data.id){
                        iframes[i].classList.toggle('hide')
                    }
                }
            }
        }
        window.addEventListener('message', toggleHide)


		document.getElementById('blog')?.addEventListener('click',(e:MouseEvent)=>{
			if (e.target instanceof HTMLElement && e.target.matches('pre')) {
				let code = e.target.textContent || '';
				navigator.clipboard.writeText(code)
			}
		})

		// リスナ解除
        return ()=>{window.removeEventListener('message', toggleHide)}
    })
</script>


<svelte:head>
	<title>{data.metadata.title} | moris.day Blog</title>
	<meta name="description" content="{data.metadata.description}"/>

	<meta property="og:url" content="{baseURL}/post/{data.id}"/>
	<meta property="og:title" content="{data.metadata.title}"/>
	<meta property="og:description" content="{data.metadata.description}"/>
	<meta property="og:type" content="article"/>
	<meta property="og:locale" content="ja_JP"/>
	{#if data.metadata.thumbnail && data.metadata.thumbnail.endsWith('.svg')}
		<meta property="og:image" content="{data.metadata.thumbnail}"/>
	{:else}
		<meta property="og:image" content="https://moris.day/apple-touch-icon.png"/>
	{/if}

	{#if !data.metadata.index}
		<meta name="robots" content="noindex"/>
	{/if}
</svelte:head>


<div id='blog'>
	<article>
		<h1 class="title">{data.metadata.title}</h1>

		<div class="meta">
			<div class="category">
				<span class="txt">Category:</span>
				<a class="tag" href='/blog/category/{data.metadata.category}'>{data.metadata.category}</a>
			</div>

			{#if data.metadata.tags.length}
			<div class="divider"></div>

			<div class="tags">
				<span class="txt">Tags:</span>
				{#each data.metadata.tags as tag}
					<a class='tag' href='/blog/tag/{tag}'>{tag}</a>
				{/each}
			</div>
			{/if}
			
			<div class="date">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
				<span>{data.metadata.date.toLocaleDateString('sv-SE')}</span>
			</div>
		</div>

		{#if data.metadata.thumbnail}
			<img class="thumbnail" alt="thumbnail" src="{data.metadata.thumbnail}" style='view-transition-name: {data.id}'>
		{:else if data.metadata.emoji}
			<div class='thumbnail emoji'><img class="emoji" alt="thumbnail" src="{data.metadata.emoji}" style='view-transition-name: {data.id}'></div>
		{/if}

		<div class='markdown'>
			{@html data.post}
		</div>

		<div class="data">
			{#if PUBLIC_POST_REPO}
				<div><a target="_blank" href="{PUBLIC_POST_REPO}/commits/branch/main/Posts/{data.id}.md">History</a></div>
				<div class="spacer"></div>
			{/if}
			<div><a target="_blank" href="raw.md">Raw file</a></div>
		</div>
	</article>

	<aside>
		<div id='side'>
			<div>
				<Profile></Profile>
			</div>
			<div>
				<Share share={{url:`${baseURL}/post/${data.id}`, title:data.metadata.title}} />
			</div>
			{#if data.heading.length!=0}
				<div id='toc'>
					<Toc toclist={data.heading}></Toc>
				</div>
			{/if}
			<div class="mi-posts js">
				<!-- <iframe src="https://mi.moris.day/embed/user-timeline/9w7bhjzt2b5z0001?maxHeight=320&rounded=false&border=false" title="moris's posts" loading="lazy" style="border:none; width:100%; height:100%;"></iframe> -->
			</div>
		</div>
	</aside>
</div>


<style>
	#blog {
		display: flex;
        margin: 25px 2.5%;
		gap: 20px;
	}
	aside {
		min-width: 280px;
		max-width: 320px;

		@media (width<1000px) {
			display: none;
		}
	
		& #side {
			display: flex;
			flex-direction: column;
			row-gap: 20px;
			position: sticky;
			top: 70px;
		}
		& #side>* {
			background-color: var(--grid-color);
			transition: background-color 1s;
			border-radius: 8px;
			box-shadow: 0 0 6px #1111;
			overflow: hidden;
		}

		& .mi-posts {
			height: 320px;
			@media(prefers-color-scheme: dark) {
				border: solid #444 1px;
			}
		}
	}

	article {
		min-width: 0;
		max-width: 60rem;
		margin: 0 auto;
		flex-grow: 1;
		padding: 0 20px;
		border-radius: 8px;
		@media(width<480px){
			padding: 0;
		}

		& .title {
			font-size: 2em;
			font-weight: 600;
			margin: 0;
			padding: 5px;
			border-bottom: 1px solid;
			@media(width<480px) {
				font-size: 1.5em;
			}
		}
		& .thumbnail {
			display: block;
			margin: 0 auto;
			max-height: 50vh;
		}
		& img.thumbnail {
			height: 35vh;
			max-width: 100%;
			object-fit: contain;
		}
		& .emoji.thumbnail {
			width: 30%;
			max-width: 30vh;
			aspect-ratio: 1;
			@media(width<480px) {
				width: 50%;
			}
			& img {
				margin: 15%;
			}
		}
		& .markdown {
			margin: 25px 0;
			@media (width<480px) {
				margin: 8px;
			}
		}
		& .data {
			display: flex;
			padding: 8px;
			border-top: solid 1px;
			font-weight: 200;
			font-size: 1.2em;
			& .spacer {
				width: 1px;
				background-color: var(--font-color);
				box-sizing: border-box;
				margin: 2px 6px;
			}
			& a {
				margin: 4px;
				color: var(--font-color);
				text-decoration-thickness: 1px;
			}
		}
	}

	.meta {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto auto 1fr auto;
		gap: 8px;
		font-size: 0.95em;
		margin: 8px;
		white-space: nowrap;

		@media(width<1000px) {
			flex-direction: column;
		}

		& .category {
			grid-row: 1;
			grid-column: 1;
		}

		& .tags {
			grid-row: 1;
			grid-column: 3;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			@media(width<1000px) {
				grid-row: 2;
				grid-column: 1 / 5;
			}
			@media(width<480px){
				display: inline-block;
				grid-row: 1;
				grid-column: 3;
			}
		}

		& .tag {
			display: inline-block;
			background-color: var(--theme-color);
			color: var(--font-color);
			border-radius: 3px;
			padding: 0 4px 1px 4px;
			margin: 3px;
		}

		& .divider {
			display: inline-block;
			width: 1px;
			margin: 3px 0;
			background-color: var(--font-color);
			grid-row: 1;
			grid-column: 2;
			@media(480px<width<1000px){
				display: none;
			}
		}
		& .date{
			display: flex;
			grid-row: 1;
			grid-column: 4;
			vertical-align: middle;
			align-items: center;
			@media(width<480px){
				display: inline-block;
				grid-row: 2;
				grid-column: 1 / 5;
			}
		}
		& .date svg{
			height: 1rem;
			fill: var(--font-color);
			vertical-align: middle;
		}
		@media(width<480px) {
			& .txt {display: none;}
		}
	}
</style>