'use strict';

var fs = require('fs');
var path = require('path');
var test = require('tap').test;
var browserify = require('browserify');
var concatStream = require('concat-stream');
var jsdom = require('jsdom');
var browserifyCSSTransform = require('../');

test('load style sheets at run time', function(t) {
    var b = browserify()
        .add('test/fixtures/submodules')
        .transform(browserifyCSSTransform, { stripComments: true })
        .require('./browser', { expose: 'browserify-css' })
        .bundle();

    b.pipe(concatStream(function(bundle) {
        var html = fs.readFileSync('./test/fixtures/submodules/index.html');
        jsdom.env({
            html: html,
            src: [
                fs.readFileSync('./test/fixtures/jquery.js'),
                bundle
            ],
            features: {
                FetchExternalResources: ['script'],
                ProcessExternalResources: ['script'],
                SkipExternalResources: false
            },
            done: function(errors, window) {
                if (errors) {
                    t.fail(errors);
                    return t.end();
                }

                var $ = window.jQuery;
                var $foo = $('#container .foo');
                var $bar = $('#container .bar');

                t.ok($foo.length > 0);
                t.equal($foo.text(), 'foo module', 'the inner text should be "foo module"');
                t.equal(window.getComputedStyle($foo.get(0))._values['background-color'], 'rgb(204, 204, 204)', 'the computed style of background-color property for the element should be #ccc');
                t.ok($bar.length > 0);
                t.equal($bar.text(), 'bar module', 'the inner text should be "bar module"');
                t.equal(window.getComputedStyle($bar.get(0))._values['background-color'], 'rgb(238, 238, 238)', 'the computed style of background-color property for the element should be #eee');

                t.end();
            }
        });
    }));
});

test('processRelativeUrl with media query', function(t) {
    var cssTransform = require('../css-transform');
    var inputFile = path.resolve(__dirname, 'fixtures/app.css');
    var outputFile = path.resolve(__dirname, 'fixtures/app.output.css');

    cssTransform({
        rootDir: path.resolve(__dirname, 'fixtures'),
        rebaseUrls: true,
        processRelativeUrl: function(relativeUrl) {
            return 'images/' + relativeUrl;
        }
    }, inputFile, function(data) {
        t.same(data, fs.readFileSync(outputFile, 'utf-8'));
        t.end();
    });
});

test('processInlineImages in css file', function(t) {
    var cssTransform = require('../css-transform');
    var inputFile = path.resolve(__dirname, 'fixtures/app.css');
    var outputFile = path.resolve(__dirname, 'fixtures/app.inline.css');

    cssTransform({
				inlineImages: true
    }, inputFile, function(data) {
				fs.writeFileSync('/tmp/output',data);
        t.same(data, fs.readFileSync(outputFile, 'utf-8'));
        t.end();
    });
});

test('processInlineImages in css file with files larger than ', function(t) {
    var cssTransform = require('../css-transform');
    var inputFile = path.resolve(__dirname, 'fixtures/app.css');
    var outputFile = path.resolve(__dirname, 'fixtures/app.inline-small.css');

    cssTransform({
		inlineImages: true,
        inlineImagesOptions: {
            limit: 100000
        },
        rebaseUrls: false
    }, inputFile, function(data) {
        t.same(data, fs.readFileSync(outputFile, 'utf-8'));
        t.end();
    });
});
