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/plugins/toolbar/prism-toolbar";
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";

import * as cookie from './_cookies.js';
import * as get from "./_geturlvars.js";
import * as colours from "./_color-samples.js";

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

// oneClickSelect.init();

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


// 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();
		}
	});
};

String.prototype.toTitleCase = function() {
	return this.replace(/\w\S*/g, function(txt) {
		return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
	});
}
String.prototype.toSentenceCase = function() {
	return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
}
String.prototype.toContent = function() {
	return this.replace(/-/g, " ");
}


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

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

	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";
			$( "#" + $(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-pattern").toContent().toSentenceCase()}</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();


					colours.positionTooltip();
					$( window ).on("resize", function(){colours.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";
						}
						colours.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");
				cookie.set("hide-deprecated", false, 30, "/");
			} else {
				$("article.status-deprecated").removeClass("status-deprecated");
				cookie.set("hide-deprecated", true, 30, "/");
			}
		}, 50);
	}

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



})