/* stylelint-disable order/properties-order, declaration-empty-line-before */

@use "sass:map";
@use "sass:list";

@import "../settings/settings.grid";
@import "../tools/tools.breakpoints";

@mixin setResponsiveGridSize($desktopGridSize) {
  grid-template-columns: repeat($desktopGridSize, minmax(0, 1fr));

  @include for-screen-down(md) {
    grid-template-columns: repeat(get-table-landscape-grid-size($desktopGridSize), minmax(0, 1fr));
  }

  @include for-screen-down(sm) {
    grid-template-columns: repeat(get-table-portrait-grid-size($desktopGridSize), minmax(0, 1fr));
  }

  @include for-screen-down(xs) {
    display: block;
  }
}

@function get-table-landscape-grid-size($desktopGridSize) {
  @return min($desktopGridSize, $tabletLandscapeMaxGridSize);
}

@function get-table-portrait-grid-size($desktopGridSize) {
  @return min($desktopGridSize, $tabletPortraitMaxGridSize);
}

@mixin setResponsiveGridMarginRightForColumnsMax($desktopGridSize, $columnsMax) {
  margin-right: get-grid-margin-right-for-columns-max($desktopGridSize, $columnsMax);

  @include for-screen-down(md) {
    $gridSize: get-table-landscape-grid-size($desktopGridSize);
    margin-right: get-grid-margin-right-for-columns-max($gridSize, $columnsMax);
  }

  @include for-screen-down(sm) {
    $gridSize: get-table-portrait-grid-size($desktopGridSize);
    margin-right: get-grid-margin-right-for-columns-max($gridSize, $columnsMax);
  }

  @include for-screen-down(xs) {
    margin-right: 0;
  }
}

@function get-grid-margin-right-for-columns-max($gridSize, $columnsMax) {
  $columnsToBeLeftEmpty: $gridSize - $columnsMax;

  @if $columnsToBeLeftEmpty > 0 {
    @return calc(#{$columnsToBeLeftEmpty} * (100% + #{$gridColumnGap}) / #{$gridSize});
  } @else {
    @return 0;
  }
}

@mixin setResponsiveColspans($desktopGridSize) {
  .qd-column {
    // $desktopMaxGridSize because also overflows are handled
    @for $desktopColspan from 1 through $desktopMaxGridSize {
      &.qd-column-#{$desktopColspan} {
        @include setColspan($desktopColspan, $desktopGridSize);

        &:not(.qd-column-disable-responsive-colspans) {
          @include for-screen-down(md) {
            $responsiveColspan: get-mapped-responsive-colspan($tabletLandscapeColspansMapping, $desktopColspan);
            $responsiveGridSize: get-table-landscape-grid-size($desktopGridSize);
            @include setColspan($responsiveColspan, $responsiveGridSize);
            @include qdColumnNextInSameRow(
              $desktopGridSize,
              $desktopColspan,
              $tabletLandscapeMaxGridSize,
              $tabletLandscapeNextInSameRowMapping
            );
          }

          @include for-screen-down(sm) {
            $responsiveColspan: get-mapped-responsive-colspan($tabletPortraitColspansMapping, $desktopColspan);
            $responsiveGridSize: get-table-portrait-grid-size($desktopGridSize);
            @include setColspan($responsiveColspan, $responsiveGridSize);
            @include qdColumnNextInSameRow(
              $desktopGridSize,
              $desktopColspan,
              $tabletPortraitMaxGridSize,
              $tabletPortraitNextInSameRowMapping
            );
          }
        }
      }
    }
  }
}

@function get-mapped-responsive-colspan($mapping, $desktopColspan) {
  @each $desktopColspans, $mappedColspan in $mapping {
    @if contains($desktopColspans, $desktopColspan) {
      @return $mappedColspan;
    }
  }
}

@function contains($list, $item) {
  @return (null != index($list, $item));
}

@mixin setColspan($colspan, $gridSize) {
  $colspanWithoutOverflow: min($colspan, $gridSize);

  grid-column: span $colspanWithoutOverflow;

  &.qd-column-break-before {
    grid-column-start: 1;
    grid-column-end: $colspanWithoutOverflow + 1;
  }

  &.qd-column-full-grid-width {
    grid-column-start: 1;
    grid-column-end: $gridSize + 1;
  }
}

@mixin qdColumnNextInSameRow(
  $desktopGridSize,
  $desktopColspan,
  $responsiveMaxGridSize,
  $responsiveNextInSameRowMapping
) {
  // qdColumnNextInSameRow is not handled for overflows
  @if $desktopColspan < $desktopGridSize {
    @for $desktopColspanNext from 1 through $desktopGridSize - $desktopColspan {
      $responsiveColspans: get-mapped-responsive-colspans-for-next-in-same-row(
        $responsiveNextInSameRowMapping,
        $desktopColspan,
        $desktopColspanNext
      );
      $responsiveColspanThis: nth($responsiveColspans, 1);
      $responsiveColspanNext: nth($responsiveColspans, 2);

      &.qd-column-next-in-same-row-#{$desktopColspanNext} {
        grid-column-start: 1;
        grid-column-end: $responsiveColspanThis + 1;

        & + .qd-column {
          grid-column: span $responsiveColspanNext;
        }
      }
    }
  }
}

@function get-mapped-responsive-colspans-for-next-in-same-row($mapping, $desktopColspanThis, $desktopColspanNext) {
  @each $colspans, $mappedColspans in $mapping {
    @if nth($colspans, 1) == $desktopColspanThis and nth($colspans, 2) == $desktopColspanNext or $colspans == "*" {
      @return $mappedColspans;
    }
  }

  @return null;
}
