const {
    dest,
    parallel,
    series,
    src,
    watch,
} = require('gulp');
const newer = require('gulp-newer');
const imagemin = require('gulp-imagemin');
const htmlclean = require('gulp-htmlclean');
const imageResize = require('gulp-image-resize');
const noop = require('gulp-noop');
const uglify = require('gulp-uglify-es').default;
const favicons = require('gulp-favicons');
const webp = require('gulp-webp');
const cssnano = require('gulp-cssnano');
const sass = require('gulp-sass');
const devBuild = (process.env.NODE_ENV !== 'production')
const browserSync = require('browser-sync');
const deleteUnusedImages = require('gulp-delete-unused-images');

var server = browserSync.create();

const paths = {
    scripts: {
        src: 'src/*.js',
        dest: 'dist/'
    },
    scss: {
        src: 'src/scss/*.scss',
        dest: 'src/',
    },
    css: {
        src: 'src/*.css',
        dest: 'dist/'
    },
    images: {
        src: 'src/images/*.jpg',
        dest: 'dist/images/'
    },
    html: {
        src: 'src/*.html',
        dest: 'dist/'
    },
    pdf: {
        src: 'src/*.pdf',
        dest: 'dist/'
    }
};


function serve() {
    server.init({
        server: {
            baseDir: './dist'
        }
    })

    watch(paths.scss.src, series(scss, css));
    watch(paths.html.src).on('change', server.reload);
}


function images() {
    return src(paths.images.src)
        .pipe(newer(paths.images.dest))
        .pipe(imageResize({
            width: 2400,
            height: 1800,
            crop: false,
            upscale: false
        }))
        .pipe(imagemin({
            progressive: true,
            optimizationLeve: 5,
            svgoPlugins: [{
                removeViewBox: false
            }, {
                removeUselessStrokeAndFill: false
            }]
        }))
        .pipe(dest(paths.images.dest));
}

function imagesWebp() {
    return src(paths.images.src)
        .pipe(newer(paths.images.dest))
        .pipe(imageResize({
            width: 2400,
            height: 1800,
            crop: false,
            upscale: false
        }))
        .pipe(webp())
        .pipe(dest(paths.images.dest))
}

function js() {
    return src(paths.scripts.src)
        .pipe(uglify())
        .pipe(dest(paths.scripts.dest))
}

function scss() {
    return src(paths.scss.src)
        .pipe(sass())
        .pipe(dest(paths.scss.dest))
        .pipe(server.stream());
}

function css() {
    return src(paths.css.src)
        .pipe(cssnano())
        .pipe(dest(paths.css.dest));
}

function html() {
    return src(paths.html.src)
        .pipe(newer(paths.html.dest))
        .pipe(devBuild ? noop() : htmlclean())
        .pipe(dest(paths.html.dest));
}

function pdf() {
    return src(paths.pdf.src)
        .pipe(dest(paths.pdf.dest));
}

function manifest() {
    return src('dist/favicons/manifest.*')
        .pipe(dest(paths.html.dest));
}

function favicon() {
    return src('src/favicon.png')
        .pipe(favicons({
            appName: "Ferienwohnung 'Wanderlust'",
            appShortName: "Ferienwohnung",
            appDescription: "Ferienwohnung in Friedrichroda OT Finsterbergen",
            developerName: 'Christian Seyfferth',
            developerURL: 'https://chrosey.de/',
            background: '#bdf787',
            path: 'favicons/',
            url: 'http://urlaub-friedrichroda.de/',
            display: 'standalone',
            orientation: 'portrait',
            scope: '/',
            start_url: '/',
            version: 1.0,
            logging: false,
            html: 'index.html',
            pipeHTML: true,
            replace: true,
        }))
        .pipe(dest(paths.html.dest + "favicons/"));
}


exports.default = series(parallel(html, pdf, series(favicon, manifest)), js, series(scss, css), parallel(images, imagesWebp));
exports.serve = series(serve);