// ===================================================
// CSS Grid Layout Helper
//
// To convert some of the CSS Grid Spec 2 features to Spec 1
//
// Author: Sascha Fuchs
//
// ===================================================

/// Add Gap between the boxes
///
/// @group core - cssgrid
///
/// @param   {list}    $boxes - List with box sizes
/// @param   {string}  $gap - Optional column gap
@function boxAndGap($boxes, $gap) {
  $box: ();

  @for $i from 1 through length($boxes) {
    $box: append($box, nth($boxes, $i), comma);

    // Adding Gap Between
    @if $gap > 0 {
      // Not last Loop
      @if $i != length($boxes) {
        $box: append($box, $gap, comma);
      }
    }
  }

  @return unquote(sl-to-string($box, ' '));
}

/// To build Grid Template Columns with optional gap
///
/// @group core - cssgrid
///
/// @param   {string}  $gap - Optional column gap
/// @param   {list}    $columns - Columnsizes comma seperated
///
/// @require {function} strip-units - Strip Units Function
///
/// @example scss - scss
///   .test {
///     @include grid-columns(10px, 250px, 1fr, 50px, 100px);
///   }
@mixin grid-columns($gap, $columns) {
  /* autoprefixer: off */
  grid-template-columns: unquote(sl-to-string($columns, ' '));
  /* autoprefixer: on */
  @if $gap > 0 {
    grid-column-gap: $gap;
  }

  .old-grid-spec & {
    -ms-grid-columns: boxAndGap($columns, $gap);
  }
}

/// To build Grid Template Rows with optional gap
///
/// @group core - cssgrid
///
/// @param   {string}  $gap - Optional row gap
/// @param   {list}    $rows - Rowsizes comma seperated
///
/// @require {function} strip-units - Strip Units Function
///
/// @example scss - scss
///   .test {
///     @include grid-rows(10px, 1fr);
///   }
@mixin grid-rows($gap, $rows) {
  /* autoprefixer: off */
  grid-template-rows: unquote(sl-to-string($rows, ' '));
  /* autoprefixer: on */
  @if $gap > 0 {
    grid-column-gap: $gap;
    grid-row-gap: $gap;
  }

  .old-grid-spec & {
    -ms-grid-rows: boxAndGap($rows, $gap);
  }
}

/// Generate a Grid Template Area from a Grid Map
///
/// @group core - cssgrid
///
/// @param   {string}  $area - Name of the Area
/// @param   {map}     $map - Map of your grid area matrix
///
/// @example scss - scss
///    $gridAreaMap: (
///      row1: ('logo', 'nav', 'nav', 'nav'),
///      row2: ('logo', 'empty', 'search', 'search')
///    );
///    @include grid-matrix($gridAreaMap);
@mixin grid-matrix($map) {
  $matrix: ();

  @each $index, $row in $map {
    $matrix: append($matrix, sl-to-string($row, ' '), space);
  }

  grid-template-areas: $matrix;
}

/// Generate Coordinates based on Grid Matrix and the selected area
///
/// @group core - cssgrid
///
/// @param   {string}  $area - Name of the Area
/// @param   {map}     $map - Map of your grid area matrix
/// @param   {bool}    $columnGap - If you use Gap for Columns
/// @param   {bool}    $rowGap - If you use Gap for Rows
///
/// @example scss - scss
///    $gridAreaMap: (
///      row1: ('logo', 'nav', 'nav', 'nav'),
///      row2: ('logo', 'empty', 'search', 'search')
///    );
///    @include grid-area(logo, $gridAreaMap, true);
@mixin grid-area($area, $map, $columnGap: false, $rowGap: false) {
  // Init Vars
  $gridColumnStart: '';
  $gridColumnEnd: '';
  $gridRows: ();
  $gridRowHeight: '';
  $areaExists: 0;

  // Output regular Area
  grid-area: $area;

  // Generate Old Spec Coordinates based on Area
  .old-grid-spec & {
    // Get Width element
    @for $i from 1 through length($map) {
      @if sl-contain(map-get($map,row#{$i}), $area) {
        $areaExists: append($areaExists, 1);
        $gridRowHeight: append($gridRowHeight, $i);
        $gridColumnStart: index(map-get($map,row#{$i}), $area);
        $gridColumnEnd: sl-last-index(map-get($map,row#{$i}), $area);
        $gridRows: append($gridRows, $i);
      }
    }

    // If Area exists in the Map
    @if length($areaExists) > 1 {
      // Convert Coordinate if Column Gap is active
      @if $columnGap {
        -ms-grid-column: $gridColumnStart + ($gridColumnStart - 1);

        @if $gridColumnEnd - $gridColumnStart > 0 {
          -ms-grid-column-span: $gridColumnEnd - $gridColumnStart + 1 + ($gridColumnEnd - $gridColumnStart);
        }

      } @else {
        -ms-grid-column: $gridColumnStart;

        @if $gridColumnEnd - $gridColumnStart > 0 {
          -ms-grid-column-span: $gridColumnEnd - $gridColumnStart + 1;
        }
      }

      // Add Row Coordinates
      @if nth($gridRows,1) > 1 or length($gridRowHeight) - 1 > 1 {
        // Convert Coordinate if Row Gap is active
        @if $rowGap {
          -ms-grid-row: nth($gridRows,1) + (nth($gridRows,1) - 1);

          @if length($gridRowHeight) - 1 > 1 {
            -ms-grid-row-span: length($gridRowHeight) - 1 + (length($gridRowHeight));
          }

        } @else {
          -ms-grid-row: nth($gridRows,1);

          @if length($gridRowHeight) - 1 > 1 {
            -ms-grid-row-span: length($gridRowHeight) - 1;
          }
        }
      }
    }
  }
}