// Gulp config:

import gulp from 'gulp';
import fs from 'fs';
import ftp from 'vinyl-ftp';
import plugins from 'gulp-load-plugins';
import buffer from 'vinyl-buffer';
import del from 'del';
import merge from 'merge-stream';
import webpackStream from 'webpack-stream';
import webpack2 from 'webpack';
import webpackConfig from './webpack.config.js';

const $ = plugins();

const isProduction = (() => {
    return process.env.NODE_ENV === 'production';
})();

/**
 * @param {boolean} watch
 */
const compileJs = ({ watch = false }) => {
    const config = Object.assign({
        watch,
    }, {}, webpackConfig);

    return gulp.src('./src/js/app.js')
        .pipe(webpackStream(config, webpack2))
        .pipe(gulp.dest('dist/'));
};

gulp.task('js:build', (done) => {
    compileJs({
        watch: false
    });
    done();
});

gulp.task('js:watch', (done) => {
    compileJs({
        watch: true
    });
    done();
});

const onErrorHandler = $.notify.onError({
    message: "Error: <%= error.message %>"
});

const srcPaths = {
    images: {
        sprites: {
            all: './src/img/sprites/**/*.png',
            retina: './src/img/sprites/**/*@2x.png'
        },
        images: [
            './src/img/images/**/*'
        ]
    },
    fonts: [
        './src/font/**/*'
    ]
};

// Compiles SCSS to CSS
gulp.task('sass', () => {
    return gulp
        .src(['./src/scss/app.scss'])
        .pipe($.plumber())
        .pipe($.if(!isProduction, $.sourcemaps.init()))
        .pipe($.sass({
            precision: 8, // Required for bootstrap
            outputStyle: 'expanded'
        }))
        .on('error', onErrorHandler)
        .on('error', $.sass.logError)
        .pipe($.postcss())
        .pipe($.if(isProduction, $.cleanCss()))
        .pipe($.if(!isProduction, $.sourcemaps.write()))
        .pipe(gulp.dest('./dist/css/'))
        .pipe($.notify('sass task complete'))
        .pipe($.size({ title: 'css' }));
});

gulp.task('sass-lint', () => {
    return gulp
        .src('./src/scss/*.scss')
        .pipe($.plumber())
        .pipe($.sassLint())
        .pipe($.sassLint.failOnError())
});

gulp.task('copy-fonts', () => {
    return gulp
        .src(srcPaths.fonts)
        .pipe(gulp.dest('./dist/font/'));
});

gulp.task('copy-images', () => {
    return gulp
        .src(srcPaths.images.images)
        .pipe($.imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('./dist/img'))
        .pipe($.size({ title: 'images' }));
});

gulp.task('sprites', () => {
    const spriteData = gulp.src(srcPaths.images.sprites.all)
        .pipe($.spritesmith({
            imgName: '../img/sprite.png',
            retinaSrcFilter: [srcPaths.images.sprites.retina],
            retinaImgName: '../img/sprite.png@2x.png',
            cssName: 'sprite.scss'
        }))
        .on('error', onErrorHandler);

    const spriteStream = spriteData.img
        .pipe(buffer())
        .pipe($.imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('./dist/img/'));

    const cssStream = spriteData.css.pipe(gulp.dest('./temp/'));

    return merge(spriteStream, cssStream);
});

gulp.task('ftp', () => {

    try {
        const config = JSON.parse(fs.readFileSync('./ftp.json', 'utf8'));
        const files = JSON.parse(fs.readFileSync('./deploy.json', 'utf8'));
        const remoteDir = config.dir;

        const conn = ftp.create({
            host: config.host,
            user: config.user,
            password: config.password,
            log: $.util.log
        });

        return gulp.src(files, {
            base: '.',
            buffer: false
        })
            .pipe(conn.newerOrDifferentSize(remoteDir))
            .pipe(conn.dest(remoteDir));
    }
    catch (e) {
        onErrorHandler(e);
    }

});

gulp.task('clean', () => {
    return del([
        'dist/**',
    ]);
});

gulp.task('build', gulp.series('clean', gulp.parallel(
    'js:build',
    'sass-lint',
    'copy-images',
    'copy-fonts',
    gulp.series(
        'sprites',
        'sass'
    )
)));

gulp.task('deploy', gulp.series(
    'build',
    'ftp'
));

gulp.task('watch', () => {

    gulp.watch([
        srcPaths.images.images,
        './src/scss/**/*.scss'
    ], gulp.parallel('sass'));

    gulp.watch(srcPaths.images.images, gulp.parallel('copy-images'));

    gulp.watch([
        srcPaths.images.sprites.all,
        srcPaths.images.sprites.retina
    ], gulp.parallel('sprites'));

    gulp.watch(srcPaths.fonts, gulp.parallel('copy-fonts'));

    compileJs({
        watch: true
    });

});

gulp.task('default', gulp.series('build', 'watch'));

// Webpack config:
const path = require('path');
const webpack = require('webpack');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
    entry: '', // See Gulp config
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/app.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader',
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',
            jquery: 'jquery/src/jquery'
        },
        modules: [
            'node_modules'
        ]
    },
    plugins: [
        new FriendlyErrorsWebpackPlugin()
    ],
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    performance: {
        hints: false
    },
    devtool: '#source-map'
};

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

// package.json
  "scripts": {
    "dev": "cross-env NODE_ENV=development gulp && gulp watch",
    "build": "cross-env NODE_ENV=production gulp",
    "deploy": "yarn run build && gulp deploy"
  },