<script>
	//import { contributors, contributorTypes } from '$lib/data.json';
	import { base } from '$app/paths';
	import { onMount } from 'svelte';
	export let data;
	function wrapContributor(c) {
		if (c.twitter) {
			c.link = 'https://twitter.com/' + c.twitter;
		}
		return c;
	}

	onMount(async () => {
		const docrequest = await fetch('https://arweave.net/graphql', {
			method: 'POST',
			headers: {
				'Accept-Encoding': 'gzip, deflate, br',
				'Content-Type': 'application/json',
				Accept: 'application/json',
				Connection: 'keep-alive',
				DNT: '1',
				Origin: 'https://arweave.net'
			},
			body: JSON.stringify({
				query:
					'query {\n  transactions(\n    tags: [\n      { name: "AppName", values: "ETHBrno" }\n      { name: "DataTag", values: "json" }\n    ]\n    first: 1\n  ) {\n    edges {\n      node {\n        id\n      }\n    }\n  }\n}\n'
			})
		}).then((r) => r.json());
		const {
			data: {
				transactions: { edges }
			}
		} = docrequest;
		//console.log(edges[0].node.id);
		if (edges.length < 0) return;
		const response = await fetch(`https://arweave.net/${edges[0].node.id}`);
		const result = await response.json();
		data.contributors = result.contributors;
		console.log(data.contributors);
	});

	$: filteredContributors = data.contributors
		.filter((c) => data.type === 'all' || c.roles.includes(data.typeConfig.role))
		.sort((a, b) => 0.5 - Math.random())
		.map(wrapContributor);
</script>

<svelte:head>
	<title>Contributors{data.type !== 'all' ? `: ${data.typeConfig.title}` : ''} | ETHBrno²</title>
</svelte:head>

<section
	class="text-white body-font bg-black px-2 py-6 md:py-12 flex justify-center flex-row overflow-x-scroll flex-wrap text-sm md:text-base"
>
	{#each Object.entries(data.contributorTypes) as [ctKey, ct]}
		<a
			href="/contributors/{ctKey === 'all' ? '' : ctKey}"
			class="px-3 py-2 md:px-5 md:py-2 border m-2 {ctKey === data.type
				? 'text-black bg-white'
				: 'hover:outline-none hover:bg-gray-600'}">{ct.title}</a
		>
	{/each}
</section>
<section class="text-gray-400 body-font bg-black py-6 md:py-12">
	<div class=" px-5 mx-auto">
		<div class="flex flex-wrap justify-center" data-testid="list">
			{#if filteredContributors.length > 0}
				{#each filteredContributors as item}
					<div class="bg-black bg-opacity-40 p-6 h-full w-full md:w-1/3 lg:w-1/4">
						<a href={item.link} target="_blank">
							<img
								class="h-40 md:h-60 w-full object-cover object-center mb-6 grayscale hover:grayscale-0"
								loading="lazy"
								src={`/photos/contributors/${item.id}.jpg`}
								alt={item.desc}
							/>
						</a>
						<h3
							class="tracking-widest text-gray-400 text-xs font-medium title-font flex flex-row divide-x"
						>
							{#each item.roles as role}
								<span class="underline">{role}</span>
							{/each}
						</h3>
						<div class="flex flex-row mb-2 {item.remote ? 'contributor-remote' : ''}">
							<a class="text-lg text-white font-medium title-font" href={item.link} target="_blank">
								{item.name}
								{#if item.nickname}
									({item.nickname})
								{/if}
							</a>
						</div>

						<p class="leading-relaxed text-sm">{item.bio}</p>
					</div>
				{/each}
			{:else}
				<div class="p-6">Nobody's here yet.</div>
			{/if}
		</div>
	</div>
</section>
