const mix = require('laravel-mix');
const discardComments = require('postcss-discard-comments');
require('laravel-mix-purgecss');
require('laravel-mix-imagemin');
const imageminWebp = require('imagemin-webp');
const httpRequest = require('request');
const critical = require('critical');
const fs = require('fs');
const { PurgeCSS } = require('purgecss');
const optimizedPath = 'public/css/optimized';

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

const scripts = [
    'resources/vendor/modernizr/modernizr.min.js',
    'resources/vendor/jquery/jquery.min.js',
    'resources/vendor/jquery.appear/jquery.appear.min.js',
    'resources/vendor/jquery.easing/jquery.easing.min.js',
    'resources/vendor/jquery-cookie/jquery-cookie.min.js',
    'resources/vendor/bootstrap/js/bootstrap.min.js',
    'resources/vendor/common/common.min.js',
    'resources/vendor/jquery.validation/jquery.validation.min.js',
    'resources/vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.min.js',
    'resources/vendor/jquery.gmap/jquery.gmap.min.js',
    'resources/vendor/jquery.lazyload/jquery.lazyload.min.js',
    'resources/vendor/isotope/jquery.isotope.min.js',
    'resources/vendor/owl.carousel/owl.carousel.min.js',
    'resources/vendor/magnific-popup/jquery.magnific-popup.min.js',
    'resources/vendor/vide/vide.min.js',
    'resources/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js',
    'resources/js/theme.js',
    'resources/vendor/rs-plugin/js/jquery.themepunch.tools.min.js',
    'resources/vendor/rs-plugin/js/jquery.themepunch.revolution.min.js',
    'resources/js/demos/demo-hotel.js',
    'resources/js/jquery.cookie.js',
    'resources/js/custom.js',
    'resources/js/theme.init.js',
];

mix
    .options({
        processCssUrls: false
    })
    .postCss('resources/css/app.css', 'public/css/all.css', [
        discardComments({
            removeAll: true
        })
    ])
    // .purgeCss({
    //     content: [
    //         'resources/views/layouts/public.blade.php',
    //         'resources/views/public/*',
    //         'resources/views/include/*',
    //         ...scripts
    //     ],
    //     safelist: [
    //         'flag-icon-hr',
    //         'flag-icon-en',
    //         'flag-icon-de'
    //     ]
    // })
    .scripts([
        ...scripts
    ], 'public/js/all.js')
    // .imagemin(
    //     'images/**/*',
    //     {
    //         context: 'resources',
    //     },
    //     {
    //         optipng: null,
    //         jpegtran: null,
    //         plugins: [
    //             imageminWebp({quality: 50})
    //         ],
    //     }
    // )
    .version();

// Purge and critical CSS per page
// mix
//     .then(() => {
//
//         console.log("Build Post-Processing...");
//
//         const criticalRoutes = [
//             {
//                 url: 'http://cmsv2.test',
//                 save: 'index.css'
//             },
//             {
//                 url: 'http://cmsv2.test/o-nama',
//                 save: 'about-us.css'
//             },
//             {
//                 url: 'http://cmsv2.test/blog',
//                 save: 'posts.css'
//             },
//             {
//                 url: 'http://cmsv2.test/kontakt',
//                 save: 'contact.css'
//             },
//             {
//                 url: 'http://cmsv2.test/hvala-vam',
//                 save: 'thank-you.css'
//             },
//             {
//                 url: 'http://cmsv2.test/pravila-privatnosti',
//                 save: 'privacy-policy.css'
//             }
//         ];
//
//         criticalRoutes.forEach((route) => {
//
//             console.log("Fetching critical CSS paths...", route.url)
//
//             httpRequest(route.url, (error, response, body) => {
//
//                 /** Stop on Empty Body String */
//                 if (!body) {
//                     throw new Error("Response Body Empty!")
//                 }
//                 /** Stop on HTTP Error */
//                 if (error) {
//                     throw new Error(error)
//                 }
//
//                 /** Get js files from body */
//                 const regexp = /(?<="\/)([A-z0-9-_+]+\/)+(?!(html5shiv.js|respond.js))([A-z0-9.-]+\.(js))/gm;
//
//                 const matches = body.match(regexp);
//
//                 if(matches === null) {
//                     console.log(body, route.url);
//                     throw new Error('No matches for URL: ' + route.url);
//                 }
//
//                 const jsFiles = Array.from(matches, m => 'public/' + m);
//
//                 console.log('Processing purge CSS...', route.url);
//
//                 new PurgeCSS().purge({
//                     content: [
//                         {
//                             raw: body
//                         },
//                         ...jsFiles
//                     ],
//                     css: ['public/css/all.css'],
//                     keyframes: true,
//                     variables: true,
//                     fontFace: true
//                 }).then(purgeCSSResult => {
//
//                     if (!fs.existsSync(optimizedPath)){
//                         fs.mkdirSync(optimizedPath);
//                     }
//
//                     fs.writeFile(`${optimizedPath}/__${route.save}`, purgeCSSResult[0].css, function (err) {
//                         if (err) throw err;
//                         console.log('Purge CSS generated successfully...', route.url);
//
//                         console.log("Processing critical CSS paths...", route.url)
//
//                         critical.generate({
//                             html: body,
//                             css: [`${optimizedPath}/__${route.save}`],
//                             width: 1300,
//                             height: 900,
//                             rebase: false,
//                             ignore: {
//                                 atrule: ['@font-face']
//                             }
//                         }).then(({css, html, uncritical}) => {
//                             fs.unlink(`${optimizedPath}/__${route.save}`, (err) => {
//                                 if (err) throw err;
//                                 console.log("Purge CSS deleted successfully...", `${optimizedPath}/__${route.save}`)
//                             });
//                             fs.writeFile(`${optimizedPath}/_${route.save}`, css, function (err) {
//                                 if (err) throw err;
//                                 console.log('Critical CSS generated successfully...', route.url);
//                             });
//                             fs.writeFile(`${optimizedPath}/${route.save}`, uncritical, function (err) {
//                                 if (err) throw err;
//                                 console.log('Uncritical CSS generated successfully...', route.url);
//                             });
//                         });
//                     });
//                 });
//             });
//         });
//     });