'use strict';

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssmin = require('gulp-cssmin');
var salad = require('postcss-salad')(require('./salad.config.json'));
var gulpSass = require('gulp-sass')
const concat = require('gulp-concat');
var clean = require('gulp-clean');
const replace = require('gulp-replace');


var dartSass = require('sass')
gulp.task('compile', function() {
  return gulp.src('./src/*.css')
    .pipe(postcss([salad]))
    .pipe(cssmin())
    .pipe(gulp.dest('./lib'));
});
function cleanTheme() {
  return gulp.src('./skin/index.css')
      .pipe(clean({force: true}))
}
function copyTokens() {
  return gulp.src('./node_modules/@momentum-design/tokens/dist/css/**')
      .pipe(replace('.mds-core', '.mds-theme-stable-lightWebex, .mds-theme-stable-darkWebex'))
      .pipe(gulp.dest('./src/webex'));
}
function buildTheme() {
  const sass = gulpSass(dartSass)
  return gulp.src('./src/skin/index.scss')
      .pipe(sass.sync())
      .pipe(gulp.dest('./skin'))
}
gulp.task('tokens', copyTokens)
gulp.task('theme', buildTheme);
gulp.task('combine', function() {

  return gulp.src([
    'lib/index.css',
    'skin/index.css',
  ])
      .pipe(concat('index.css'))
      .pipe(cssmin())
      .pipe(gulp.dest('lib'));
})
gulp.task('copyfont', function() {
  return gulp.src('./src/fonts/**')
    .pipe(cssmin())
    .pipe(gulp.dest('./lib/fonts'));
});

gulp.task('copyimages', function() {
  return gulp.src('./src/images/**')
    .pipe(gulp.dest('./lib/images'));
});

// gulp.task('build', ['compile', 'copyfont','copyimages']);
gulp.task('build', gulp.series('theme','compile','combine', 'copyfont', 'copyimages', (done) => done()));
gulp.task('watch', function(){
  return gulp.watch('./src/skin/**', gulp.series(cleanTheme, buildTheme))
})
