var gulp = require('gulp'),
    cleanCSS = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    insert = require('gulp-insert'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    replace = require('gulp-replace'),
    path = require('path'),
    shell = require('gulp-shell'),
    pipeline = require('readable-stream').pipeline;
const sass = require('gulp-sass')(require('sass'));

// Now you can use gulpSass in your gulp tasks

function buildStyles(done) {
    return gulp.src([
        './assets/dev/sass/admin.scss',
        './assets/dev/sass/rtl.scss',
        './assets/dev/sass/frontend.scss',
    ])
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./assets/css/'));
};

function buildScripts(done) {
    gulp.src([
        './assets/dev/javascript/plugin/*.js',
        './assets/dev/javascript/config.js',
        './assets/dev/javascript/ajax.js',
        './assets/dev/javascript/placeholder.js',
        './assets/dev/javascript/helper.js',
        './assets/dev/javascript/chart.js',
        './assets/dev/javascript/filters/*.js',
        './assets/dev/javascript/components/*.js',
        './assets/dev/javascript/meta-box.js',
        './assets/dev/javascript/meta-box/*.js',
        './assets/dev/javascript/pages/*.js',
        './assets/dev/javascript/run.js',
        './assets/dev/javascript/image-upload.js',
    ])
        .pipe(uglify())
        .pipe(concat('admin.min.js'))
        .pipe(insert.prepend('jQuery(document).ready(function ($) {'))
        .pipe(insert.append('});'))
        .pipe(gulp.dest('./assets/js/'))
        .pipe(babel({presets: ['@babel/env']}))
        .pipe(replace("\\n", ''))
        .pipe(replace("\\t", ''))
        .pipe(replace("  ", ''))
        .pipe(uglify())
        .pipe(gulp.dest('./assets/js/'));
    done()
}

function buildBackgroundProcessTrackerScript(done) {
    gulp.src([
        './assets/dev/javascript/background-process-tracker.js',
    ])
        .pipe(uglify())
        .pipe(concat('background-process-tracker.min.js'))
        .pipe(insert.prepend('jQuery(document).ready(function ($) {'))
        .pipe(insert.append('});'))
        .pipe(gulp.dest('./assets/js/'))
        .pipe(babel({presets: ['@babel/env']}))
        .pipe(replace("\\n", ''))
        .pipe(replace("\\t", ''))
        .pipe(replace("  ", ''))
        .pipe(uglify())
        .pipe(gulp.dest('./assets/js/'));
    done()
}

// Gulp Frontend Script
function frontScripts(done) {
    const jsFiles = [
        './assets/dev/javascript/user-tracker.js',
        './assets/dev/javascript/event-tracker.js',
        './assets/dev/javascript/tracker.js',
    ];

    // Process for modern browsers (ES6)
    gulp.src(jsFiles)
        .pipe(replace("\\n", ''))
        .pipe(replace("\\t", ''))
        .pipe(replace("  ", ''))
        .pipe(uglify())
        .pipe(concat('tracker.js'))
        .pipe(gulp.dest('./assets/js/'));

    done()
}


// Gulp Frontend Script
function miniChart(done) {
    const jsFiles = [
        './assets/dev/javascript/mini-chart.js'
    ];

    // Process for modern browsers (ES6)
    gulp.src(jsFiles)
        .pipe(replace("\\n", ''))
        .pipe(replace("\\t", ''))
        .pipe(replace("  ", ''))
        .pipe(uglify())
        .pipe(gulp.dest('./assets/js/'));

    done()
}


// Gulp charts Script
function chartScripts(done) {
    gulp.src([
        './assets/dev/javascript/plugin/chartjs-adapter-date-fns.bundle.min.js',
        './assets/dev/javascript/plugin/chartjs-chart-matrix.min.js'])
        .pipe(concat('chart-matrix.min.js'))
        .pipe(gulp.dest('./assets/js/chartjs')).pipe(babel({presets: ['@babel/env']})).pipe(replace("\\n", '')).pipe(replace("\\t", '')).pipe(replace("  ", '')).pipe(uglify()).pipe(gulp.dest('./assets/js/chartjs/'));
    done()
}

// Gulp Script Minify
function concatScripts(done) {
    gulp.src(['./assets/js/*.js', '!./assets/js/*.min.js'])
        .pipe(babel({presets: ['@babel/env']}))
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }));
    done()
}

// Gulp Css Minify
function minifyCss(done) {
    gulp.src(['./assets/css/*.css', '!./assets/css/*.min.css'])
        .pipe(cleanCSS({
            keepSpecialComments: 1,
            level: 2
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }));
    done()
}

function addEsnextSuffix(filePath) {
    const lastDotIndex = filePath.lastIndexOf('.');
    if (lastDotIndex === -1) return `${filePath}.esnext`;
    const base = filePath.substring(0, lastDotIndex);
    const ext = filePath.substring(lastDotIndex);
    return `${base}.esnext${ext}`;
}

function revertToES6(cb) {
    const jsFiles = [
        './assets/js/user-tracker.js',
        './assets/js/event-tracker.js',
        './assets/js/tracker.js',
    ];

    const tasks = jsFiles.map(file => {
        const outputFile = addEsnextSuffix(file);
        return `lebab --transform arrow,let,template ${file} -o ${outputFile}`;
    });

    shell.task(tasks)();
    cb();
}

// Gulp Watch
function watch() {
    gulp.watch('assets/dev/javascript/**/*.js', gulp.series(buildScripts));
    gulp.watch('assets/dev/javascript/background-process-tracker.js', gulp.series(buildBackgroundProcessTrackerScript));
    gulp.watch('assets/dev/javascript/mini-chart.js', gulp.series(miniChart));
    gulp.watch('assets/dev/sass/**/*.scss', gulp.series(buildStyles));
    console.log(" - Development is ready...")
}

// global Task
exports.compileSass = buildStyles;
exports.script = buildScripts;
exports.backgroundProcessTrackerScript = buildBackgroundProcessTrackerScript;
exports.chartScript = chartScripts;
exports.frontScript = frontScripts;
exports.miniChart = miniChart;
exports.concatScripts = concatScripts;
exports.minifyCss = minifyCss;
exports.revertToES6 = revertToES6;
exports.watch = watch;

exports.default = gulp.series(watch);