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 inject = require('gulp-inject');
const noop = require('gulp-noop');
const uglify = require('gulp-uglify-es').default;
const favicons = require('gulp-favicons');
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/'
    },
    thumbnails: {
        src: 'src/images/*.jpg',
        dest: 'dist/images/thumbs'
    },
    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.scripts.src, series(js));
    watch(paths.html.src, series(html));
    watch(paths.html.dest + 'index.html').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,
            optimizationLevel: 5,
            svgoPlugins: [{
                removeViewBox: false
            }, {
                removeUselessStrokeAndFill: false
            }]
        }))
        .pipe(dest(paths.images.dest));
}

function thumbnails() {
    return src(paths.thumbnails.src)
        .pipe(newer(paths.thumbnails.dest))
        .pipe(imageResize({
            width: 50,
            height: 50,
            crop: false,
            upscale: false
        }))
        .pipe(imagemin({
            progressive: true,
            optimizationLevel: 5,
            svgoPlugins: [{
                removeViewBox: false
            }, {
                removeUselessStrokeAndFill: false
            }]
        }))
        .pipe(dest(paths.thumbnails.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(paths.html.dest + "index.html")
        .pipe(inject(src(paths.html.dest + "favicons/index.html"), {
            starttag: '<!-- inject:head:html -->',
            transform: function (filePath, file) {
                return file.contents.toString('utf8')
            }
        }))
        .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',
            theme_color: "#bdf787",
            lang: "de-DE",
            scope: '/',
            start_url: '/',
            version: 1.0,
            logging: true,
            html: 'index.html',
            pipeHTML: true,
            replace: true,
            icons: {
                // Platform Options:
                // - offset - offset in percentage
                // - background:
                //   * false - use default
                //   * true - force use default, e.g. set background for Android icons
                //   * color - set background for the specified icons
                //   * mask - apply mask in order to create circle icon (applied by default for firefox). `boolean`
                //   * overlayGlow - apply glow effect after mask has been applied (applied by default for firefox). `boolean`
                //   * overlayShadow - apply drop shadow after mask has been applied .`boolean`
                //
                android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
                appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
                appleStartup: false, // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
                coast: false, // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
                favicons: true, // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
                firefox: false, // Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
                windows: false, // Create Windows 8 tile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
                yandex: false // Create Yandex browser icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
            }
        }))

        .pipe(dest(paths.html.dest + "favicons/"));
}

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