import path from 'path';
import del from 'del';

import { dest, parallel, series, src, watch as _watch } from 'gulp';
import concat from 'gulp-concat';
import globby from 'globby';
import sass from 'gulp-sass';
import babelify from 'babelify';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';

const PROJECT_DIR = path.join('src', 'newsreader');
const STATIC_DIR = path.join(PROJECT_DIR, 'static');
const CSS_SUFFIX = 'css/';
const JS_SUFFIX = 'js/';

const SASS_DEST_DIR = path.join(STATIC_DIR, CSS_SUFFIX);
const JS_DEST_DIR = path.join(STATIC_DIR, JS_SUFFIX);

const SASS_DIR = path.join(PROJECT_DIR, 'scss');
const JS_DIR = path.join(PROJECT_DIR, 'js');

const clean = () => {
  return del([`${STATIC_DIR}/${CSS_SUFFIX}/*.css`, `${STATIC_DIR}/${JS_SUFFIX}/*.js`]);
};

const sassTask = () => {
  return src(`${SASS_DIR}/index.scss`)
    .pipe(sass().on('error', sass.logError))
    .pipe(concat(`main.css`))
    .pipe(dest(SASS_DEST_DIR));
};

const babelTask = () => {
  const getDirName = filename => {
    const fragments = filename.split('/');

    return fragments[fragments.length - 2];
  };

  const promise = globby([`${JS_DIR}/pages/**/index.js`]).then(entries => {
    entries.forEach(entry => {
      const bundle = browserify({ entries: entry, debug: true });
      const transpiledBundle = bundle.transform(babelify);
      const bundleName = getDirName(entry);

      return transpiledBundle
        .bundle()
        .pipe(source('index.js'))
        .pipe(buffer())
        .pipe(concat(`${bundleName}.js`))
        .pipe(dest(JS_DEST_DIR));
    });
  });

  return Promise.resolve(promise);
};

export const watch = () => {
  return _watch(
    [`${PROJECT_DIR}/scss/**/*.scss`, `${PROJECT_DIR}/js/**/*.js`],
    { ignoreInitial: false },
    done => {
      series(clean, parallel(sassTask, babelTask))(done);
    }
  );
};

export default series(clean, parallel(babelTask, sassTask));