<script lang="ts">
	import type { PageData } from './$types';
	import Cursor from '$lib/components/cursor.svelte';
	import Footer from '$lib/components/footer.svelte';
	import FormattedDate from '$lib/components/formatted_date.svelte';

	export let data: PageData;

	let refresh = true;
	let searchInput: HTMLInputElement;
	let suggest: HTMLDivElement;
	const emojis = ['( ᐢ˙꒳˙ᐢ )', '(=`•ω•´)', '₍ᐢ｡•༝•｡ᐢ₎', 'ヽ(･ω･*)', '( |||| ᐢ˙꒳˙ᐢ )'];
	const searchChange = (e: Event) => {
		if (refresh === false) return;
		const value = (e.target as HTMLInputElement).value;
		if (value.length === 0) return;
		refresh = false;
		let xhr = new XMLHttpRequest();
		// xhr.open('GET', `/api/search?q=${value}`);
		// xhr.send();
		// xhr.onload = () => {
		//     setTimeout(() => {q
		//         refresh = true;
		//     }, 1000);
		// };
		setTimeout(() => {
			suggest.textContent = emojis[Math.floor(Math.random() * emojis.length)] + 'ﾐｼﾞｯｿｳﾀﾞﾖ...';
			setTimeout(() => {
				refresh = true;
			}, 1000);
		}, Math.random() * 100);
	};
	const searchKeydown = (e: KeyboardEvent) => {
		if (e.key !== 'Enter') return;
		// const input = e.target as HTMLInputElement;
		// const value = input.value;
		// if (value.length > 0) {
		//     window.location.href = `/search?s=${value}`;
		// }
		suggest.textContent = emojis[Math.floor(Math.random() * emojis.length)] + 'ｱﾝ?';
	};
</script>

<svelte:head>
	<title>Home | Blog | HareWorks</title>
	<meta name="description" content="Hareの個人ブログです。" />
	<meta property="og:title" content="Home - HareWorks" />
	<meta property="og:description" content="Hareの個人ブログです。" />
	<meta property="og:image" content="/img/logo.png" />
	<meta property="og:url" content={`https://blog.hare.works/`} />
</svelte:head>

<div class="container">
	<div class="controls"></div>
	<main>
		<h1>blog.hareworks.net</h1>
		<p>
			このブログはHareの個人ブログです。プログラミング、情報技術全般、デザイン、その他興味のあることについて書いています。
		</p>
		<div class="links">
			<ul>
				<li><a href="/about">ABOUT</a></li>
				<li><a href="/contact">CONTACT</a></li>
				<li><a href="/discord" target="_blank">DISCORD</a></li>
			</ul>
		</div>
		<div class="notice">
			<p>( ᐢ˙꒳˙ᐢ ) ← cute</p>
		</div>
		<div class="serch">
			<div class="box">
				<input
					type="text"
					placeholder="Search"
					on:focus={() => {
						suggest.classList.remove('hidden');
					}}
					on:blur={() => {
						suggest.classList.add('hidden');
					}}
					on:input={searchChange}
					on:keydown={searchKeydown}
					bind:this={searchInput}
				/>
			</div>
			<div class="suggest hidden" bind:this={suggest}></div>
		</div>
		<div class="recent">
			<h2>RECENT<span>updated: <FormattedDate date={data.updated} /></span></h2>
			<ul>
				{#each data.recent as post}
					<li>
						<a
							href={post.link}
							on:mouseenter={(e) =>
								(e.target as HTMLAnchorElement).style.setProperty(
									'--mouse-position',
									`${e.offsetX}px`
								)}>{post.title}</a
						>
					</li>
				{/each}
			</ul>
		</div>
		<div class="tags">
			<h2>TAGS</h2>
			<ul>
				{#each data.tags as tag}
					<li>
						<button on:click={() => (searchInput.value = tag)}>{tag}</button>
					</li>
				{/each}
			</ul>
		</div>
		<Footer />
	</main>
</div>
<Cursor />

<style lang="scss">
	:global(body) {
		overflow: hidden;
		background-color: var(--background-primary);
		background-size: cover;
		background-blend-mode: overlay;
	}
	.container {
		overflow: hidden;
		width: 100vw;
		height: 100dvh;
		backdrop-filter: blur(2px);
		overflow-y: auto;
    overflow-x: hidden;
	}
	.controls {
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	main {
		border: 1px solid var(--line-primary);
		border-top: none;
		border-bottom: none;
		margin: 0 auto;
		padding: 60px 8px;
		box-sizing: border-box;
		width: 100%;
		max-width: 1000px;
		color: white;
		display: flex;
		flex-direction: column;
		overflow: visible;
		> div {
			margin: 10px 0;
		}
		h1 {
			font-size: 2rem;
			font-weight: 400;
			margin: 0;
			padding: 0;
		}
		p {
			width: 80%;
		}
		.links {
			margin-left: auto;
			width: 80%;
			ul {
				list-style: none;
				padding: 10px;
				margin: 0;
				display: flex;
				flex-direction: row;
				justify-content: end;
				gap: 4px;
				border-top: 1px solid var(--line-primary);
				li {
					backdrop-filter: blur(10px);
					padding: 0 3px 0 3px;
					a {
						text-decoration: none;
						color: white;
						box-sizing: border-box;
					}
				}
			}
		}
		.notice {
			padding: 5px 0;
			border-bottom: 1px solid var(--line-primary);
			p {
				padding: 15px 0;
				text-align: center;
				width: 100%;
				margin: 0;
				background-color: rgba(105, 105, 105, 0.1);
			}
		}

		.serch {
			width: 100%;
			.box {
				display: flex;
				&::before {
					content: ' ';
					position: relative;
					bottom: 0;
					left: 0;
					width: 30%;
					border-bottom: 1px solid var(--line-primary);
				}
				input[type='text'] {
					display: inline;
					width: 70%;
					margin-left: auto;
					box-sizing: border-box;
					padding: 10px;
					background-color: transparent;
					backdrop-filter: blur(10px);
					border: 1px solid var(--line-primary);
					border-bottom: none;
					border-right: none;
					color: white;
					&:active,
					&:focus {
						outline: none;
					}
				}
			}
			.suggest {
				display: block;
				margin-left: 30%;
				width: 70%;
				height: 30px;
				overflow: hidden;
				border-bottom: 1px solid var(--line-primary);
				transition: 0.5s ease-in-out;
				transition-property: height border-bottom;
				&.hidden {
					height: 0;
					border-bottom: 1px solid transparent;
				}
			}
		}
		h2 {
			display: block;
			font-size: 1.5rem;
			font-weight: 400;
			margin: 5px;
			padding: 0 20px 0 10px;
			border-left: 1px solid var(--line-primary);
			backdrop-filter: blur(10px);
			> span {
				padding-left: 30px;
				font-size: 0.8rem;
				color: rgba(255, 255, 255, 0.5);
			}
		}
		a {
			backdrop-filter: blur(10px);
			text-decoration: none;
			border-bottom: 1px solid var(--line-primary);
			color: white;
			box-sizing: border-box;
			--mouse-position: 0;
			&::after {
				content: ' ';
				position: absolute;
				bottom: 0;
				left: var(--mouse-position);
				right: calc(100% - var(--mouse-position));
				height: 1px;
				background-color: white;
				transition: 0.2s ease-in-out;
				transition-property: left right;
			}
			&:hover::after {
				left: 0px;
				right: 0px;
			}
		}
		button {
			font-size: 1rem;
			backdrop-filter: blur(10px);
			border: none;
			color: white;
			background-color: transparent;
			border-bottom: 1px solid transparent;
			&:hover {
				border-bottom: 1px solid var(--line-primary);
			}
		}
		ul {
			list-style: none;
			padding: 0 0 0 30px;
			margin: 0;
			li {
				padding: 5px 0;
			}
		}
		.recent {
			margin-top: 20px;
		}
		.tags {
			ul {
				display: flex;
        flex-wrap: wrap;
        justify-content: left;
        flex-direction: row;
				gap: 3px;
				li {
					font-size: 1rem;
					padding: 3px 5px;
          border: 1px solid var(--line-primary);
          border-radius: 5px;
				}
			}
		}
	}

	@media (max-width: 1000px) {
		main {
			width: 100%;
			flex-direction: column;
			gap: 20px;
		}
		.notice {
			p {
				padding: 10px 0;
			}
		}
	}
</style>
