let mix = require('laravel-mix'),
    postcss = require('postcss'),
    sprites = require('postcss-sprites'),
    publicPath = 'public/assets/front',
    resourcePath = 'resources/assets/front',
    spritePathInSCSS = 'images/sprites/';


mix .setPublicPath(path.normalize(publicPath))
    .sass(`${resourcePath}/sass/base.scss`, 'css/base.css')
    .options({
        autoprefixer: {
            options: {
                browsers: ['last 2 versions']
            }
        },
        resourceRoot: '../',
        postCss: [
            sprites({
                spritePath: `${publicPath}/images`,
                filterBy: image => {
                    if (image['originalUrl'].indexOf(spritePathInSCSS) === -1) {
                        return Promise.reject();
                    }
                    return Promise.resolve();
                },
                spritesmith: {
                    padding: 5
                },
                verbose: true,
                hooks: {
                    onUpdateRule: function(rule, token, image) {

                        let backgroundSizeX = (image.spriteWidth / image.coords.width) * 100,
                            backgroundSizeY = (image.spriteHeight / image.coords.height) * 100,
                            backgroundPositionX = (image.coords.x / (image.spriteWidth - image.coords.width)) * 100,
                            backgroundPositionY = (image.coords.y / (image.spriteHeight - image.coords.height)) * 100;

                        backgroundSizeX = isNaN(backgroundSizeX) ? 0 : backgroundSizeX;
                        backgroundSizeY = isNaN(backgroundSizeY) ? 0 : backgroundSizeY;
                        backgroundPositionX = isNaN(backgroundPositionX) ? 0 : backgroundPositionX;
                        backgroundPositionY = isNaN(backgroundPositionY) ? 0 : backgroundPositionY;

                        const backgroundImage = postcss.decl({
                            prop: 'background-image',
                            value: `url('${image.spriteUrl}')`
                        });

                        //image.spriteUrl: '../../../../public/assets/front/images/sprite.svg'

                        const backgroundSize = postcss.decl({
                            prop: 'background-size',
                            value: `${backgroundSizeX}% ${backgroundSizeY}%`
                        });

                        const backgroundPosition = postcss.decl({
                            prop: 'background-position',
                            value: `${backgroundPositionX}% ${backgroundPositionY}%`
                        });

                        rule.insertAfter(token, backgroundImage);
                        rule.insertAfter(backgroundImage, backgroundPosition);
                        rule.insertAfter(backgroundPosition, backgroundSize);
                    }
                }
            })
        ]
    })
    .js(`${resourcePath}/js/app.js`, 'js/app.js')
    .copy(`${resourcePath}/images/single`, `${publicPath}/images`, false)
    .version();