const { watch, src, dest, series, parallel } = require("gulp");

const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const concat = require("gulp-concat");
const uglyfly = require("gulp-uglyfly");
const rename = require("gulp-rename");
const del = require("del");
const svgmin = require("gulp-svgmin");
const svgSprite = require("gulp-svg-sprites");
const listfiles = require("gulp-listfiles");
const merge = require("merge-stream");
const sassMapToJson = require("sass-maps-to-json");
const realFavicon = require ('gulp-real-favicon');
const fs = require('fs');

const dir = {
  app: "app/", // dossier de travail
  assets: "app/assets/",
  componentsApp: "app/views/components/", // dossier des composants du guide de style
  componentsPublic: "public/wp-content/themes/biig/views/components/", // dossier des composants du guide de style
  theme: "public/wp-content/themes/biig/", // dossier final du thème
  themeAssets: "public/wp-content/themes/biig/assets", // dossier final du thème
  nodeModules: "node_modules/"
};

// Chemins spécifiques
const paths = {
  scss: {
    src: dir.assets + "scss/**/*.scss",
    dest: dir.theme + "assets/css/",
    maps: "./maps/",
    watch: [
      dir.assets + "scss/**/*.scss",
      "!" + dir.assets + "scss/init/_variables-colors.scss"
    ]
  },
  js: {
    src: [
      dir.nodeModules + 'js-cookie/src/js.cookie.js',
      dir.assets + "js/components/*.js",
      dir.assets + "js/templates/*.js",
      dir.assets + "js/common.js",
      dir.assets + "js/script.js"
    ],
    dest: dir.theme + "assets/js/",
    fileName: "script.min.js",
    maps: "./maps/",
    watch: dir.assets + "js/**/*.js"
  },
  jquery: {
    src: [dir.nodeModules + 'jquery/dist/jquery.js'],
    dest: dir.theme + 'assets/js/',
    fileName: 'jquery.min.js',
    maps: './maps/',
    watch: dir.assets + 'js/**/*.js'
  },
  poloJs: {
    src: [
      dir.assets + "polo/js/plugins.js",
      dir.assets + "polo/js/functions.js"
    ],
    dest: dir.theme + 'assets/polo/js/',
    fileName: 'polo.min.js',
    maps: './maps/',
    watch: dir.assets + 'polo/js/**/*.js'
  },
  svg: {
    src: dir.assets + "svg/src/**/*.svg",
    optimized: dir.assets + "svg/optimized/",
    symbols: dir.assets + "svg/symbols/",
    dest: dir.theme + "assets/svg/"
  },
  themeFiles: {
    src: [dir.app + "**/*", "!" + dir.assets + "**/*"],
    dest: dir.theme,
    clean: [
      dir.theme + "**/*",
      "!" + dir.themeAssets,
      "!" + dir.themeAssets + "/**/*"
    ],
    watch: [dir.app + "**/*", "!" + dir.assets + "**/*"]
  },
  fonts: {
    src: dir.assets + "fonts/**/*",
    dest: dir.themeAssets + "/fonts/"
  },
  polo: {
    src: dir.assets + "polo/**/*",
    dest: dir.themeAssets + "/polo/"
  },
  favicon: {
    src: dir.assets + "favicons/favicon.png",
    dest: dir.themeAssets + "/favicons/",
    datafile: dir.themeAssets + "/favicons/faviconData.json",
    urlManifest: dir.themeAssets + "/favicons/"
  }
};

//------------------------------------------------------------
//    CSS
//    sass : compile les scss en css
//    rename : ajoute le suffixe .min
//    autoprefixer
//    cssnano : minifie le css
//------------------------------------------------------------
function css() {
  return src(paths.scss.src, { sourcemaps: true })
    .pipe(sass({ includePaths: [dir.nodeModules] }))
    .pipe(rename({ suffix: ".min" }))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(dest(paths.scss.dest, { sourcemaps: paths.scss.maps }));
}

//------------------------------------------------------------
//    JS
//    concat : concatène les fichiers en 1 seul
//    uglyfly : minifie les fichiers
//------------------------------------------------------------
function js() {
  return src(paths.js.src, { sourcemaps: true })
    .pipe(uglyfly())
    .pipe(concat(paths.js.fileName))
    .pipe(dest(paths.js.dest, { sourcemaps: paths.js.maps }));
}

//------------------------------------------------------------
//    JS (jQuery)
//    fichier jquery uniquement (besoin pour le guide de style mais pas pour le site)
//------------------------------------------------------------
function jquery() {
  return src(paths.jquery.src, { sourcemaps: true })
    .pipe(uglyfly())
    .pipe(concat(paths.jquery.fileName))
    .pipe(dest(paths.jquery.dest, { sourcemaps: paths.jquery.maps }));
}

//------------------------------------------------------------
//    JS (Polo)
//    fichier polo uniquement
//------------------------------------------------------------
function poloJs() {
  return src(paths.poloJs.src, { sourcemaps: false })
    .pipe(uglyfly())
    .pipe(concat(paths.poloJs.fileName))
    .pipe(dest(paths.poloJs.dest, { sourcemaps: paths.poloJs.maps }));
}

//------------------------------------------------------------
//    SASS export Colors : SASS To Json
//------------------------------------------------------------
async function exportColors() {
  var settings = {
    src: dir.assets + "scss/init/_variables-colors.scss",
    dest: dir.componentsApp + "couleurs/couleurs.config.json"
  };

  await sassMapToJson(settings);
}

//------------------------------------------------------------
//    Conversion des SVG (pictos et/ou autres) en symbol
//------------------------------------------------------------

// Clean le dossier 'optimized' avant d'effectuer la tâche svgOptimize
function cleanOptimize() {
  return del(paths.svg.optimized, {
    force: true
  });
}

// Optimise les SVG (nettoyage)
function svgOptimize() {
  return src(paths.svg.src)
    .pipe(
      svgmin({
        plugins: [
          {
            removeViewBox: false
          },
          {
            convertPathData: {
              noSpaceAfterFlags: false
            }
          }
        ]
      })
    )
    .pipe(dest(paths.svg.optimized));
}

// Création des sprites SVG en mode symbols
function svgSymbols() {
  return src(paths.svg.optimized + "**/*.svg")
    .pipe(
      svgSprite({
        mode: "symbols",
        selector: "i-%f",
        preview: {
          // Création du fichier de preview html
          symbols: "preview.html"
        }
      })
    )
    .pipe(dest(paths.svg.symbols));
}

// Transforme le fichier symbols.svg en fichier PHP pour pouvoir l'inclure en template_part
// Transforme le fichier symbols.svg en fichier Twig pour pouvoir l'inclure dans guide de style
function transformSpriteFile() {
  var svgToPhp = src(paths.svg.symbols + "svg/symbols.svg")
    .pipe(rename("symbols.svg.php"))
    .pipe(dest(paths.svg.dest));

  var svgToTwigApp = src(paths.svg.symbols + "svg/symbols.svg")
    .pipe(rename("_symbols.svg.twig"))
    .pipe(dest(dir.componentsApp));

  var svgToTwigPublic = src(paths.svg.symbols + "svg/symbols.svg")
    .pipe(rename("_symbols.svg.twig"))
    .pipe(dest(dir.componentsPublic));

  return merge(svgToPhp, svgToTwigApp, svgToTwigPublic);
}

//------------------------------------------------------------
//    Liste toutes les icônes dans un JSON à partir du dossier svg/src
//    pour création du composant icones du guide de style
//------------------------------------------------------------
function listIcons() {
  var options = {
    filename: "icones.config.json",
    banner:
      "{\n" +
      '  "label": "Icônes",\n' +
      '  "context": {\n' +
      '    "listIcons": [',
    footer: "    ]\n" + "  }\n" + "}",
    prefix: "      {\n" + '        "name": "',
    postfix: '"\n' + "      },",
    postfixLastLine: '"\n' + "      }",
    replacements: [
      {
        pattern: ".svg",
        replacement: ""
      }
    ]
  };

  return src([paths.svg.src], { read: false })
    .pipe(listfiles(options))
    .pipe(dest(dir.app + "views/components/icones/"));
}

//------------------------------------------------------------
//    ThemeFiles
//------------------------------------------------------------
// Duplique les fichiers de app  (sauf les assets) dans le theme
function constructThemeFiles() {
  return src(paths.themeFiles.src).pipe(dest(paths.themeFiles.dest));
}

// Duplique les fichiers Fonts de app dans le theme
function fontsFiles() {
  return src(paths.fonts.src).pipe(dest(paths.fonts.dest));
}

// Duplique les fichiers POLO de app dans le theme
function poloFiles() {
  return src(paths.polo.src).pipe(dest(paths.polo.dest));
}

// Duplique les fichiers SVG Optimized de app dans le theme
function svgOptimizedFiles() {
  return src(paths.svg.optimized + "**/*.svg").pipe(
    dest(paths.svg.dest + "optimized/")
  );
}

// Clean le dossier 'theme' avant d'effectuer la tâche themeFiles
function cleanTheme() {
  return del(paths.themeFiles.clean, {
    force: true
  });
}

// Clean le dossier 'fonts' avant d'effectuer la tâche fontsFiles
function cleanFonts() {
  return del(paths.fonts.dest, {
    force: true
  });
}

// Clean le dossier 'polo' avant d'effectuer la tâche fontsFiles
function cleanPolo() {
  return del(paths.polo.dest, {
    force: true
  });
}

// Clean le dossier 'svg/optimized' avant d'effectuer la tâche svgOptimizedFiles
function cleanSvgOptimized() {
  return del(paths.svg.dest + "optimized/", {
    force: true
  });
}

//------------------------------------------------------------
//    Real Favicon Generator
//------------------------------------------------------------

// Generate the icons. This task takes a few seconds to complete.
// You should run it at least once to create the icons. Then,
// you should run it whenever RealFaviconGenerator updates its
// package (see the check-for-favicon-update task below).
function favicon(done) {
	realFavicon.generateFavicon({
		masterPicture: paths.favicon.src,
		dest: paths.favicon.dest,
		iconsPath: paths.favicon.dest,
		design: {
			ios: {
				pictureAspect: 'noChange',
				assets: {
					ios6AndPriorIcons: false,
					ios7AndLaterIcons: false,
					precomposedIcons: false,
					declareOnlyDefaultIcon: true
				}
			},
			desktopBrowser: {},
			windows: {
				pictureAspect: 'noChange',
				backgroundColor: '#000000',
				onConflict: 'override',
				assets: {
					windows80Ie10Tile: false,
					windows10Ie11EdgeTiles: {
						small: false,
						medium: true,
						big: false,
						rectangle: false
					}
				}
			},
			androidChrome: {
				pictureAspect: 'noChange',
				themeColor: '#ffffff',
				manifest: {
          startUrl: paths.favicon.urlManifest,
					display: 'standalone',
					orientation: 'notSet',
					onConflict: 'override',
					declared: true
				},
				assets: {
					legacyIcon: false,
					lowResolutionIcons: false
				}
			},
			safariPinnedTab: {
				pictureAspect: 'silhouette',
				themeColor: '#5bbad5'
			}
		},
		settings: {
			scalingAlgorithm: 'Mitchell',
			errorOnImageTooSmall: false,
			readmeFile: false,
			htmlCodeFile: false,
			usePathAsIs: false
		},
		markupFile: paths.favicon.datafile
	}, function() {
		done();
  });
};

//------------------------------------------------------------
//    WATCHES
//------------------------------------------------------------
function watches() {
  watch(paths.scss.watch, css);
  watch(paths.js.watch, js);
  watch(paths.svg.src, svg);
  watch(paths.themeFiles.watch, rebuildTheme);
  watch(paths.favicon.src, favicon);
  watch(paths.polo.src, rebuildPolo);
}

function watchesStyleGuide() {
  watch(dir.assets + "scss/init/_variables-colors.scss", parallel(exportColors, css));
}

//------------------------------------------------------------
//    TASKS
//------------------------------------------------------------
const rebuildSvgOptimized = series(cleanSvgOptimized, svgOptimizedFiles);
const svg = series(
  cleanOptimize,
  svgOptimize,
  svgSymbols,
  transformSpriteFile,
  listIcons,
  rebuildSvgOptimized
);
const rebuildFonts = series(cleanFonts, fontsFiles);
const rebuildPolo = series(cleanPolo, poloFiles);
const rebuildTheme = series(cleanTheme, constructThemeFiles);

exports.css = css;
exports.js = js;
exports.jquery = jquery;
exports.poloJs = poloJs;
exports.svg = svg;
exports.rebuildTheme = rebuildTheme;
exports.rebuildFonts = rebuildFonts;
exports.rebuildPolo = rebuildPolo;
exports.rebuildSvgOptimized = rebuildSvgOptimized;
exports.favicon = favicon;
exports.exportColors = exportColors;
exports.watchesStyleGuide = watchesStyleGuide;
exports.watches = series(
  parallel(
    favicon,
    css,
    js,
    jquery,
    poloJs,
    svg,
    rebuildTheme,
    rebuildPolo,
    rebuildFonts,
    rebuildSvgOptimized
  ),
  watches
);
exports.default = parallel(
  favicon,
  css,
  js,
  jquery,
  poloJs,
  svg,
  rebuildTheme,
  rebuildPolo,
  rebuildFonts,
  rebuildSvgOptimized
);