Cacher is the code snippet organizer for pro developers

const fs = require("fs");
const createHTML = require("create-html");
const { exec } = require("child_process");

// Templating of Reporter
function template(items) {
  console.log("TCL: template -> items", items);
  return `<div id="root">
  <div class="container">
      <div class="header">
          <div class="header-title">Interface report</div>
          <div class="header-container-search">
            <div class="header-container-search-buttons">
              <button class="mobile">Mobile</button>
              <button class="tablet">Tablet</button>
              <button class="desktop">Desktop</button>
            </div>
            <div class="header-container-search-input">
              <input type="text">
              <button type="submit">Buscar</button>
            </div>
          </div>
        </div>
        ${items
          .map((item, i) =>
            `
        <div class="card">
          <div class="card-label">Página: ${item.scenarioLabel}</div>
           <div class="card-content">
             <div class="card-content-column reference">
               <div class="card-content-column-label">Reference</div>
               <div class="card-content-column-img">
                 <img src="../reference/${item.imageFilePng}" alt="">
               </div>
             </div>
             <div class="card-content-column test">
               <div class="card-content-column-label">Test</div>
               <div class="card-content-column-img">
                 <img src="../${item.today}" alt="">
               </div>
             </div>
             <div class="card-content-column result">
               <div class="card-content-column-label">Result</div>
               <div class="card-content-column-img">
                 <img src="../${item.test}" alt="">
               </div>
             </div>
           </div>
           <div class="card-filename">filename: ${item.imageFilePng}</div>
         </div>
        `.trim()
          )
          .join("")}
  </div>
</div>`;
}

// Mount HTML reporter
async function makeReporter(items) {
  const html = createHTML({
    title: "Interface Report",
    script: "script.js",
    scriptAsync: true,
    css: "style.css",
    lang: "pt-br",
    head: `<meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">`,
    body: template(items),
    favicon: "favicon.png"
  });

  // Write HTML file report in Reporter folder
  await fs.writeFile("./reporter/index2.html", html, function(err) {
    if (err) console.log(err);
  });

  // Open Report in Google Chrome
  await exec("google-chrome ./reporter/index2.html", (err, stdout, stderr) => {
    if (err) {
      console.error(err);
    } else {
      console.log(`stdout: ${stdout}`);
      console.log(`stderr: ${stderr}`);
    }
  });
}

module.exports = makeReporter;