var Prismic = PrismicJS,
	PrismicDOM = PrismicDOM,
	prismicEndpoint = "https://aurora-faq.prismic.io/api/v2",
	faqMenuRows = $("#faq-menu-rows"),
	faqCategoryContainer = $("#faq-category-container"),
	faqMenuContainer = $("#faq-menu-container"),
	strainLoader = document.getElementById("strains-loader-fr"),
	categories = [],
	categoryID = "",
	categoryTitle = "",
	categoryIcon = "",
	categoryQA = [];

// Make Prismic request
Prismic.getApi(prismicEndpoint).then(function(api) {
	// Display loader
	return api.query("", {
		lang: "fr-ca"
	}); // An empty query will return all the documents
}).then(function(response) {
	// strainLoader.style.display = "none";
	var faq = response.results;
	formatFaq(faq);
}, function(err) {
	console.log(err);
	strainLoader.style.display = "none";
});

function formatFaq(faq) {
	categories = _.map(faq, function(category) {
		category.heading = category.data.category_title;
		category.image = category.data.icon.url;
		category.anchor = category.data.category_title.toLowerCase().replace(/[^A-Z0-9]/ig, "");
		category.QA = category.data.questions_and_answers;
		category.icon = category.data.font_icon;
		return _.pick(category,
			'heading',
			'image',
			'anchor',
			'icon',
			'QA'
		);
	});

	formatMarkup(categories);
}

function formatMarkup(categories) {
	function formatQuestionId(questionTitle) {
		return(questionTitle.toLowerCase().replace(/[^A-Z0-9]/ig, ""));
	}
	function formatCategoryId(categoryTitle) {
		return(categoryTitle.toLowerCase().replace(/[^A-Z0-9]/ig, ""));
	}

	for(var i = 0; i < categories.length; i++) {
        var thisOutput = '<div class="col-xs-12 col-sm-4 text-center"><a href="#category-' + formatCategoryId(categories[i].heading) + '"><div class="faq-cat text-center">';
        if (categories[i].icon) {
            thisOutput += '<h1><i aria-hidden="true" class="icon-' + categories[i].icon + ' center-block faq-icons"></i></h1>';
        } else {
            thisOutput += '<img src="' + categories[i].image + '" class="center-block faq-icons"/>';
        }
        thisOutput += '<h4>' + categories[i].heading + '</h4></div></a></div>';
    	faqMenuRows.append(
            thisOutput
    	);

    	faqCategoryContainer.append(
    		"<div class=\"faq-category\"><span id=\"category-" + categories[i].anchor + "\"></span><h3>" + categories[i].heading + "</h3><div class=\"panel-group\" id=\"accordion-" + categories[i].anchor + "\"></div></div>"
		);

		for(var j = 0; j < categories[i].QA.length; j++) {
            var thisSelector = '#accordion-' + categories[i].anchor;
    		$(thisSelector).append(
    			"<div class=\"panel panel-default panel-faq\"><div class=\"panel-heading\"><a data-toggle=\"collapse\" data-parent=\"#accordion-" + categories[i].anchor + "\" href=\"#collapse-" + categories[i].anchor + "-" + j + "\" class=\"toggle-container\"><h4 class=\"panel-title\">" + categories[i].QA[j].question + "</h4><span id=\"icon-collapse-" + categories[i].anchor + "-" + j + "\" class=\"glyphicon glyphicon-plus\" aria-hidden=\"true\"></span></a></div><div id=\"collapse-" + categories[i].anchor + "-" + j + "\" class=\"panel-collapse collapse\"><div class=\"panel-body\">" + PrismicDOM.RichText.asHtml(categories[i].QA[j].answer) + "</div></div></div>"
			);
		}
	}

	$('.collapse').on('show.bs.collapse', function(e) {
        var thisTargetId = '#icon-' + e.currentTarget.id;
		$(thisTargetId).removeClass("glyphicon glyphicon-plus");
		$(thisTargetId).addClass("glyphicon glyphicon-minus");
	});
	$('.collapse').on('hide.bs.collapse', function(e) {
        var thisTargetSelector = '#icon-' + e.currentTarget.id;
		$(thisTargetSelector).removeClass("glyphicon glyphicon-minus");
		$(thisTargetSelector).addClass("glyphicon glyphicon-plus");
	});
}