// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * Render mustache template examples within the component library.
 *
 * @module     tool_componentlibrary/mustache
 * @copyright  2021 Bas Brands <bas@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import selectors from 'tool_componentlibrary/selectors';
import Ajax from 'core/ajax';
import Config from 'core/config';
import Templates from 'core/templates';
import Log from 'core/log';
import Notification from 'core/notification';

/**
 * Handle a template loaded response.
 *
 * @method
 * @private
 * @param {String} container The template container
 * @param {String} templateName The template name
 * @param {String} context Data for the template.
 */
const renderTemplate = async(container, templateName, context) => {
    try {
        context = JSON.parse(context);
    } catch (e) {
        Log.debug('Could not parse json example context for template.');
        Log.debug(e);
    }

    const {html, js} = await Templates.renderForPromise(templateName, context);

    const rendercontainer = container.querySelector(selectors.mustacherendered);

    // Load the rendered content in the renderer tab.
    await Templates.replaceNodeContents(rendercontainer, html, js);
};

/**
 * Load the a template source from Moodle.
 *
 * @method
 * @private
 * @param {String} container The template container
 */
const loadTemplate = container => {
        const sourcecontainer = container.querySelector(selectors.mustachesource);
        const contextcontainer = container.querySelector(selectors.mustachecontext);
        const templateName = container.dataset.template;
        let context = container.querySelector(selectors.mustacherawcontext).textContent;

        const parts = templateName.split('/');
        const component = parts.shift();
        const name = parts.join('/');

        const request = {
            methodname: 'core_output_load_template',
            args: {
                component: component,
                template: name,
                themename: Config.theme,
                includecomments: true
            }
        };

        Ajax.call([request])[0]
            .done((source) => {
                // Load the source template in Template tab.
                sourcecontainer.textContent = source;
                if (!context) {
                    const example = source.match(/Example context \(json\):([\s\S]+?)(}})/);
                    context = example[1];
                    // Load the variables in the Variables tab.
                    const precontainer = document.createElement("pre");
                    precontainer.innerHTML = JSON.stringify(JSON.parse(context), null, 4);
                    contextcontainer.parentNode.appendChild(precontainer);
                    contextcontainer.classList.add('d-none');
                }
                renderTemplate(container, templateName, context);
            })
            .fail(Notification.exception);
};

/**
 * Initialize the module.
 *
 * @method
 */
export const mustache = () => {
    document.querySelectorAll(selectors.mustachecode).forEach((container) => {
        loadTemplate(container);
    });
};