// -----------------------------------------------
// Grid Background

@mixin background-grid(
  $columns: null,
  $gutter: null,
  $gutter-style: null,
  $color: null
) {

  $color: if($color != null, $color, sgs-get('background grid color'));

  @if sgs-get('debug') != false {
    $columns: if($columns != null, $columns, sgs-get('grids'));
    $gutter: if($gutter != null, $gutter, sgs-get('gutters'));
    $gutter-style: if($gutter-style != null, $gutter-style, sgs-get('gutter styles'));

    @include background-build($columns, $gutter, $gutter-style, $color)
  }
}

@function background-map($columns, $gutters, $gutter-styles) {
  $Grids: ();
  $Gutters: ();
  $Styles: ();

  @if $columns and type-of($columns) != 'map' {
    $Grids: (-1px: $columns);
  }
  @else {
    $Grids: sgs-get('grids');
  }

  @if $gutters and type-of($gutters) != 'map' {
    $Gutters: (-1px: $gutters);
  }
  @else {
    $Gutters: sgs-get('gutters');
  }

  @if $gutter-styles and type-of($gutter-styles) != 'map' {
    $Styles: (-1px: $gutter-styles);
  }
  @else {
    $Styles: sgs-get('gutter styles');
  }

  // Build 1st Depth Map
  $Holder: ();

  // Grids
  @each $k, $v in $Grids {
    $Holder: map-merge($Holder, ($k: ('grid': $v)));
  }
  // Gutters
  @each $k, $v in $Gutters {
    $Grid: map-get($Holder, $k);

    $Map: ('gutter': $v);
    @if $Grid != null {
      $Grid: map-get($Grid, 'grid');
      @if $Grid != null {
        $Map: map-merge($Map, ('grid': $Grid));
      }
    }

    $Holder: map-merge($Holder, ($k: $Map));
  }
  // Style
  @each $k, $v in $Styles {
    $Grid: map-get($Holder, $k);
    $Gutter: map-get($Holder, $k);

    $Map: ('style': $v);
    @if $Grid != null {
      $Grid: map-get($Grid, 'grid');
      @if $Grid != null {
        $Map: map-merge($Map, ('grid': $Grid));
      }
    }
    @if $Gutter != null {
      $Gutter: map-get($Gutter, 'gutter');
      @if $Gutter != null {
        $Map: map-merge($Map, ('gutter': $Gutter));
      }
    }

    $Holder: map-merge($Holder, ($k: $Map));
  }

  $Holder: sort-map($Holder);
  $Return: ();

  // Build full stack for each breakpoint
  @for $i from 1 through length($Holder) {
    $Key: nth(nth($Holder, $i), 1);
    $Value: nth(nth($Holder, $i), 2);

    $Previous: ();
    @if $i > 1 {
      $Previous: nth(nth($Return, $i - 1), 2);
    }

    @if not map-has-key($Value, 'grid') {
      $Sort-Grid: map-get($Previous, 'grid');
      $Value: map-merge($Value, ('grid': $Sort-Grid));
    }

    @if not map-has-key($Value, 'gutter') {
      $Sort-Gutter: map-get($Previous, 'gutter');
      $Value: map-merge($Value, ('gutter': $Sort-Gutter));
    }

    @if not map-has-key($Value, 'style') {
      $Sort-Style: map-get($Previous, 'style');
      $Value: map-merge($Value, ('style': $Sort-Style));
    }

    $Return: map-merge($Return, ($Key: $Value));
  }

  @return $Return;
}

@mixin background-build($columns, $gutters, $gutter-styles, $color) {
  $Background-Map: background-map($columns, $gutters, $gutter-styles);
  $Display: true;

  $Column-Color: $color;
  $Inverse-Column-Color: mix(black, $color, 15%);
  $Gutter-Color: mix(white, $color, 25%);
  $Direction: named-direction(sgs-get('direction'));

  $encodeMap:(
    '%"':'%25%22',
    '<':'%3C',
    ' ':'%20',
    '=':'%3D',
    '\"':'%22',
    ':':'%3A',
    '/':'%2F',
    '.':'%2E',
    '>':'%3E',
    '#':'%23',
    '-':'%2D'
  );

  @each $bkpt, $def in $Background-Map {
    $Grid: map-get($def, 'grid');
    $Gutter: map-get($def, 'gutter');
    $Style: map-get($def, 'style');

    $Grid-Count: column-count($Grid);

    $SVG: '<svg xmlns="http://www.w3.org/2000/svg">';

    $Gutter-Width: gutter-span($Gutter, $Grid, $Style);
    @if unit($Gutter-Width) != '%' and unit($Gutter-Width) != '' {
      $Gutter-Width: 0%;
    }

    @if $Style == 'fixed' {
      $Gutter-Width: 0%;
    }
    $Counter-Width: 0%;
    $holder: ();

    @for $i from 1 through $Grid-Count {
      $Holder-Gradient: ();
      $Loop-Width: column-span(1, $i, $Grid, $Gutter, $Style);

      @if index($Style, 'split') and $i == 1 {
        $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Gutter-Color}" width="#{$Gutter-Width / 2}" height="100%"/>';
        $Counter-Width: ($Gutter-Width / 2);
      }

      $Loop-Color: $Column-Color;
      @if (index($Style, 'fixed') or $Gutter-Width == 0%) and ($i % 2 == 0 ) {
        $Loop-Color: $Inverse-Column-Color;
      }

      @if $i != $Grid-Count {
        @if unit($Counter-Width) == unit($Loop-Width) {
          $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Loop-Color}" width="#{$Loop-Width}" height="100%"/>';
          $Counter-Width: $Counter-Width + $Loop-Width;
          $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Gutter-Color}" width="#{$Gutter-Width}" height="100%"/>';
          $Counter-Width: $Counter-Width + $Gutter-Width;
        }
        @else {
          $Display: false;
        }

      }
      @else if $i == 1 {
        @if unit($Counter-Width) == unit($Loop-Width) {
          $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Loop-Color}" width="#{$Loop-Width}" height="100%"/>';
          $SVG: $SVG + '<rect x="#{$Loop-Width}" fill="#{$Gutter-Color}" width="#{$Gutter-Width}" height="100%"/>';
          $Counter-Width: $Counter-Width + $Loop-Width + $Gutter-Width;
        }
        @else {
          $Display: false;
        }

      }
      @else if $i == $Grid-Count and index($Style, 'split') {
        @if unit($Counter-Width) == unit($Loop-Width) {
          $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Loop-Color}" width="#{$Loop-Width}" height="100%"/>';
          $Counter-Width: $Counter-Width + $Loop-Width;
          $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Gutter-Color}" width="#{$Gutter-Width / 2}" height="100%"/>';
        }
        @else {
          $Display: false;
        }
      }
      @else {
        $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Loop-Color}" width="#{$Loop-Width}" height="100%"/>';
      }
    }

    $SVG: $SVG + '</svg>';

    @each $char, $code in $encodeMap {
      $index: str-index($SVG, $char);
      @while $index {
        $index: str-index($SVG, $char);
        $SVG: str-slice($SVG, 1, $index - 1) + $code + str-slice($SVG, $index + str-length($char));
        $index: str-index($SVG, $char);
      }
    }

    @if $Display {

      @if $bkpt != -1px {
        @include breakpoint($bkpt) {
          background-image: url('data:image/svg+xml,' + $SVG);
        }
      }
      @else {
        background-image: url('data:image/svg+xml,' + $SVG);
      }
    }
    @else {
      @warn 'Cannot generate a Background Grid for grid `#{$Grid}` with gutters `#{$Gutter}` and gutter style `#{$Style}`';
    }
  }
}