import config from '../config';
import path from 'path';
import posthtml from 'posthtml';
import expressions from 'posthtml-expressions';
import fs from 'fs';

const target = config.currentTarget;
const mode = config.currentMode;

const targetInfix = `${config.targets[target].delimiter}${config.targets[target].infix}`;
const modeInfix = `${config.modes[mode].delimiter}${config.modes[mode].infix}`;

/**
 * Generate HTML file from template with references to javascript and css files
 * based on target (development / production) and mode (online / offline)
 *
 * All configuration is contained in config.js
 *
 * @param cb: callback handler passed by gulp, signals task completion when called
 */
export const html = (cb) => {

  const file = fs.readFileSync(
    path.join(
      config.paths.src,
      config.paths.html,
      `${config.fileNames.html}.html`
    ), 'utf8'
  );

  posthtml(
    expressions({
      locals: {
        javascript: path.join(
          config.paths.assets,
          config.paths.js,
          `${config.fileNames.js}${modeInfix}${targetInfix}.js`
        ),
        stylesheet: path.join(
          config.paths.assets,
          config.paths.css,
          `${config.fileNames.css}${targetInfix}.css`
        )
      }
    })
  ).process(file)
    .then((result) => {
      fs.writeFileSync(
        path.join(
          config.paths.dest,
          `${config.fileNames.html}.html`
        ), result.html
      );
    });

  cb();
};