import { src, dest, watch, parallel, series } from 'gulp'
import del from 'del'
import fs from 'fs'
import yaml from 'js-yaml'
import browser from 'browser-sync'
import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'
const $ = require('gulp-load-plugins')()

const content = yaml.safeLoad(fs.readFileSync('./content.yml'))
const { links } = content

const SRC = './src'
const DIST = './dist'

//
// Delete build artifacts
//
export const clean = () => del(DIST + '/**/*')

//
// Styles
//
export const css = () =>
    src(SRC + '/styles/styles.scss')
        .pipe($.sass().on('error', $.sass.logError))
        .pipe($.postcss([autoprefixer(), cssnano()]))
        .pipe(dest(DIST + '/assets/css/'))

//
// Data injection with Liquid
//
export const template = () => {
    let locals = { links, content }

    return src(SRC + '/index.html')
        .pipe($.liquify(locals))
        .pipe(
            $.htmlmin({
                collapseWhitespace: true,
                conservativeCollapse: true,
                removeComments: true,
                useShortDoctype: true,
                collapseBooleanAttributes: true,
                removeRedundantAttributes: true,
                removeEmptyAttributes: true,
                minifyJS: true,
                minifyCSS: true
            })
        )
        .pipe(dest(DIST))
}

//
// Copy Fonts
//
export const fonts = () =>
    src(SRC + '/fonts/**/*').pipe(dest(DIST + '/assets/fonts/'))

//
// Copy Logo
//
export const logos = () =>
    src([
        'node_modules/@oceanprotocol/art/logo/**/*',
        'node_modules/@oceanprotocol/art/mantaray/**/*'
    ]).pipe(dest(DIST + '/assets/img/'))

//
// Copy Favicon
//
export const favicon = () => src(SRC + '/favicon.ico').pipe(dest(DIST))

//
// Revision static assets
//
export const rev = () =>
    src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff,woff2}')
        .pipe($.rev())
        .pipe(dest(DIST + '/assets/'))
        // output rev manifest for next replace task
        .pipe($.rev.manifest())
        .pipe(dest(DIST + '/assets/'))

//
// Replace all links to assets in files
// from a manifest file
//
export const revReplace = () => {
    let manifest = src(DIST + '/assets/rev-manifest.json')

    return src(DIST + '/**/*.{html,css,js}')
        .pipe($.revReplace({ manifest: manifest }))
        .pipe(dest(DIST))
}

//
// Watch for file changes
//
export const watchSrc = () =>
    watch([SRC, 'content.yml']).on('all', series(build, browser.reload))

//
// Dev Server
//
export const server = done => {
    browser.init({
        server: DIST,
        port: 1337
    })
    done()
}

//
// Full build
//
export const build = series(
    clean,
    parallel(template, css, fonts, favicon, logos),
    rev,
    revReplace
)

export const dev = series(build, server, watchSrc)

export default dev