import * as core from './_core.js';
import * as Prism from "../../node_modules/prismjs/prism";
import '../../node_modules/prismjs/components/prism-json';
import '../../node_modules/prismjs/components/prism-pug';
import '../../node_modules/prismjs/components/prism-sass';
import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";

import * as colours from "./_color-samples.js";

import * as swtch from "../pg/patterns/components/switch-core/_switch.js";
import * as stickynote from "../pg/patterns/components/sticky-note-core/_sticky-note.js";
import * as tabs from "../pg/patterns/layouts/tabs-core/_tabs.js";

const initComponents = (jQuery) => {
	swtch.init();
	tabs.init();
	stickynote.init();
}



// selectable content
jQuery.fn.OneClickSelect = function () {
	return jQuery(this).on('click', function () {
		// In here, "this" is the element
		var range, selection;
		if (window.getSelection) {
			selection = window.getSelection();
			range = document.createRange();
			range.selectNodeContents(this);
			selection.removeAllRanges();
			selection.addRange(range);
		} else if (document.body.createTextRange) {
			range = document.body.createTextRange();
			range.moveToElementText(this);
			range.select();
		}
	});
};



jQuery(document).ready(function($){
	
	if (core.url.p != undefined) {
		console.log("category:", core.url.p)
		$("main article:not([data-path^='" + core.url.p + "'])").remove();

		if (core.url.p == -1) {
			$("title").html(`${core.url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
		} else {
			$("title").html(`${core.url.p.substring(core.url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
		}
		
		console.log("get the 'directory'", (core.url.p.indexOf("/") == -1 ? core.url.p : core.url.p.substring(0, core.url.p.indexOf("/")) ));
		$(".main-nav nav ul li a[href='./?p=" + (core.url.p.indexOf("/") == -1 ? core.url.p : core.url.p.substring(0, core.url.p.indexOf("/")) ) + "']").parent().addClass("active");
	} else {
		$("header").addClass("show-feature");
		$(".main-nav nav ul li a[href='./']").parent().addClass("active");
	}

	// window.onresize = () => {
	// 	console.log("resize called")
	// 	initComponents($);
	// }

	let articles = $("article").length;
	$("article").each(function(k,v){
		if ($(this).attr("data-template") != "none") {
			let path = "patterns/" + $(this).attr("data-path") + ($(this).attr("data-core") == "true" ? "-core" : "") + "/index.html";
			console.log(path)
			$( "#" + $(this).attr("id") ).load(path, "", function(response, status, xhr){
				if ( status == "error" ) {
					$( "#" + $(this).attr("id") ).html(`<div class='notification-box error'><p>This pattern appears to be missing.<br><small>(${path} returned http status 404)</small></p></div>`);
				}
				articles--;
				if (articles == 0) {
					$("article").each(function(){
						try {
							$(this).prepend(`<h1 class="status-${$(this).attr("data-status")}"><span>${($(this).attr("data-display-text") != undefined ? $(this).attr("data-display-text") : $(this).attr("data-pattern").toContent().toSentenceCase())}<div role="tooltip" inert tip-position="right">${$(this).attr("data-status").toContent().toSentenceCase()}</div></span></h1>`);
						} catch (e) {
							console.log("Problem creating heading", $(this).attr("data-pattern"));
							$(this).prepend(`<div class='notification-box warning'><h1>Problem creating heading</h1><p>The content we found for this header was: ${$(this).attr("data-pattern")}. Check that the data-pattern attribute on the article is set properly. Also check that there is no article tag inside the article.</p></div>`);
						}
						switch ($(this).attr("data-template")) {
							case "pug": 
								$(this).find("pre").each(function(){
									$(this).wrapInner("<code class='" + $(this).parent().attr("class") +  "'></code>");
								})
							break;
							case "md": 
								$(this).find("code").addClass("language-html");
							break;
						}
					})

					// things we do on every template after it has been customised. 
					$("code").each(function(){
						$(this).html($(this).html().replace(/</g, "&lt;"));
					}).addClass("line-numbers").addClass('copy-to-clipboard-button').OneClickSelect();
					initComponents($);
					Prism.highlightAll();

					core.colour.positionTooltip();
					$( window ).on("resize", function(){core.colour.positionTooltip()});
					$("name > span, color-pill > span").on("click", function(e){
						e.preventDefault();
						let w = "";
						if (e.metaKey || e.ctrlKey || e.keyCode == 91 || e.keyCode == 224) {
							w = "var";
						} else if (e.altKey) {
							w = "token"
						} else if (e.shiftKey) {
							w = "rgb";
						} else {
							w = "hex";
						}
						core.colour.copy(w, $(this));
					});
				}
			})
		} else {
			articles--;
		}
	});

	// show deprecated switch
	initComponents($);
	function flipDeprecated() {
		setTimeout(function(){
			if ($("#deprecated").attr("aria-checked") == "false") {
				$(".status-deprecated").closest("article").addClass("status-deprecated");
				core.cookie.set("hide-deprecated", false, 30, "/");
			} else {
				$("article.status-deprecated").removeClass("status-deprecated");
				core.cookie.set("hide-deprecated", true, 30, "/");
			}
		}, 50);
	}

	$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
	setTimeout( function() {
		if (core.cookie.get("hide-deprecated") == "true") {
			$("#deprecated").attr("aria-checked", "true");
			flipDeprecated();
		}
	}, 200);
	console.log("hide deprecated", { "type": (typeof core.cookie.get("hide-deprecated")), "value": core.cookie.get("hide-deprecated") });
	// /hide deprecated switch

	// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
})