use assetserver::Asset;
use maud::{Markup, html};

use crate::{
	components::{
		base::{BasePage, PageMetadata},
		md::Markdown,
		misc::Backlinks,
	},
	routes::assets::Image_Icon,
};

pub async fn handouts() -> Markup {
	let meta = PageMetadata {
		title: "Mark's Handouts".into(),
		author: Some("Mark".into()),
		description: None,
		image: Some(Image_Icon::URL.into()),
	};

	html! {
		(BasePage(
			meta,
			html!(
				(Backlinks(&[("/", "home")], "handouts"))

				(Markdown(MD_A))
			)
		))
	}
}

const MD_A: &str = r#"# Mark's Handouts

[ORMC]: https://circles.math.ucla.edu/circles

This page lists all the handouts I've written for my classes at the [ORMC],
arguably the best math circle in the western world. We teach students mathematics
far beyond the regular school curriculum, much like [AOPS](https://artofproblemsolving.com)
and the [BMC](https://mathcircle.berkeley.edu).

<br></br>

{style(color_var:pink) For my students: } \
Don't look at solutions we haven't discussed,
and don't start any handouts before class. That spoils all the fun!

{style(color_var:green) For everyone else:} \
If you're using any of these, please let me know---especially \
if you find errors, mistakes, or a poorly designed section. \
Such things must be fixed! { include(email_beta) }

<br></br>

## Overview & Context

Our classes are two hours long, with a ten-minute break in between. The lessons below
are written with this in mind.\
I do not expect the average student to finish all problems during this two-hour session.
If the class finishes early, the lesson is either too short or too easy.

<br></br>
<hr></hr>
<br></br>

## Warm-Ups

Students never show up on time. Some come early, some come late. Warm-ups
are my solution to this problem: we hand these out as students walk in,
giving them something to do until we can start the lesson.


<ul id="handout-ul-Warm-Ups" class="handout-ul"></ul>

<script>
	fetch("https://git.betalupi.com/api/packages/Mark/generic/ormc-handouts/latest/index.json")
		.then(res => res.json())
		.then(out => {
			out = out.sort((a, b) => (
				a["title"].toLowerCase() < b["title"].toLowerCase()
			));

			out.forEach(element => {
				if (element["group"] != "Warm-Ups") { return }

				// Handout title
				const title = document.createElement("span");
				const title_a = document.createElement("strong");
				title_a.appendChild(document.createTextNode(element["title"] + " "));
				title.appendChild(title_a)
				title.classList.add("handout-li-title");

				// Handout title
				const desc = document.createElement("span");
				desc.appendChild(document.createTextNode(element["description"]));
				desc.classList.add("handout-li-desc");

				const handout_link = element["handout"];
				const solutions_link = element["solutions"];

				const links = document.createElement("span");
				links.classList.add("handout-li-links");
				const h = document.createElement("a");
				h.appendChild(document.createTextNode("handout"))
				h.href = handout_link;
				if (solutions_link === null) {
					links.appendChild(document.createTextNode("[ "));
					links.appendChild(h);
					links.appendChild(document.createTextNode(" ]"));
				} else {
					var s = document.createElement("a");
					s.appendChild(document.createTextNode("solutions"))
					s.href = solutions_link;
					links.appendChild(document.createTextNode("[ "));
					links.appendChild(h);
					links.appendChild(document.createTextNode(" | "));
					links.appendChild(s);
					links.appendChild(document.createTextNode(" ]"));
				}



				// Add to main list
				const item = document.createElement("li");
				item.appendChild(title)
				item.appendChild(links);
				//item.appendChild(desc)
				const list = document.getElementById("handout-ul-Warm-Ups");
				list.insertBefore(item, list.children[0]);
			})}
		)
		.catch(err => {
			// Print fallback link if we failed to load json index
			console.log(err)

			const title = document.createElement("span");
			const title_a = document.createElement("strong");
			title_a.appendChild(document.createTextNode("Error: "));
			title.appendChild(title_a)
			title.appendChild(document.createTextNode("failed to load handouts, something broke."))
			title.classList.add("handout-li-title");

			const fallback = "https://git.betalupi.com/Mark/-/packages/generic/ormc-handouts/latest";
			const link = document.createElement("a");
			link.href = fallback
			link.appendChild(document.createTextNode("ormc-handouts"));

			const item_a = document.createElement("li");
			item_a.appendChild(title)
			const item_b = document.createElement("li");
			item_b.appendChild(document.createTextNode("Fallback link: "))
			item_b.appendChild(link)

			const list = document.getElementById("handout-ul-Warm-Ups");
			list.insertBefore(item_b, list.children[0]);
			list.insertBefore(item_a, list.children[0]);
			});
</script>



## Advanced

The highest level of the ORMC, and the group I spend most of my time with.
Students in ORMC Advanced are in high school, which means
they're ~14-18 years old.


<ul id="handout-ul-Advanced" class="handout-ul"></ul>

<script>
	fetch("https://git.betalupi.com/api/packages/Mark/generic/ormc-handouts/latest/index.json")
		.then(res => res.json())
		.then(out => {
			out = out.sort((a, b) => (
				a["title"].toLowerCase() < b["title"].toLowerCase()
			));

			out.forEach(element => {
				if (element["group"] != "Advanced") { return }

				// Handout title
				const title = document.createElement("span");
				const title_a = document.createElement("strong");
				title_a.appendChild(document.createTextNode(element["title"] + " "));
				title.appendChild(title_a)
				title.classList.add("handout-li-title");

				// Handout title
				const desc = document.createElement("span");
				desc.appendChild(document.createTextNode(element["description"]));
				desc.classList.add("handout-li-desc");

				const handout_link = element["handout"];
				const solutions_link = element["solutions"];

				const links = document.createElement("span");
				links.classList.add("handout-li-links");
				const h = document.createElement("a");
				h.appendChild(document.createTextNode("handout"))
				h.href = handout_link;
				if (solutions_link === null) {
					links.appendChild(document.createTextNode("[ "));
					links.appendChild(h);
					links.appendChild(document.createTextNode(" ]"));
				} else {
					var s = document.createElement("a");
					s.appendChild(document.createTextNode("solutions"))
					s.href = solutions_link;
					links.appendChild(document.createTextNode("[ "));
					links.appendChild(h);
					links.appendChild(document.createTextNode(" | "));
					links.appendChild(s);
					links.appendChild(document.createTextNode(" ]"));
				}



				// Add to main list
				const item = document.createElement("li");
				item.appendChild(title)
				item.appendChild(links);
				//item.appendChild(desc)
				const list = document.getElementById("handout-ul-Advanced");
				list.insertBefore(item, list.children[0]);
			})}
		)
		.catch(err => {
			// Print fallback link if we failed to load json index
			console.log(err)

			const title = document.createElement("span");
			const title_a = document.createElement("strong");
			title_a.appendChild(document.createTextNode("Error: "));
			title.appendChild(title_a)
			title.appendChild(document.createTextNode("failed to load handouts, something broke."))
			title.classList.add("handout-li-title");

			const fallback = "https://git.betalupi.com/Mark/-/packages/generic/ormc-handouts/latest";
			const link = document.createElement("a");
			link.href = fallback
			link.appendChild(document.createTextNode("ormc-handouts"));

			const item_a = document.createElement("li");
			item_a.appendChild(title)
			const item_b = document.createElement("li");
			item_b.appendChild(document.createTextNode("Fallback link: "))
			item_b.appendChild(link)

			const list = document.getElementById("handout-ul-Advanced");
			list.insertBefore(item_b, list.children[0]);
			list.insertBefore(item_a, list.children[0]);
			});
</script>


"#;