// -----------------------------------------------------------------------------
// Dependencies
// -----------------------------------------------------------------------------

var gulp = require('gulp');
var del = require('del');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var plumber = require('gulp-plumber');
var nunjucksRender = require('gulp-nunjucks-render');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var gulpIf = require('gulp-if');
var args = require('yargs').argv;
var isProd = args.production;

var ftp = require('vinyl-ftp');

var staticOutputFolder = './build';
var themeOutputFolder = './../wp-content/themes/tana';

// -----------------------------------------------------------------------------
// Configuration
// -----------------------------------------------------------------------------

var sassSource = './src/assets/style/**/*.scss';
var sassMain = './src/assets/style/style.scss';

var nunjucksTemplatesDev = './src/templates/**/*.+(html|njk)';
var nunjucksTemplates = './src/templates/*.+(html|njk)';

var sassOptions = { outputStyle: 'nested' };
// Autoprefixer options from Bootstrap 3 for consistency
var autoprefixerOptions = {
  browsers: [
    'Android 2.3',
    'Android >= 4',
    'Chrome >= 20',
    'Firefox >= 24',
    'Explorer >= 8',
    'iOS >= 6',
    'Opera >= 12',
    'Safari >= 6'
  ]
};

var postcssPlugins = [autoprefixer(autoprefixerOptions), cssnano];

// -----------------------------------------------------------------------------
// Clean task (delete build folders before starting the build)
// -----------------------------------------------------------------------------

gulp.task('clean', function () {
  return del(['./build', './styleguide', './../wp-content/themes/tana/assets'], { force: true }); // force delete since it cannot delete a folder outside of working directory (use cautiously)
});

// -----------------------------------------------------------------------------
// Sass compilation
// -----------------------------------------------------------------------------

gulp.task('sass', function () {
  return gulp
    .src(sassMain)
    .pipe(plumber())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(postcss(postcssPlugins))
    .pipe(gulp.dest(staticOutputFolder + '/assets/style/'))
    .pipe(gulp.dest(themeOutputFolder + '/assets/style/'))
    .pipe(browserSync.stream());
});

// -----------------------------------------------------------------------------
// Javascript
// -----------------------------------------------------------------------------

gulp.task('scripts', function () {
  return (
    gulp
      .src([
        './src/assets/scripts/app.js'
      ])
      .pipe(plumber())
      .pipe(concat({ path: 'app.min.js' }))
      .pipe(gulpIf(isProd, uglify({ compress: { drop_debugger: true } })))
      .pipe(browserSync.reload({ stream: true }))
      .pipe(gulp.dest(staticOutputFolder + '/assets/scripts'))
      .pipe(gulp.dest(themeOutputFolder + '/assets/scripts'))
  );
});

gulp.task('scripts-vendor', function () {
  return (
    gulp
      .src('./src/assets/scripts/vendor/*.js')
      .pipe(plumber())
      .pipe(concat({ path: 'vendor.min.js' }))
      .pipe(gulpIf(isProd, uglify({ compress: { drop_debugger: true } })))
      .pipe(browserSync.reload({ stream: true }))
      .pipe(gulp.dest(staticOutputFolder + '/assets/scripts'))
      .pipe(gulp.dest(themeOutputFolder + '/assets/scripts'))
  );
});

// -----------------------------------------------------------------------------
// Templating
// -----------------------------------------------------------------------------

gulp.task('nunjucks', function () {
  // Gets .html and .nunjucks files in pages
  return (
    gulp
      .src(nunjucksTemplates)
      .pipe(plumber())
      // Renders template with nunjucks
      .pipe(
        nunjucksRender({
          path: ['./src/templates/']
        })
      )
      // output files in dist folder
      .pipe(gulp.dest(staticOutputFolder))
  );
});

// -----------------------------------------------------------------------------
// Imagemin
// -----------------------------------------------------------------------------

gulp.task('img', function () {
  return (
    gulp
      .src('./src/assets/images/**/*')
      .pipe(plumber())
      .pipe(
        imagemin({
          progressive: true,
          svgoPlugins: [{ removeViewBox: false }],
          use: [pngquant()]
        })
      )
      .pipe(gulp.dest(staticOutputFolder + '/assets/images'))
      .pipe(gulp.dest(themeOutputFolder + '/assets/images'))
  );
});

// -----------------------------------------------------------------------------
// Video
// -----------------------------------------------------------------------------

gulp.task('video', function () {
  return gulp
    .src([
      './src/assets/video/pilevilevideo.mp4',
      './src/assets/video/trgovina-video-optimized.mp4'
    ])
    .pipe(gulp.dest(staticOutputFolder + '/assets/video'))
    .pipe(gulp.dest(themeOutputFolder + '/assets/video'));
});

// -----------------------------------------------------------------------------
// Icons
// -----------------------------------------------------------------------------
gulp.task('icons', function () {
  return gulp
    .src('./src/assets/icons/icons.svg')
    .pipe(gulp.dest(staticOutputFolder + '/assets/icons'))
    .pipe(gulp.dest(themeOutputFolder + '/assets/icons'));
});

// -----------------------------------------------------------------------------
// Watchers
// -----------------------------------------------------------------------------

gulp.task('watch', function () {
  // Watch the sass input folder for changes,
  // and run `sass` task when something happens
  gulp.watch(sassSource, ['sass']).on('change', function (event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });

  // Watch js files
  gulp.watch('./src/assets/**/*.js', ['scripts']).on('change', browserSync.reload);

  // Watch nunjuck templates and reload browser if change occurs
  gulp.watch(nunjucksTemplatesDev, ['nunjucks']).on('change', browserSync.reload);
});

// -----------------------------------------------------------------------------
// Static server
// -----------------------------------------------------------------------------

gulp.task('browser-sync', ['img'], function () {
  browserSync.init({
    server: {
      baseDir: staticOutputFolder
    }
  });
});

// -----------------------------------------------------------------------------
// Deploy to staging server
// -----------------------------------------------------------------------------

gulp.task('deploy', function () {
  var connection = ftp.create({
    host: 'ftp.filburg.co',
    user: 'tana@filburg.co',
    password: '&6@q@KD&7Q!x'
  });

  var globs = ['./build/**/*'];

  return gulp.src(globs, { base: './build/', buffer: false }).pipe(connection.dest('./'));
});

// -----------------------------------------------------------------------------
// Default task
// -----------------------------------------------------------------------------

gulp.task('development', ['watch', 'browser-sync']);

gulp.task('default', ['sass', 'nunjucks', 'img', 'video', 'icons', 'scripts', 'scripts-vendor', 'watch', 'browser-sync']);

gulp.task('build', ['sass', 'nunjucks', 'img', 'video', 'icons', 'scripts', 'scripts-vendor']);