import { readdir } from 'node:fs/promises'
import { existsSync } from 'node:fs'

import { src, dest, watch, series } from 'gulp'
import fileinclude from 'gulp-file-include'
import rename from 'gulp-rename'
import concat from 'gulp-concat'
import postcss from 'gulp-postcss'
import combineMq from 'postcss-sort-media-queries'

async function listDir(directoryPath) {
    const entries = await readdir(directoryPath, { withFileTypes: true })
    const subfolders = entries
      .filter(entry => entry.isDirectory())
      .map(entry => entry.name)

    return subfolders  
}

const dir = import.meta.dirname

async function html() {   
    const pages = await listDir('./src/pages')

    pages.forEach(page=>{
        if(existsSync(`${dir}/src/pages/${page}/${page}.html`)){
            return src([`./src/pages/${page}/${page}.html`])
                .pipe(fileinclude({
                    prefix: '@@',
                    basepath: '@file',
                    basename: page
                }))
                .pipe(rename(page+'.html'))
                .pipe(dest('./dst/'))
        }        
    })
}

async function css() {
     return src(['./src/pages/**/*.css', './src/components/**/*.css'])
         .pipe(concat('styles.css'))
         .pipe(postcss([combineMq]))
         .pipe(dest('./dst/css/'))
}

async function watcher() {
  await watch(
    ['./src/pages/**/*.html', './src/components/**/*.html', './src/pages/**/*.css', './src/components/**/*.css'],
    series(html, css)
  );
}



export default series(html, css, watcher)