const fs = require('fs');
const path = require('path');
const chalk = require('chalk');

const COMPONENT_DIR = path.join(__dirname, '../src/components/');
const IMPORT_TEXT = `import { html } from 'lit-html';`;

/**
 * Given a string of the templated, finds and extracts variables in the
 * template so they can be passed to a function during render.
 * @param {string} templateText The text which form the template.
 * @returns {string[]} An array of variable names which the template uses.
 */
function getVariablesFromTemplate(templateText) {
    // TODO: This don't work for nested things - see Strutts awful template. :struttspin
    // Get the contents of any '${}' brackets
    let variables = templateText.split('${')
    variables = variables.map((variable) => variable.split('}')[0]);
    // Remove anything after the variable name e.g. example.something or example[]
    variables = variables.map((variable) => {
        return variable.split('.')[0].split('[')[0].split('(')[0].split(' ')[0]
    });
    // Remove the first 'variable'as it will just be a tag or some string.
    variables = variables.slice(1, variables.length);
    // Remove any duplicates
    variables = new Set(variables);
    variables = [...variables];
    return variables;
}

/**
 * Takes a template name and text and forms a export statement for the template,
 * either a constant or a function depending on if there is any variables used
 * in the templated.
 * @param {string} templateName The name of the template to be used in the file to export
 *                              a constant or function to represent the component.
 * @param {string} templateText The text which form the template.
 * @returns {string} The export statement for the JS component file.
 */
function TEMPLATE_DEFINITION(templateName, templateText) {
    if (templateText.includes('${')) {
        const variablesList = getVariablesFromTemplate(templateText).join(', ');
        return `export const ${templateName} = (${variablesList}) => html\`${templateText}\`;`
    }
    return `export const ${templateName} = html\`${templateText}\`;`;
}

// Function to form the JS template file
/**
 * Takes a template name and content and forms a lit-HTML JS component from it.
 * @param {string} templateName Name of the template to name component.
 * @param {string} templateText Contents of the template to convert to lit-HTML.
 * @returns {string} String content of the JS component file.
 */
const TEMPLATE = (templateName, templateText) => `${IMPORT_TEXT}
${TEMPLATE_DEFINITION(templateName, templateText)}`;

// TODO: Make this take in a directory?
// TODO: Make this search child directories and have paths in full e.g. /sub/component.html.
module.exports.findComponents = function () {
    // Find all the HTML component files in the components folder.
    const componentsPath = path.join(__dirname, '../src/components');
    return fs.readdirSync(componentsPath).filter((component) => component.endsWith('.html'));
}

/**
 * Compiles a specified component into a lit-HTML JS component.
 * @param {string} component The relative path to the component to compile.
 */
module.exports.compileComponent = function (component) {
    // Get the name of the template and its path
    let templateName = `${component.split('.')[0]}`;
    let templatePath = path.join(COMPONENT_DIR, templateName);
    // Check the template exists.
    if (!fs.existsSync(`${templatePath}.html`)) {
        console.error(`File ${templatePath}.html not found so can't be compiled!`);
        return;
    }
    // (Re)Compile the template
    let templateContent = fs.readFileSync(`${templatePath}.html`, {
        encoding: 'utf8'
    });
    getVariablesFromTemplate(templateContent);
    fs.writeFileSync(templatePath + '.js', TEMPLATE(templateName, templateContent));
}

/**
 * Compiles all the HTML components in the project into lit-HTML JS components.
 */
module.exports.compileComponents = function () {
    const components = this.findComponents();
    components.forEach((component) => {
        this.compileComponent(component);
        console.log(chalk.green.bold(`  > Compiled ${component}`));
    });
}