import gulp from 'gulp';
import del from 'del';
import webpack from 'webpack-stream';
import named from 'vinyl-named';
import csswring from 'csswring';
import autoprefixer from 'autoprefixer';
import wct from 'web-component-tester';
import notify from 'gulp-notify';
import vulcanize from 'gulp-vulcanize';
import gulpif from 'gulp-if';
import eslint from 'gulp-eslint';
import postcss from 'gulp-postcss';
import plumber from 'gulp-plumber';
import browserSync from 'browser-sync';
import { simplaImports, name as ELEMENT_NAME } from './bower.json';

const imports = simplaImports.map(dep => `../${dep}`),
      bs = browserSync.create();

// Get WCT going
wct.gulp.init(gulp);

const options = {
        webpack: {
          output: {
            filename: '[name].js'
          },
          module: {
            loaders: [
              { test: /\.js$/, loader: 'babel-loader' }
            ]
          }
        },
        postcss: [ csswring(), autoprefixer() ],
        vulcanize: {
          inlineCss: true,
          inlineScripts: true,
          addedImports: imports
        }
      },
      errorNotifier = () => plumber({ errorHandler: notify.onError('Error: <%= error.message %>') });

gulp.task('process', () => {
  return gulp.src('src/*.{html,js,css}')
          .pipe(errorNotifier())
          .pipe(named())

            .pipe(gulpif('*.css', postcss(options.postcss)))

            .pipe(gulpif('*.js', eslint()))
            .pipe(gulpif('*.js', eslint.format()))
            .pipe(gulpif('*.js', eslint.failAfterError()))

            .pipe(gulpif('*.js', webpack(options.webpack)))
          .pipe(gulp.dest('.tmp'));
});

gulp.task('build', ['process'], () => {
  return gulp.src(`.tmp/*.html`)
          .pipe(errorNotifier())
          .pipe(vulcanize(options.vulcanize))
          .pipe(gulp.dest('.'));
});

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

gulp.task('demo', (callback) => {
  gulp.watch('./*.{html,js}').on('change', bs.reload);

  return bs.init({
    server: {
      baseDir: './',
      index: 'demo/index.html',
      routes: {
        '/': './bower_components',
        [`/${ELEMENT_NAME}.html`]: `./${ELEMENT_NAME}.html`
      }
    }
  });
});

gulp.task('test', ['build', 'test:local']);

gulp.task('watch', () => gulp.watch(['src/**/*'], ['build']));
gulp.task('default', ['build', 'demo', 'watch']);

@@ -1073,16 +1073,313 @@
 imports%0A
+        %7D,%0A        browserSync: %7B%0A          server: %7B%0A            baseDir: './',%0A            index: 'demo/index.html',%0A            routes: %7B%0A              '/': './bower_components',%0A              %5B%60/$%7BELEMENT_NAME%7D.html%60%5D: %60./$%7BELEMENT_NAME%7D.html%60%0A            %7D%0A          %7D,%0A          open: false%0A
         
@@ -2298,205 +2298,27 @@
 nit(
-%7B%0A    server: %7B%0A      baseDir: './',%0A      index: 'demo/index.html',%0A      routes: %7B%0A        '/': './b
+options.br
 ow
+s
 er
-_components',%0A        %5B%60/$%7BELEMENT_NAME%7D.html%60%5D: %60./$%7BELEMENT_NAME%7D.html%60%0A      %7D%0A    %7D%0A  %7D
+Sync
 );%0A%7D

move browsersync options to options block