@use 'sass:map';

@use './colors-helpers.scss' as *;
@use './colors.scss' as *;
@use './obl-math.scss' as *;

$obl-color-category: (
  1: #ff6161,
  2: #ff901a,
  3: #9fb800,
  4: #0090ad,
  5: #6e00b8,
  6: #eb007d,
);

@mixin color($category-id, $table) {
  stop.category-#{$category-id} {
    stop-color: map.get($table, $category-id);
  }
  g.category-#{$category-id} {
    path {
      fill: map.get($table, $category-id);
    }
    &:hover path {
      fill: decrease-color(map.get($table, $category-id), 0.5);
    }
  }

  obl-single-combination {
    .category-#{$category-id} {
      background-color: map.get($table, $category-id) !important;
    }
  }
}

@mixin categories-colors($table) {
  obl-combine-categories {
    @for $i from 1 through 6 {
      @include color($i, $table);
    }
  }
}

@include categories-colors($obl-color-category);

// obl-half-matrix

$obl-half-matrix-colors-category: (
  1: #ff6161,
  2: #ff901a,
  3: #9fb800,
  4: #0090ad,
  5: #6e00b8,
  6: #eb007d,
  7: #0000ff,
);

@mixin half-matrix-category-header($angle, $color) {
  background-image: linear-gradient($angle, transparent, $color);

  &:hover {
    background-image: linear-gradient(
      $angle,
      transparent,
      decrease-color($color, 0.5)
    );
  }

  p {
    color: white;
  }
}

@mixin half-matrix-category-header($angle, $color) {
  background-image: linear-gradient($angle, transparent, $color);

  &:hover {
    background-image: linear-gradient(
      $angle,
      transparent,
      decrease-color($color, 0.5)
    );
  }

  p {
    color: white;
  }
}

@mixin half-matrix($colors) {
  obl-half-matrix-combine-categories {
    @for $i from 1 through 7 {
      $color1: map.get($colors, $i);
      @for $j from 1 through $i {
        $color2: map.get($colors, $j);
        @if $color1 != $color2 {
          .category-#{max($i, $j)}-#{min($j, $i)} {
            background-color: mix($color1, $color2, 50);
            opacity: 0.3;

            &:hover {
              opacity: 0.8;
            }

            &.selected {
              opacity: 1;
            }
          }

          obl-single-combination {
            .category-#{$i} {
              background-color: $color1 !important;
            }
            .category-#{$j} {
              background-color: $color2 !important;
            }
          }
        }
      }
      .category-#{$i} {
        &.left {
          @include half-matrix-category-header(90deg, $color1);
        }

        &.right {
          @include half-matrix-category-header(0deg, $color1);
        }
      }

      &.highlight-left-#{$i} .category-#{$i} {
        &.left {
          background-image: linear-gradient(
            90deg,
            transparent,
            decrease-color($color1, 0.5)
          );
        }
      }
      &.highlight-right-#{$i} .category-#{$i} {
        &.right {
          background-image: linear-gradient(
            0deg,
            transparent,
            decrease-color($color1, 0.5)
          );
        }
      }
    }
  }
}

@include half-matrix($obl-half-matrix-colors-category);