import "./style.css";

import hero from "./assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture";

import CV from "./assets/cv.svg?react";
import Git from "./assets/git.svg?react";
import GitHub from "./assets/github.svg?react";
import LinkedIn from "./assets/linkedin.svg?react";
import Mastodon from "./assets/mastodon.svg?react";
import DarkModeToggleIcon from "./assets/darkmodetoggle.svg?react";

type ColouredBlockProps = {
	colorNum: number;
};

const ColouredBlock = ({ colorNum }: ColouredBlockProps) => (
	<span style={{ color: `var(--color${colorNum})` }}>███</span>
);

type ColouredLineProps = {
	light: boolean;
};

const ColouredLine = ({ light }: ColouredLineProps) => {
	const startIndex = light ? 8 : 0;
	return (
		<p className="blocks">
			{Array.from({ length: 8 }).map(
				(
					_value,
					index, // Apparently this is the best way to map a range in JavaScript
				) => (
					<ColouredBlock colorNum={startIndex + index} key={index} />
				),
			)}
		</p>
	);
};

// TODO: Automate screenshot of info for thumbnail?
const Fetch = () => {
	return (
		<div id="fetch-container">
			<div id="fetch">
				<div id="michael-photo-container">
					<picture>
						{Object.entries(hero.sources).map(([format, src]) => (
							<source srcSet={src} type={`image/${format}`} key={format} />
						))}
						<img src={hero.img.src} alt="A picture of me in a suit smiling" id="michael-photo" />
					</picture>
				</div>
				<div id="basic-info">
					<div className="invisible-div">
						<p>
							<span className="text-highlight">website</span>@<span className="text-highlight">MichaelBradley</span>
						</p>
						<p>----------------------</p>
						<p>
							<span className="text-highlight">Degree</span>: Bachelor of Computer Science
						</p>
						<p>
							<span className="text-highlight">University</span>: Carleton
						</p>
						<p>
							<span className="text-highlight">Major CGPA</span>: 11.52/12 (A+)
						</p>
						<p>
							<span className="text-highlight">Languages</span>: C/C++, Python, TypeScript
						</p>
						<p>
							<span className="text-highlight">Skills</span>: Linux, Git, Testing
						</p>
						<p>
							<span className="text-highlight">Work Experience</span>: 2 years
						</p>
						<p>
							<span className="text-highlight">Applying for</span>: Full-time job
						</p>
						<p>
							<span className="text-highlight">Location</span>: Toronto or Remote
						</p>
					</div>
					<p>
						<br />
					</p>
					<ColouredLine light={false} />
					<ColouredLine light={true} />
				</div>
			</div>
		</div>
	);
};

const Links = () => (
	<div className="links">
		<a href="https://git.mmbradley.ca/MichaelBradley" title="Forgejo instance">
			<Git />
		</a>
		<a href="https://github.com/MichaelMBradley" title="GitHub account">
			<GitHub />
		</a>
		<a href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account">
			<LinkedIn />
		</a>
		<a href="https://mmbradley.ca/resume.pdf" title="My Résumé">
			<CV />
		</a>
		<a rel="me" href="https://mstdn.ca/@michaelbradley" title="Mastodon account">
			<Mastodon />
		</a>
		<input id="dark-mode-toggle" type="checkbox" aria-label="Toggle dark mode" />
		<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode">
			<DarkModeToggleIcon />
		</label>
	</div>
);

const Body = () => {
	return (
		<>
			<Fetch />
			<Links />
		</>
	);
};

export default Body;