<script>
	import ProjectsCard from './projectsCard.svelte';

	let { independent_page = true, techTablePromise = null } = $props();

	let limitProjects = $derived(independent_page ? 0 : 8);

	let projectsPromise = $state(null);
	let techPromise = $state(null);

	$effect(() => {
		projectsPromise = (async () => {
			try {
				const res = await fetch(
					`https://darkicewolf50cloud.bajacloud.duckdns.org/projects/${limitProjects}`
				);
				if (!res.ok) return null;

				return await res.json();
			} catch (e) {
				console.error('Fetch error:', e);
				return -1;
			}
		})();

		if (independent_page) {
			techPromise = (async () => {
				try {
					const res = await fetch('https://darkicewolf50cloud.bajacloud.duckdns.org/home/skills');

					if (!(await res.ok)) return null;
					return await res.json();
				} catch (e) {
					console.error('Fetch error:', e);
					return -1;
				}
			})();
		} else {
			techPromise = techTablePromise ?? Promise.resolve(-1);
		}
	});
</script>

{#if independent_page}
	<title>Brock Tomlinson - Projects</title>
{/if}
<div>
	<h2>Projects</h2>
	<p>Top Featured and Recent Projects</p>
</div>
<div class="project-section">
	{#await Promise.all([projectsPromise, techPromise])}
		<p>Loading...</p>
	{:then [projects, techTable]}
		{#if projects === -1 || techTable === -1}
			<p>An Error has occurred</p>
		{:else if projects != null && techTable != null}
			{#each projects as project, projectIndex}
				<ProjectsCard
					key={project.project_name + projectIndex}
					{techTable}
					project_name={project.project_name}
					website_link={project.website_link}
					github_link={project.github_link}
					gitea_link={project.gitea_link}
					dockerhub_link={project.dockerhub_link}
					techs_used={project.techs_used}
					project_des={project.project_des}
					project_img={project.project_img}
				/>
			{/each}
		{:else}
			<ProjectsCard
				project_name="Portfolio Site Version 3.0.0"
				website_link="https://darkicewolf50.pages.dev"
				gitea_link="https://gitea.bajacloud.duckdns.org/darkicewolf50/darkicewolf50"
				project_img="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745630861/Portfolio_site_k4mhmj.png"
				techs_used={['JavaScript', 'CSS', 'SvelteKit', 'Git', 'Gitea']}
				project_des="A conversion from Dioxus to Sveltekit is going to be worth it as it is significantly easier to add additional api calls.
		This is not to mention the benefits of using ssg instead of a client side rendered app.
		Overall this was a great way to dive into a great JavaScript framework."
			/>
			<ProjectsCard
				project_name="Personal Backend"
				gitea_link="https://gitea.bajacloud.duckdns.org/darkicewolf50/darkicewolf50Cloud"
				dockerhub_link="https://hub.docker.com/r/darkicewolf50/darkicewolf50cloud"
				project_img="https://actix.rs/img/logo.png"
				techs_used={[
					'Rust',
					'Actix',
					'Github Actions',
					'Docker',
					'Traefik',
					'Gitea',
					'Git',
					'Github'
				]}
				project_des="I find that this is a much better option in compareision to FastAPI as it does not require a post request
            to input data instead it give the option for the url to give the parameters it needs. I don't have any complains about using Actix, its mature stable and fairly popular. 
            This backend application also uses comrak to convert markdown blogs into html docuemnts that are then seen by you the user. 
            This honestly was a fun challenge getting the blogs previews, ensuring correctness and not allowing for any unknown states, 
            this will serve as a great basis for any future backend requirements that I may have."
			/>
			<ProjectsCard
				project_name="Portfolio Site Version 2.0.1"
				website_link="https://darkicewolf50.pages.dev"
				gitea_link="https://gitea.bajacloud.duckdns.org/darkicewolf50/personal_site"
				project_img="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745630861/Portfolio_site_k4mhmj.png"
				techs_used={['Rust', 'CSS', 'Dioxus', 'Git', 'Gitea']}
				project_des="This project was a great test of my newly learned Rust.
            This major update added functionality for the contact me, the blogs part of the site, as well as many minor 
            UI consistencies to ensure that all of the buttons and links felt like buttons and links.
            I was surprise how easy it was to set up a discord webhook using the 'reqwest' crate. 
            As I continue on I find myself struggling with how and why to use databases for content I generate. 
            I think using tools like disocrd webhooks and email notifications are great for users but certainly not great for reading data from. 
            I was very satisfied with serde, and comrak for converting markdown files into html. 
            I use this extensively for the blogs search menu and the blog itself to display the blog itself in a consistent way without needing to write a whole library."
			/>
			<ProjectsCard
				project_name="Portfolio Site 1.0.0"
				website_link="https://darkicewolf50.github.io"
				github_link="https://github.com/darkicewolf50/darkicewolf50.github.io"
				project_img="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745630861/Portfolio_site_k4mhmj.png"
				techs_used={['Rust', 'CSS', 'Dioxus', 'Git', 'Github']}
				project_des="This project was a great test of my newly learned Rust.
                It was certainly interesting to go through all of the stages of front end web developement, while the orignal and new found scope is not currently achieved, it will be on a later pass through.
                I am very happy with how it turned out in compairison to my origanl site map, and wireframes.
                Considering this phase one was accomplished in 3 working days I believe it is an excellent show of my skill."
			/>
			<ProjectsCard
				project_name="UCalgary Baja Backend"
				project_img="https://www.svgrepo.com/show/448221/docker.svg"
				dockerhub_link="https://hub.docker.com/r/darkicewolf50/uofcbajacloud"
				techs_used={['Python', 'FastAPI', 'Github Actions', 'Docker', 'Traefik', 'Git', 'Github']}
				project_des="This is going to be extremely cost saving for the non-profit club UCalgary Baja.
                Using automated uploads and linting to check the Python and FastAPI code was excellent for learning how to self-host a web server.
                This was then upgraded later with the addition of treafik so that it could be SSL certified, this is also known as supporting HTTPS transmissions.
                Ultimately it will serve as a great stepping stone for both myself an anyone else in UCalgary Baja Software subteam. 
                This will lead into using Actixs in the migration Soon™ to be."
			/>
			<ProjectsCard
				project_name="UCalgary Baja Website"
				website_link="https://uofcbaja.pages.dev"
				project_img="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745633714/ucalgary-baja-site-April.png"
				techs_used={[
					'HTML5',
					'CSS',
					'JavaScript',
					'Markdown',
					'YAML',
					'React',
					'Git',
					'Github',
					'Cloudflare'
				]}
				project_des="The flexibility that we achieved using React,
                rather than a locked down platform or framework has allows all the Software members of UCalgary Baja to learn infinitely more.
                This isn't to say that it is faster or have additional perks of using 'non-code website builders'. 
                This is provided massive opportunities to learn teach and save on cost compaired to the website builders. 
                Overall I would say this will be worth it in the long run and opened my eyes to different website hosting providers, 
                with their associated perks and costs.
                When we change it, it will most likely we re-written in Vue as there is a good non-depreciated way to initalize the framework."
			/>
		{/if}
	{/await}
</div>

<style>
	.project-section {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 1svw;
	}
</style>
