<script>
	const tech_table_lookup = (to_lookup, techTable) => {
		let tech_to_return = {
			tech_name: 'Not in table',
			tech_logo: '',
			project_site: '',
			skill_level: 0
		};

		for (let tech of techTable) {
			if (tech.tech_name === to_lookup) {
				tech_to_return = tech;
				break; // Optional: stop the loop once the match is found
			}
		}

		return tech_to_return;
	};

	let {
		website_link,
		github_link,
		gitea_link,
		dockerhub_link,
		project_name,
		techs_used,
		project_des,
		project_img = 'https://picsum.photos/200',
		techTable
	} = $props();
</script>

<div class="project-card" key={project_name + techs_used}>
	<img src={project_img} alt="dashboard of project or the logo of the project" />
	<div class="project-title-info">
		<h3>{project_name}</h3>
		<div>
			{#if github_link}
				<a href={github_link}>
					<img
						class="lookup"
						src={tech_table_lookup('Github', techTable).tech_logo}
						alt={{ techs_used } + "'s logo/icon"}
					/>
				</a>
			{/if}

			{#if gitea_link}
				<a href={gitea_link} class="gitea">
					<img
						class="lookup"
						src={tech_table_lookup('Gitea', techTable).tech_logo}
						alt={{ techs_used } + "'s logo/icon"}
					/>
				</a>
			{/if}
			{#if dockerhub_link}
				<a href={dockerhub_link} class="dockerhub">
					<img
						class="lookup"
						src={tech_table_lookup('Docker', techTable).tech_logo}
						alt={{ techs_used } + "'s logo/icon"}
					/>
				</a>
			{/if}
			{#if website_link}
				<a href={website_link}>
					<img
						class="lookup"
						src={tech_table_lookup('Internet', techTable).tech_logo}
						alt={{ techs_used } + "'s logo/icon"}
					/>
				</a>
			{/if}
		</div>
	</div>
	<div>
		<p>{project_des}</p>
	</div>
	<div class="project-tech-logos">
		{#each techs_used as tech, index}
			<img
				key={tech + index}
				src={tech_table_lookup(tech, techTable).tech_logo}
				alt={{ techs_used } + "'s logo/icon"}
			/>
		{/each}
	</div>
</div>

<style>
	.project-card {
		flex: 0 1 30%;
		margin-bottom: 3svh;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
	}

	@media only screen and (max-width: 800px) {
		.project-card {
			flex: 0 1 auto;
		}
	}

	.project-card img {
		max-width: 96%;
		max-height: 200px;

		justify-self: center;

		margin: 0svh 0svw;
		padding-top: 1svh;
		object-fit: contain;
		color: transparent;
		display: flex;
	}

	.project-title-info {
		display: flex;
		flex-direction: row;

		height: 50px;

		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		margin: 0px 2svw;
		padding: 0px 2svw;
		padding-right: 0px;

		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}
	.project-title-info h3 {
		margin: 0px;
		text-align: start;
		white-space: nowrap;
		align-self: center;
		font-weight: normal;
		text-wrap: wrap;
		border-radius: var(--underlineTitleBorderRadius);
	}

	.lookup {
		height: var(--img-width);
		width: var(--img-height);
		margin: 1svh 6px;
		padding: 0px;
		filter: invert() hue-rotate(180deg);
	}

	.gitea .lookup {
		filter: grayscale(100%) invert(100%) brightness(2.5);
	}

	.dockerhub .lookup {
		filter: grayscale(100%) invert(100%) brightness(2.5);
	}

	.lookup:hover {
		filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%) hue-rotate(187deg)
			brightness(95%) contrast(90%);
	}

	.gitea .lookup:hover {
		filter: grayscale(100%) invert(165%) sepia(15%) saturate(733%) hue-rotate(185deg)
			brightness(1.3) contrast(90%) saturate(100%);
	}

	.dockerhub .lookup:hover {
		filter: grayscale(100%) invert(165%) sepia(15%) saturate(733%) hue-rotate(185deg)
			brightness(1.3) contrast(90%) saturate(100%);
	}

	.project-title-info div {
		display: flex;
		gap: 20px;
		justify-content: flex-end;
		border-bottom: none;
		margin: 0svh 10px;
	}

	.project-card div p {
		display: flex;
		width: 90%;
		justify-self: center;
		text-align: start;
	}

	.project-tech-logos {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		align-self: center;
		width: 90%;
		justify-content: flex-start;
		column-gap: 0.5svw;
		row-gap: 1svw;
		padding-left: 2svw;
		padding-bottom: 1svh;
	}

	.project-tech-logos img {
		aspect-ratio: 1;
		height: var(--img-width);
		width: var(--img-height);
	}
</style>
