@use '@angular/material' as mat;
@import "settings";

@include mat.core();

$black-87-opacity: rgba(0, 0, 0, 0.87);
$mat-density: -1;

// *************************************************************************
// LIGHT THEME

// terrible to have to hardcode this, but only for now since material v15 does not accept css variables
$light-primary: hsl(204, 100%, 40%);
$light-accent: hsl(144, 100%, 27%);
$light-error: hsl(1, 70%, 53%);

$light-primary-palette: (
  50: lighten($light-primary, 100%),
  100: lighten($light-primary, 80%),
  200: lighten($light-primary, 60%),
  300: lighten($light-primary, 40%),
  400: lighten($light-primary, 20%),
  500: $light-primary,
  600: darken($light-primary, 20%),
  700: darken($light-primary, 40%),
  800: darken($light-primary, 60%),
  900: darken($light-primary, 80%),
  A100: lighten($light-primary, 40%),
  A200: lighten($light-primary, 20%),
  A400: darken($light-primary, 20%),
  A700: darken($light-primary, 40%),
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: white,
  )
);

$light-accent-palette: (
  50: lighten($light-accent, 100%),
  100: lighten($light-accent, 80%),
  200: lighten($light-accent, 60%),
  300: lighten($light-accent, 40%),
  400: lighten($light-accent, 20%),
  500: $light-accent,
  600: darken($light-accent, 20%),
  700: darken($light-accent, 40%),
  800: darken($light-accent, 60%),
  900: darken($light-accent, 80%),
  A100: lighten($light-accent, 40%),
  A200: lighten($light-accent, 20%),
  A400: darken($light-accent, 20%),
  A700: darken($light-accent, 40%),
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: white,
  )
);

$light-error-palette: (
  50: lighten($light-error, 100%),
  100: lighten($light-error, 80%),
  200: lighten($light-error, 60%),
  300: lighten($light-error, 40%),
  400: lighten($light-error, 20%),
  500: $light-error,
  600: darken($light-error, 20%),
  700: darken($light-error, 40%),
  800: darken($light-error, 60%),
  900: darken($light-error, 80%),
  A100: lighten($light-error, 40%),
  A200: lighten($light-error, 20%),
  A400: darken($light-error, 20%),
  A700: darken($light-error, 40%),
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: white,
  )
);

// CREATE THE LIGHT THEME OBJECT
$light-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette($light-primary-palette),
    accent: mat.define-palette($light-accent-palette),
    warn: mat.define-palette($light-error-palette),
  ),
  typography: mat.define-typography-config(
    $font-family: 'Lato, Arial, sans-serif',
    $body-1: mat.define-typography-level($font-size),
  ),
  density: $mat-density,
));

@include mat.all-component-themes($light-theme);

// *************************************************************************
// DARK THEME

// terrible to have to hardcode this, but only for now since material v15 does not accept css variables
$dark-primary: hsl(200, 75%, 55%);
$dark-accent: hsl(136, 80%, 38%);
$dark-error: hsl(1, 70%, 56%);

$dark-primary-palette: (
  50: lighten($dark-primary, 100%),
  100: lighten($dark-primary, 80%),
  200: lighten($dark-primary, 60%),
  300: lighten($dark-primary, 40%),
  400: lighten($dark-primary, 20%),
  500: $dark-primary,
  600: darken($dark-primary, 20%),
  700: darken($dark-primary, 40%),
  800: darken($dark-primary, 60%),
  900: darken($dark-primary, 80%),
  A100: lighten($dark-primary, 40%),
  A200: lighten($dark-primary, 20%),
  A400: darken($dark-primary, 20%),
  A700: darken($dark-primary, 40%),
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: white,
  )
);

$dark-accent-palette: (
  50: lighten($dark-accent, 100%),
  100: lighten($dark-accent, 80%),
  200: lighten($dark-accent, 60%),
  300: lighten($dark-accent, 40%),
  400: lighten($dark-accent, 20%),
  500: $dark-accent,
  600: darken($dark-accent, 20%),
  700: darken($dark-accent, 40%),
  800: darken($dark-accent, 60%),
  900: darken($dark-accent, 80%),
  A100: lighten($dark-accent, 40%),
  A200: lighten($dark-accent, 20%),
  A400: darken($dark-accent, 20%),
  A700: darken($dark-accent, 40%),
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: white,
  )
);

$dark-error-palette: (
  50: lighten($dark-error, 100%),
  100: lighten($dark-error, 80%),
  200: lighten($dark-error, 60%),
  300: lighten($dark-error, 40%),
  400: lighten($dark-error, 20%),
  500: $dark-error,
  600: darken($dark-error, 20%),
  700: darken($dark-error, 40%),
  800: darken($dark-error, 60%),
  900: darken($dark-error, 80%),
  A100: lighten($dark-error, 40%),
  A200: lighten($dark-error, 20%),
  A400: darken($dark-error, 20%),
  A700: darken($dark-error, 40%),
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: white,
  )
);

// CREATE THE DARK THEME OBJECT
$dark-theme: mat.define-dark-theme((
  color: (
    primary: mat.define-palette($dark-primary-palette),
    accent: mat.define-palette($dark-accent-palette),
    warn: mat.define-palette($dark-error-palette),
  ),
  typography: mat.define-typography-config(
    $font-family: 'Lato, Arial, sans-serif',
    $body-1: mat.define-typography-level($font-size),
  ),
  density: $mat-density,
));

body[data-theme="dark"] {
  @include mat.all-component-colors($dark-theme);
}

// ---------------------------------------------------------
// EXTENDS & OVERRIDES
// ---------------------------------------------------------

.cdk-overlay-container {
  z-index: $mm-zindex;
}

.cdk-overlay-dark-backdrop {
  background: set-alpha('bg', 0.4) !important;
}

// MAT INPUT

.mat-mdc-form-field {
  display: block !important;

  &.with-icons {

    $icons-gap: 10px;
    input {
      padding-right: $mat-icon-size * 2 + $icons-gap;
    }

    .icons {
      background-color: $bg;
      bottom: 10px;
      column-gap: $icons-gap;
      display: flex;
      position: absolute;
      right: 0;
    }

  }

}

.mat-mdc-form-field-error-wrapper {
  font-size: $font-size-small;
  padding: 0 !important;
  top: -4px !important;
}

.mdc-text-field, .mat-mdc-form-field-error {
  padding: 0 $padding-small !important;
}

.mdc-text-field, .mat-mdc-form-field-focus-overlay {
  background-color: transparent !important;
}

.mdc-floating-label {
  // for some reason, will-change: transform; is making label look blurred in chrome
  will-change: auto !important;
}

.mat-mdc-option {
  --mat-option-selected-state-label-text-color: #{$primary};
}

// SNACKBAR
.mat-mdc-snack-bar-container {
  --mat-snack-bar-button-color: #{$color} !important;
  --mdc-text-button-label-text-tracking: 0;
  // --mdc-snackbar-container-color: #d9d9d9;
  // --mdc-snackbar-supporting-text-color: rgba(66, 66, 66, 0.87);
  text-align: center;
  white-space: pre-line;
  word-break: break-word;

  .mat-mdc-button {
    background-color: $bg;
    min-height: 24px;
  }

}

// MAT PROGRESS BAR
.mdc-linear-progress {
  --mdc-linear-progress-track-height: 2px;
  --mdc-linear-progress-active-indicator-height: 2px;
}

// CALENDAR
.mat-calendar, mat-datepicker-toggle {
  button {
    background-color: transparent;
    font-family: $font-family !important;
    font-size: $font-size;
    font-weight: normal;
    min-height: auto;
    min-width: auto;
    &:hover {
      background-color: transparent;
      color: $color;
    }
  }
  table tr {
    background-color: transparent !important; // important is necessary to also override striping
    border-bottom: none;
    td, th {
      border: none;
    }
  }
}

// TOOLTIP
.mat-mdc-tooltip {
  white-space: pre-line;
}

// DRAG AND DROP
.cdk-drag-preview {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  font-weight: bold;
  text-align: center;
  z-index: 9999 !important;
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-disabled {
  cursor: not-allowed !important;
}

.draggable {
  cursor: move;
}

// SORTING
.mat-sort-header-container {
  justify-content: center;

  * {
    user-select: none;
  }

}

.mat-sort-header-arrow {
  background-color: $bg;
  bottom: 0;
  position: absolute !important;
  right: -$padding-small;
}

// MAT-ACCORDION

// panel
.mat-expansion-panel {
  border-radius: 0 !important;
}

.mat-expansion-panel {
  box-shadow: none !important;
  border: 1px solid $table-odd-color;
  background: $table-odd-color !important;
}

// panel header
.mat-expansion-panel-header {
  background: $table-even-color;
  padding: 0 $padding-big !important;

  .icons {
    opacity: 0;
    transition: opacity 0.2s;
  }

  &:hover,
  &.mat-expanded,
  &.mat-expanded:hover {
    background: $bg-accent !important;

    .icons {
      opacity: 1;
    }

  }

  &.mat-expanded {
    font-weight: bold;
  }

}

.mat-expansion-panel-header-description {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  margin-right: 0 !important;
  width: 1%;
}

// panel body
.mat-expansion-panel-body {
  background: $table-odd-color;
  padding: $padding-big !important;
}

// DIALOG
.mat-mdc-dialog-container {
  --mdc-dialog-subhead-size: #{$font-size-big};
}

// VIRTUAL SCROLLING
.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper {
  display: flex;
}

// SLIDER
.mat-mdc-slider, .mdc-slider {

  // var updates
  --mat-slider-focus-state-layer-color: transparent; // cuz disableRipple does not seem to work
  --mat-slider-hover-state-layer-color: transparent; // cuz disableRipple does not seem to work
  --mdc-slider-inactive-track-height: 2px;
  --mdc-slider-active-track-height: 2px;
  --mdc-slider-handle-height: #{$padding-big};
  --mdc-slider-handle-width: #{$padding-big};
  --mat-slider-value-indicator-padding: 2px;
  --mat-slider-value-indicator-height: calc(#{$font-size-small} + 4px);
  --mdc-slider-label-container-color: #{$primary};
  --mdc-slider-label-label-text-size: #{$font-size-small};

  $slider-height: 28px;
  height: $slider-height !important;
  min-width: unset !important;
  width: 100% !important;

  .mdc-slider__input, .mdc-slider__thumb {
    height: $slider-height !important;
  }

  .mdc-slider__thumb--focused {
    z-index: 1; // so the label of the knob being dragged is always on top
  }

  .mdc-slider__thumb-knob {
    background-color: $bg !important;
    border-width: 2px !important;
  }

  .mdc-slider__value-indicator-container {
    bottom: $slider-height - 2px !important;
  }

  .mdc-slider__value-indicator {
    border: 1px solid $bg;
    &:before {
      border-left: 4px solid rgba(0, 0, 0, 0) !important;
      border-right: 4px solid rgba(0, 0, 0, 0) !important;
      border-top: 4px solid var(--mdc-slider-label-container-color) !important;
      bottom: -4px !important;
    }
  }

  .mdc-slider__value-indicator-text {
    white-space: nowrap;
  }

  &.label-always {
    .mdc-slider__value-indicator {
      transform: scale(1) !important; // keeps the label always visible
    }
  }

  &.mdc-slider--disabled * {
    cursor: default;
  }


  // DELETE ? CSS to show label as balloon
  /*
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-width: var(--mat-slider-value-indicator-height);

  .mdc-slider__value-indicator-container {
    bottom: $slider-height !important;
  }

  .mdc-slider__value-indicator {
    background-color: transparent !important;
    &:before {
      background-color: $primary;
      border: none !important;
      border-radius: 50% 50% 50% 0 !important;
      bottom: 0 !important;
      transform: translateX(-50%) rotate(-45deg) !important;
      transform-origin: center !important;
      height: var(--mat-slider-value-indicator-height) !important;
      width: var(--mat-slider-value-indicator-width) !important;
      z-index: -1;
    }
  }
  */

}