var gulp = require('gulp');
var gutil = require('gulp-util');
var rename = require('gulp-rename');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var cheerio = require('cheerio');
var gcheerio = require('gulp-cheerio');
var through2 = require('through2');
var path = require('path');

var iconsource = 'icons/*.svg'

function build(cb) {
  gulp
    .src(iconsource)
    .pipe(rename({prefix: 'icon-'}))
    .pipe(svgmin(function getOptions(file){
      var prefix = path.basename(
        file.relative,
        path.extname(file.relative)
      );
      return {
        plugins: [
          {
            removeViewBox: false,
            removeTitle: false,
            cleanupIDs: {
              prefix: prefix + '-',
              minify: true
            }
          },
        ],
        js2svg: {
          pretty: true,
        },
      }
    }))
    .pipe(gcheerio({
      run: function ($) {
          // remove green-screen color
          $('[fill="#50E3C2"]').removeAttr('fill').parents('[fill="none"]').removeAttr('fill');
          $('[fill="#BD0FE1"]').attr('fill', 'currentColor').parents('[fill="none"]').removeAttr('fill');
          // color in Sketch changed slightly BD0FE1 -> BD10E0
          $('[fill="#BD10E0"]').attr('fill', 'currentColor').parents('[fill="none"]').removeAttr('fill');
      },
      parserOptions: { xmlMode: true }
    }))
    .pipe(svgstore())
    .pipe(through2.obj(function (file, encoding, cb) {
      // Side effect: generate app/assets/stylesheets/svg-dimensions.css with
      //  information about the available icon sizes.
      var $ = cheerio.load(file.contents)
      var data = $('svg > symbol').map(function (_i, tag) {
        var viewBox = tag.attribs.viewbox.split(" ")
        return [
          '.'+ $(this).attr('id') + ' {' +
            ' width: ' + viewBox[2] + 'px;' +
            ' height: ' + viewBox[3] + 'px; ' +
          '}'
        ];
      }).get();
      var cssFile = new gutil.File({
          path: '../../../app/assets/stylesheets/svg-dimensions.css',
          contents: Buffer.from(data.join("\n"))
      });
      this.push(cssFile);
      this.push(file);
      cb();
    }))
    .pipe(gulp.dest('./'));
  cb();
}

exports.default = function(cb) {
  gulp.watch(iconsource, build);
  cb();
}
exports.build = build