@use "@angular/material" as mat;
@use "public-util";
@use "variables";

// ---------------------------
// MDC Overwrites
// ---------------------------
@mixin other-overwrites {
  @include _mat-mdc-button-overwrites();
  @include _mat-mdc-slide-toggle-overwrites();
  @include _mat-mdc-checkbox-overwrites();
  @include _mat-mdc-date-picker-overwrites();
  @include _mat-mdc-progress-bar-overwrites();
  @include _mat-mdc-slider-overwrites();
}

// ---------------------------
// BUTTON component
// ---------------------------
@mixin _mat-mdc-button-overwrites {
  :root .mat-mdc-button-base {
    &.mat-primary {
      @include _mat-mdc-button-color-overwrites("primary");
    }
    &.mat-accent {
      @include _mat-mdc-button-color-overwrites("accent");
    }
    &.mat-warn {
      @include _mat-mdc-button-color-overwrites("warn");
    }
  }
}

@mixin _mat-mdc-button-color-overwrites($palette) {
  $contrast-color: public-util.mat-css-color(500, null, $palette, true);
  $ripple-color: public-util.mat-css-color(500, 0.1, $palette);

  @include mat.fab-overrides(
    (
      foreground-color: $contrast-color,
      state-layer-color: $contrast-color,
      small-foreground-color: $contrast-color,
      small-state-layer-color: $contrast-color,
    )
  );

  @include mat.button-overrides(
    (
      outlined-ripple-color: $ripple-color,
      text-ripple-color: $ripple-color,
      filled-label-text-color: $contrast-color,
      protected-label-text-color: $contrast-color,
    )
  );

  @include mat.icon-button-overrides(
    (
      ripple-color: $ripple-color,
    )
  );
}

// ---------------------------
// SLIDE TOGGLE component
// ---------------------------
@mixin _mat-mdc-slide-toggle-overwrites() {
  :root .mat-mdc-slide-toggle {
    &.mat-primary {
      @include _mat-mdc-slide-toggle-color-overwrites("primary");
    }
    &.mat-accent {
      @include _mat-mdc-slide-toggle-color-overwrites("accent");
    }
    &.mat-warn {
      @include _mat-mdc-slide-toggle-color-overwrites("warn");
    }
  }
}

@mixin _mat-mdc-slide-toggle-color-overwrites($palette) {
  $contrast-color: public-util.mat-css-color(500, null, $palette, true);

  @include mat.slide-toggle-overrides(
    (
      selected-icon-color: $contrast-color,
    )
  );
}

// ---------------------------
// CHECKBOX component
// ---------------------------
@mixin _mat-mdc-checkbox-overwrites {
  .mat-mdc-checkbox {
    @include public-util.mat-css-light-dark-theme-global {
      &.mat-primary {
        @include _mat-mdc-checkbox-color-overwrites("primary");
      }
      &.mat-accent {
        @include _mat-mdc-checkbox-color-overwrites("accent");
      }
      &.mat-warn {
        @include _mat-mdc-checkbox-color-overwrites("warn");
      }
    }
  }
}

@mixin _mat-mdc-checkbox-color-overwrites($palette) {
  $contrast-color: public-util.mat-css-color(500, null, $palette, true);

  @include mat.checkbox-overrides(
    (
      selected-checkmark-color: $contrast-color,
    )
  );
}

// ---------------------------
// DATE PICKER component
// ---------------------------
@mixin _mat-mdc-date-picker-overwrites {
  :root .mat-datepicker-content {
    &.mat-primary {
      @include _mat-date-picker-color-overwrites("primary");
    }
    &.mat-accent {
      @include _mat-date-picker-color-overwrites("accent");
    }
    &.mat-warn {
      @include _mat-date-picker-color-overwrites("warn");
    }
  }
}

@mixin _mat-date-picker-color-overwrites($palette) {
  $date-background-color: public-util.mat-css-color(500, 0.3, $palette);
  $range-background-color: public-util.mat-css-color(500, 0.2, $palette);

  @include mat.datepicker-overrides(
    (
      calendar-date-focus-state-background-color: $date-background-color,
      calendar-date-hover-state-background-color: $date-background-color,
      calendar-date-in-range-state-background-color: $range-background-color,
    )
  );
}

// ---------------------------
// PROGRESS BAR component
// ---------------------------
@mixin _mat-mdc-progress-bar-overwrites {
  :root .mat-mdc-progress-bar {
    &.mat-primary {
      @include _mat-mdc-progress-bar-color-overwrites("primary");
    }
    &.mat-accent {
      @include _mat-mdc-progress-bar-color-overwrites("accent");
    }
    &.mat-warn {
      @include _mat-mdc-progress-bar-color-overwrites("warn");
    }
  }
}

@mixin _mat-mdc-progress-bar-color-overwrites($palette) {
  $track-color: public-util.mat-css-color(500, 0.25, $palette);

  @include mat.progress-bar-overrides(
    (
      track-color: $track-color,
    )
  );
}

// ---------------------------
// SLIDER component
// ---------------------------
@mixin _mat-mdc-slider-overwrites() {
  .mat-mdc-slider {
    @include public-util.mat-css-light-dark-theme-global {
      &.mat-primary {
        @include _mat-mdc-slider-color-overwrites("primary");
      }
      &.mat-accent {
        @include _mat-mdc-slider-color-overwrites("accent");
      }
      &.mat-warn {
        @include _mat-mdc-slider-color-overwrites("warn");
      }
    }
  }
}

@mixin _mat-mdc-slider-color-overwrites($palette) {
  $hover-background-color: public-util.mat-css-color(500, 0.05, $palette);
  $focus-background-color: public-util.mat-css-color(500, 0.2, $palette);

  @include mat.slider-overrides(
    (
      hover-state-layer-color: $hover-background-color,
      focus-state-layer-color: $focus-background-color,
    )
  );
}