import browserify from 'browserify'; // Bundles JS
import extractRegistry from 'browserify-extract-registry';
import browserifyInc from 'browserify-incremental';
import connect from 'gulp-connect'; //Runs a local dev server
import inject from 'gulp-inject-string';
import open from 'gulp-open'; //Open a URL in a web browser
import rename from 'gulp-rename';
import merge from 'merge2';
import path from 'path';
// const splitter = require('browserify-splitter');
import splitRequire from 'split-require';
import buffer from 'vinyl-buffer';
import source from 'vinyl-source-stream'; // Use conventional text streams with Gulp
import watchify from 'watchify';
import { distKeyName, pathSearcher, preventPath } from './paths';

const config = {
  port: 9005,
  devBaseUrl: 'localhost',
  bundleName: 'bundle',
  PUBLIC_URL: '.'
}
//Start a local development server
gulp.task('connect', function () {
  return connect.server({
    root: ['dist'],
    host: config.devBaseUrl,
    port: config.port,
    debug: false,
    livereload: true
  });
});


gulp.task('html', function () {
  return merge([
    gulp.src([pathSearcher(paths.appPublic), `!${paths.appHtml}`]).pipe(rename({
      dirname: '.'
    })),
    gulp.src(paths.appHtml)
      .pipe(inject.before('</body>', `<script src="%PUBLIC_URL%/${distKeyName.jsDir}/${config.bundleName}.js"></script>\n`))
      .pipe(inject.after('</title>', `<link rel="stylesheet" href="%PUBLIC_URL%/${distKeyName.cssDir}/${config.bundleName}.css" />\n`))
      .pipe(inject.replace('%PUBLIC_URL%', config.PUBLIC_URL))
  ])
    .pipe(gulp.dest(paths.appDist))
    .pipe(connect.reload());
});

// const fileList = []
// const targetList = []

const b = browserify({
  entries: [
    paths.appEntryJs
  ],
  debug: true,
  cache: {},
  fullPaths: true,
  packageCache: {}
})
const watchifyBrowser = watchify(browserifyInc(b, { cacheFile: paths.appBrowserifyCache }))
  .plugin(extractRegistry, {
    outputFile: paths.appDepregistry
  })
  .plugin(splitRequire, {
    dir: paths.appDistScriptsDir,
    // filename(entry: any) {
    //   const base = /(.*?)node_modules(.*?)/.test(entry.file) ? paths.appNodeModules : paths.appPath
    //   const filePath = path.relative(base, entry.file)
    //   const fileDir = path.join(paths.appDistScriptsDir, path.dirname(filePath))
    //   preventPath(fileDir)
    //   return filePath
    // },
    public: `./${distKeyName.jsDir}`
  })
  .transform("imgurify")
  .transform(require('browserify-css'), {
    global: true,
    minify: true,
    // output: (() => {
    //   return path.join(preventPath(`./${distKeyName.distDir}/${distKeyName.cssDir}`), `${config.bundleName}.css`)
    // })()
  })
  // .plugin(lrload)
  .transform("babelify", {
    presets: ["@babel/preset-env"],
    extensions: ['.js'],
    plugins: [
      // "react-hot-loader/babel",
      "@babel/plugin-syntax-dynamic-import",
      "dynamic-import-split-require"
    ]
  })
// .plugin(hmr, {
//   supportModes: ['ajax', 'fs']
// })

gulp.task('js', function () {
  preventPath(paths.appDistScriptsDir)
  return watchifyBrowser
    .bundle()
    .on('error', console.error.bind(console))
    .pipe(source(`${config.bundleName}.js`))
    .pipe(buffer())
    // .pipe(uglify())
    // .pipe(sourcemaps.init())
    // .pipe(sourcemaps.write(paths.appDistScriptsDir)))
    .pipe(gulp.dest(paths.appDistScriptsDir))
    // 这会输出一个压缩过的并且重命名未 foo.min.js 的文件
    .pipe(connect.reload());
});

gulp.task('preserve', function () {
  return gulp.src([paths.appCssMatcher, paths.appSvgMatcher])
    .pipe(gulp.dest(paths.appLib));
});
// gulp.task('css', function () {
//   return gulp.src(paths.appCssMatcher)
//     .pipe(concat(`${config.bundleName}.css`))
//     .pipe(gulp.dest(paths.appDistCssDir));
// });

// gulp.task('lint', function () {
//   return gulp.src(config.paths.js)
//     .pipe(lint({ config: 'eslint.config.json' }))
//     .pipe(lint.format());
// });

gulp.task('watch', function () {
  gulp.watch(paths.appHtml, gulp.series('html'));
  // gulp.watch(config.paths.js, ['js', 'lint']);
  gulp.watch('./lib/**/*.js', gulp.series('js'));
});

gulp.task('open', gulp.parallel(['connect', 'watch', function () {
  return gulp.src(paths.appDistMainHTML)
    .pipe(open({ uri: `http://${config.devBaseUrl}:${config.port}/` }));
}]));

const serve = gulp.series('preserve', 'js', 'html', 'open')

// gulp.task('server', gulp.series(['html', 'js', 'css', 'lint', 'open', 'watch']));
gulp.task('server', serve);

export default serve