var fs = require('fs');
var path = require('path');
var del = require('del');
var ejs = require('gulp-ejs');
var less = require('gulp-less');
var util = require('./lib/util');
var gulpif = require('gulp-if');
var ejshelper = require('tmt-ejs-helper');
var bs = require('browser-sync').create(); // 自动刷新浏览器
var lazyImageCSS = require('gulp-lazyimagecss'); // 自动为图片样式添加 宽/高/background-size 属性
var postcss = require('gulp-postcss'); // CSS 预处理
var posthtml = require('gulp-posthtml'); // HTML 预处理
var sass = require('gulp-sass');
var webpack = require('webpack-stream');
var babel = require('gulp-babel');
var eslint = require('gulp-eslint');
var parseSVG = require('./common/parseSVG');
var svgSymbol = require('gulp-svg-sprite');
var rename = require('gulp-rename');
var proxy = require('http-proxy-middleware'); // 转发请求

var webpackConfigPath = path.join(process.cwd(), 'webpack.config.js');
var webpackConfig; // webpack 配置
var jsPath = path.join(process.cwd(), 'src', 'js');

if (util.dirExist(jsPath) && util.fileExist(webpackConfigPath)) {
  webpackConfig = require(webpackConfigPath);
  webpackConfig.output.publicPath = path.join('..', 'js/');
}

//  周玉杰加的，如果代码怕不起来可以删除 开始
var postcssPxtorem = require('postcss-pxtorem'); // 转换 px 为 rem
var postcssAutoprefixer = require('autoprefixer');
var svgInline = require('gulp-svg-inline');
//  周玉杰加的，如果代码怕不起来可以删除 结束

module.exports = function(gulp, config) {
  // var targetDir = '../../activity/' + config.projectName + '/';
  var paths = {
    src: {
      dir: './',
      img: './img/**/*.{JPG,jpg,png,gif,svg}',
      slice: './slice/**/*.png',
      js: './js/**/*.js',
      media: './media/**/*',
      less: './css/*.less',
      lessAll: './css/**/*.less',
      sass: './css/*.scss',
      sassAll: './css/**/*.scss',
      html: ['./**/*.html', '!./_*/**.html', '!./_*/**/**.html', '!./html_tpl/**/*.html'],
      svg: './svg/**/*.svg',
      htmlAll: './**/*.html',
      exclude: '!./dev/**/*'
    },
    dev: {
      dir: './dev',
      css: './dev/css',
      html: './dev',
      js: './dev/js',
      symboltemp: './dev/symboltemp/',
      symbol: './dev/symbolsvg'
    }
    // dev: {
    //     dir: targetDir,
    //     css: targetDir + 'css',
    //     html: targetDir,
    //     js: targetDir + 'js',
    //     symboltemp: targetDir + 'symboltemp/',
    //     symbol: targetDir + 'symbolsvg'
    // }
  };

  //  周玉杰加的，如果代码怕不起来可以删除 开始
  var postcssOption = [];
  if (config.supportREM) { // 这个要在  .tmtworkflowrc 里面设置为true  如果要用px 要改为 Px 或者 PX 大写
    postcssOption = [
      postcssAutoprefixer(),
      postcssPxtorem({
        root_value: '75', // 基准值 html{ font-zise: 20px; }
        prop_white_list: [], // 对所有 px 值生效
        minPixelValue: 0 // 忽略 1px 值
      }),

    ]
  } else {
    postcssOption = [
      postcssAutoprefixer()
    ]
  }
  //  周玉杰加的，如果代码怕不起来可以删除 结束

  var lazyDir = config.lazyDir || ['../slice', '../svg'];

  // 复制操作
  var copyHandler = function(type, file) {
    file = file || paths['src'][type];

    return gulp.src(file, { base: paths.src.dir })
      .pipe(gulp.dest(paths.dev.dir))
      .on('end', reloadHandler);
  };

  // 自动刷新
  var reloadHandler = function() {
    config.livereload && bs.reload();
  };

  // 清除目标目录
  function delDev() {
    return del([paths.dev.dir], {
      force: true
    });
  }

  // 复制操作 start
  function copyImg() {
    return copyHandler('img');
  }

  function copySlice() {
    return copyHandler('slice');
  }

  function copySvg() {
    return copyHandler('svg');
  }

  function copyMedia() {
    return copyHandler('media');
  }

  // 复制操作 end

  // 编译 less
  function compileLess() {
    return gulp.src(paths.src.less)
      .pipe(less({ relativeUrls: true }))
      .on('error', function(error) {
        console.log(error.message);
      })
      .pipe(lazyImageCSS({ SVGGracefulDegradation: false, imagePath: lazyDir }))
      .pipe(gulp.dest(paths.dev.css))
      .on('data', function() {
      })
      .on('end', reloadHandler)
  }

  // 编译 sass
  function compileSass() {
    return gulp.src(paths.src.sass)
      .pipe(sass())
      .on('error', sass.logError)
      .pipe(lazyImageCSS({ SVGGracefulDegradation: false, imagePath: lazyDir }))
      .pipe(gulp.dest(paths.dev.css))
      .on('data', function() {
      })
      .on('end', reloadHandler)
  }

  //  周玉杰加的，如果代码怕不起来可以删除 开始
  // 自动补全
  function compileAutoprefixer() {
    return gulp.src(paths.dev.css + '/**/*.css')
      .pipe(svgInline({
        maxImageSize: 10 * 1024 * 1024,
        extensions: [/.svg/ig]
      }))
      .pipe(postcss(postcssOption))
      .pipe(gulp.dest(paths.dev.css));
  }
  //  周玉杰加的，如果代码怕不起来可以删除 结束 

  // 编译 html
  function compileHtml() {
    return gulp.src(paths.src.html)
      .pipe(ejs(ejshelper()).on('error', function(error) {
        console.log(error.message);
      }))
      .pipe(parseSVG({ devPath: paths.dev.dir }))
      .pipe(gulp.dest(paths.dev.html))
      .on('data', function() {
      })
      .on('end', reloadHandler)
  }

  // 编译 JS
  function compileJs() {
    var condition = !!webpackConfig;

    return gulp.src(paths.src.js)
      .pipe(eslint())
      .pipe(eslint.format('../node_modules/eslint-friendly-formatter'))
      .pipe(gulpif(
        condition,
        webpack(webpackConfig),
        babel({
          presets: ['es2015', 'stage-2']
        })
      ))
      .pipe(gulp.dest(paths.dev.js))
      .on('end', reloadHandler)
  }

  // 启动 livereload
  function startServer() {
    var apiProxy = proxy('/api', {
      target: config.livereload.proxyTarget,
      changeOrigin: true,
      // pathRewrite: {
      //   '^/api': ''
      // }
    });
    bs.init({
      server: {
        baseDir: paths.dev.dir,
        middleware: [apiProxy],
        routes: {
          '/common': '../../common'
        }
      },
      port: config['livereload']['port'] || 8080,
      startPath: config['livereload']['startPath'] || '/index.html',
      reloadDelay: 0,
      notify: { // 自定制livereload 提醒条
        styles: [
          'margin: 0',
          'padding: 5px',
          'position: fixed',
          'font-size: 10px',
          'z-index: 9999',
          'bottom: 0px',
          'right: 0px',
          'border-radius: 0',
          'border-top-left-radius: 5px',
          'background-color: rgba(60,197,31,0.5)',
          'color: white',
          'text-align: center'
        ]
      }
    });
  }

  var watchHandler = function(type, file) {
    var target = file.match(/(.*?)[\/|\\]/);
    target = target ? target[1] : 'html';
    switch (target) {
      case 'img':
        if (type === 'removed') {
          // var tmp = file.replace(/src/, 'dev');
          var tmp = paths.dev.dir + file;
          del([tmp], {
            force: true
          });
        } else {
          copyHandler('img', file);
          compileHtml();
        }
        break;

      case 'svg':
        if (type === 'removed') {
          // var tmp = file.replace(/src/, 'dev');
          var tmp = paths.dev.dir + file;
          del([tmp], {
            force: true
          });
        } else {
          copyHandler('svg', file);
          compileLess();
          compileHtml();
          setTimeout(function() {
            svgSymbols();
            setTimeout(function() {
              reloadHandler();
            }, 300)
          }, 300)
        }
        break;

      case 'slice':
        if (type === 'removed') {
          // var tmp = file.replace('src', 'dev');
          var tmp = paths.dev.dir + file;
          del([tmp], {
            force: true
          });
        } else {
          copyHandler('slice', file);
        }
        break;

      case 'js':
        if (type === 'removed') {
          // var tmp = file.replace('src', 'dev');
          var tmp = paths.dev.dir + file;
          del([tmp], {
            force: true
          });
        } else {
          compileJs();
        }
        break;

      case 'media':
        if (type === 'removed') {
          // var tmp = file.replace('src', 'dev');
          var tmp = paths.dev.dir + file;
          del([tmp], {
            force: true
          });
        } else {
          copyHandler('media', file);
        }
        break;

      case 'css':

        var ext = path.extname(file);

        if (type === 'removed') {
          // var tmp = file.replace('src', 'dev').replace(ext, '.css');
          var tmp = paths.dev.dir + file;
          tmp = tmp.replace(ext, '.css');
          del([tmp], {
            force: true
          });
        } else {
          if (ext === '.less') {
            compileLess();
          } else {
            compileSass();
          }

          //  周玉杰加的，如果代码怕不起来可以删除 开始 
          if (config.supportREM) {
            setTimeout(function () {
              compileAutoprefixer()
            }, 650)
          }
          //  周玉杰加的，如果代码怕不起来可以删除 结束 
        }

        break;

      case 'html_tpl':
      case 'html':
        if (type === 'removed') {
          // var tmp = file.replace('src', 'dev');
          var tmp = paths.dev.dir + file;
          del([tmp], {
            force: true
          }).then(function() {
            util.loadPlugin('build_dev');
          });
        } else {
          compileHtml();
        }

        if (type === 'add') {
          setTimeout(function() {
            util.loadPlugin('build_dev');
          }, 500);
        }

        break;
    }
  };

  function svgSymbols() {
    return gulp.src(paths.dev.symboltemp + '**/*.svg')
      .pipe(svgSymbol({
        mode: {
          inline: true,
          symbol: true
        },
        shape: {
          id: {
            generator: function(id) {
              var ids = id.replace(/.svg/ig, '');
              return ids;
            }
          }
        }
      }))
      .pipe(rename(function(path) {
        path.dirname = './';
        path.basename = 'symbol';
      }))
      .pipe(gulp.dest(paths.dev.symbol))
  }

  // 监听文件
  function watch(cb) {
    var watcher = gulp.watch([
      paths.src.img,
      paths.src.svg,
      paths.src.slice,
      paths.src.js,
      paths.src.media,
      paths.src.lessAll,
      paths.src.sassAll,
      paths.src.htmlAll,
      paths.src.exclude
    ],
    { ignored: /[\/\\]\./ }
    );

    watcher
      .on('change', function(file) {
        util.log(file + ' has been changed');
        watchHandler('changed', file);
      })
      .on('add', function(file) {
        util.log(file + ' has been added');
        watchHandler('add', file);
      })
      .on('unlink', function(file) {
        util.log(file + ' is deleted');
        watchHandler('removed', file);
      });

    cb();
  }

  // 加载插件
  function loadPlugin(cb) {
    util.loadPlugin('build_dev');
    cb();
  }

  // 注册 build_dev 任务
  gulp.task('build_dev', gulp.series(
    delDev,
    gulp.parallel(
      copyImg,
      copySlice,
      compileJs,
      copySvg,
      // copyJs,
      copyMedia,
      compileLess,
      compileSass
    ),
     //  周玉杰加的，如果代码怕不起来可以删除 开始 
     ...(config.supportREM ? [compileAutoprefixer] : []),
     //  周玉杰加的，如果代码怕不起来可以删除 结束 
    compileHtml,
    svgSymbols,
    gulp.parallel(
      watch,
      loadPlugin
    ),
    startServer
  ));

  gulp.task('test', gulp.series(delDev));
};