@use 'sass:map';
@use 'sass:meta';
@use 'sass:list';
@use '../helpers/grid';
@use '../helpers/break';
@use '../helpers/custom-properties';

$column-count : 6 !default;
$gaps         : clamp(64px, 6vh, 128px) clamp(16px, 3vw, 32px) !default;
$max-width    : 1280px !default;
$set-children : true !default;

$gap-spacer   : var(--grid-gap, 0px);
$gap-gutter   : var(--grid-gap, 0px);

@if ( meta.type-of($gaps) == 'list' ) {
  $gap-spacer : list.nth($gaps, 1);
  $gap-gutter : if(list.length($gaps) > 1, list.nth($gaps, 2), list.nth($gaps, 1));
}

$_base-columns : ();

@for $i from 1 through ($column-count + 1) {
  @if ($i == 1) { 
    $_base-columns : map.set($_base-columns, "column-left-gutter", $i); 
  } @else if ($i == $column-count) { 
    $_base-columns : map.set($_base-columns, "column-right-gutter", $i + 2); 
  } @else {
    $_base-columns : map.set($_base-columns, #{"column-" + ($i - 1)}, $i); 
  }
  @if ($i == 2) { 
    $_base-columns : map.set($_base-columns, "column-first", $i); 
  } @else if ($i == $column-count) { 
    $_base-columns : map.set($_base-columns, "column-last", $i + 1); 
  }
}

@function base-column($column) {
  @return map.get($_base-columns, "column-" + $column);
}

@mixin inherit() { @include grid.inherit(); }

@mixin base($column-count : $column-count, $gaps : $gaps, $max-width : $max-width) {

  $gap-spacer   : $gaps;
  $gap-gutter   : $gaps;

  @if ( meta.type-of($gaps) == 'list' ) {
    $gap-spacer : list.nth($gaps, 1);
    $gap-gutter : if(list.length($gaps) > 1, list.nth($gaps, 2), list.nth($gaps, 1));
  }

  $grid-gutter-columns         : calc(max(var(--gutter1), var(--negative-single-gutter-width)) - var(--gutter1));
  $grid-main-columns           : repeat(var(--grid-base-column-count), minmax(0, var(--grid-base-column-width)));
  $grid-columns-devided        : $max-width '/' var(--grid-base-column-count);
  $grid-columns-devided-offset : (var(--grid-gutter, 0px) '-' (var(--grid-gutter, 0px) '/' var(--grid-base-column-count)));

  --grid-base-column-count     : #{$column-count};
  --grid-base-column-width     : calc(#{$grid-columns-devided} - #{$grid-columns-devided-offset});
  --grid-base-template-columns : #{$grid-gutter-columns $grid-main-columns $grid-gutter-columns};
  --grid-base-gutter           : #{$gap-gutter};
  --grid-base-spacer           : #{$gap-spacer};
  --grid-base-column           : 1 / -1;

  display               : grid;
  grid-template-columns : var(--grid-base-template-columns, auto);
  grid-gap              : var(--grid-base-spacer, 0px) var(--grid-base-gutter, 0px);
  align-content         : start; 

  > * { grid-column : var(--grid-base-column); }

  @content;

}

@mixin blowout() {
  @include custom-properties.negative-single-gutter-width(var(--breakpoint-max, #{$max-width}));
  padding-left  : var(--blowout-padding-left,  max(#{$gap-gutter}, var(--negative-single-gutter-width)));
  padding-right : var(--blowout-padding-right, max(#{$gap-gutter}, var(--negative-single-gutter-width)));
  @supports not ( width:max(1px, 5px)) {
    padding-left  : var(--blowout-padding-left,  var(--negative-single-gutter-width));
    padding-right : var(--blowout-padding-right, var(--negative-single-gutter-width));
  }
}

@mixin fluid($column-count : $column-count, $gaps : $gaps, $max-width : $max-width) {

  $grid-columns-devided-offset : calc(var(--grid-gutter) * (var(--grid-column-count) - var(--grid-column-count-offset, 1)) + var(--scroll-bar-width, 0px));
  $grid-columns-devided        : calc(($max-width - ($grid-columns-devided-offset) - var(--grid-column-width-offset, 0px)) / var(--grid-column-count));
  $grid-main-columns           : repeat(var(--grid-column-repeat), minmax(var(--grid-column-width), 1fr));

  --grid-column-count     : #{$column-count};
  --grid-column-width     : #{$grid-columns-devided};

  --grid-template-columns : #{$grid-main-columns};
  --grid-gutter           : #{$gap-gutter};
  --grid-spacer           : #{$gap-spacer};
  --grid-column-repeat    : auto-fill;

  display               : grid;
  grid-template-columns : var(--grid-template-columns, auto);
  grid-gap              : var(--grid-spacer, 0px) var(--grid-gutter, 0px);
  align-content         : start; 

  @for $i from 1 through 12 {
    @if ( $i != $column-count ) {
      &.columns\:#{$i} { --grid-column-count : #{$i}; } 
    }
  }

  // &:not([class*="columns\:"]) {
  //   --grid-column-count:1; 
  // }

  @content;

}

@mixin wrap($column-count : $column-count, $gaps : $gaps, $max-width : $max-width) {

  $grid-columns-devided   : ($max-width '/' var(--grid-column-count));
  $grid-main-columns      : repeat(var(--grid-column-count), minmax(0, var(--grid-column-width)));

  --grid-column-count     : #{$column-count};
  --grid-column-width     : calc(#{$grid-columns-devided});

  --grid-template-columns : #{$grid-main-columns};
  --grid-gutter           : #{$gap-gutter};
  --grid-spacer           : #{$gap-spacer};

  display               : grid;
  grid-template-columns : var(--grid-template-columns, auto);
  grid-gap              : var(--grid-spacer, 0px) var(--grid-gutter, 0px);
  align-content         : start; 

  // The first number in the .col-X-X class name refers to the column starting point,
  // The second number is how many columns it spans for.
  // You may be wondering why I didn't just stick with the one-liner using custom properties. 
  // That method of column grids is too strict and would never reliable breakdown
  // natively because the content would always become overblown. 
  // We had to go the manual way so that we can address special situations as speicfic break points.  

  @for $i from 1 through 6 {
    @for $l from $i through 7 {
      $poperty : #{'--col-' + $i + '-span-' + ($l - $i + 1)};
      $value   : #{$i + ' / span ' + ($l - $i + 1)};
      #{$poperty} : #{$value};
      > #{".col\\:" + $i + "-span\\:" + ($l - $i + 1)} {
        grid-column: var(#{$poperty}, 1 / -1);
      }
      // @debug #{$poperty ':' $value}; 
    }
    > #{".col\\:" + $i} {
      grid-column: var(--col- + #{$i}, #{$i});
      &-span\:all { 
        grid-column : var(--col-#{$i}-span-all, #{$i} / -1);
      }
    }
  }

  > *:not([class*="col\:"]) { grid-column : var(--grid-column, 1 / -1); }
  > *:not([class*="row\:"]) { grid-row : var(--grid-row, auto); }

  @content;

}

@mixin no-wrap($column-count : $column-count, $gaps : $gaps, $max-width : $max-width) {

  $grid-columns-devided        : ($max-width '/' var(--grid-column-count));
  $grid-main-columns           : repeat(var(--grid-column-count), minmax(0, var(--grid-column-width)));

  --grid-column-count     : #{$column-count};
  --grid-column-width     : calc(#{$grid-columns-devided});

  --grid-template-columns : #{$grid-main-columns};
  --grid-gutter           : #{$gap-gutter};
  --grid-spacer           : #{$gap-spacer};

  display               : grid;
  grid-template-columns : var(--grid-template-columns, auto);
  grid-gap              : var(--grid-spacer, 0px) var(--grid-gutter, 0px);
  align-content         : start; 

  @for $i from 1 through 12 {
    @if ( $i != $column-count ) {
      &.columns\:#{$i} { --grid-column-count : #{$i}; } 
    }
  }

  // &:not([class*="columns\:"]) {
  //   --grid-column-count:1; 
  // }

  @content;

}