@use 'sass:map';
@use '../base/typography';
@use '../base/colors';
@use '../base/elevation';
@use '../base/opacity';
@use './progress-spinner';

@mixin mx-chip-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark {
    $current-theme: colors.$mx-dark;

    .mat-mdc-chip.mat-mdc-standard-chip {
      &.cdk-drag:active {
        @extend .gl-dark-el-4;
      }
      &.mat-mdc-chip-selected {
        &:not(.cdk-focused):hover {
          @extend .gl-dark-el-1;
        }
      }
    }

    .mx-chip-selection__option-wrapper {
      @extend .gl-el-2;
    }
  } @else {
    .mat-mdc-chip.mat-mdc-standard-chip {
      &.cdk-drag:active {
        @extend .gl-el-4;
      }
      &.mat-mdc-chip-selected {
        &:not(.cdk-focused):hover {
          @extend .gl-el-1;
        }
      }
    }

    .mx-chip-selection__option-wrapper {
      @extend .gl-dark-el-2;
    }
  }

  .mat-mdc-chip.mat-mdc-standard-chip {
    border-color: map.get($current-theme, outline);

    &:hover,
    &.cdk-focused,
    &.cdk-drag-preview {
      background-color: map.get($current-theme, surface);
    }

    &:not(.mdc-evolution-chip--disabled) {
      .mdc-evolution-chip__text-label.mdc-evolution-chip__text-label {
        color: map.get($current-theme, onSurfaceVariant);
      }
      .mdc-evolution-chip__checkmark.mdc-evolution-chip__checkmark {
        color: map.get($current-theme, onSecondaryContainer);
      }
      .mdc-evolution-chip__icon--trailing {
        color: map.get($current-theme, onSurfaceVariant);
      }
    }
    &.mdc-evolution-chip--disabled {
      border-color: rgba(map.get($current-theme, onSurface), opacity.$opacity-12);
      .mdc-evolution-chip__text-label.mdc-evolution-chip__text-label {
        color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38);
      }
      .mdc-evolution-chip__icon--trailing {
        color: rgba(map.get($current-theme, onSurfaceVariant), opacity.$opacity-38);
      }
    }

    .mat-ripple-element {
      background-color: rgba(map.get($current-theme, onSurfaceVariant), 0.04); // 0.12 - 0.08
    }
    .mat-mdc-chip-focus-overlay {
      background-color: map.get($current-theme, onSurfaceVariant);
    }

    /* selected state */
    &.mat-mdc-chip-selected {
      &:not(.mdc-evolution-chip--disabled) {
        border: none;
        background-color: map.get($current-theme, secondaryContainer);
        .mat-mdc-chip-focus-overlay {
          background-color: map.get($current-theme, onSecondaryContainer);
        }
      }
      &.mdc-evolution-chip--disabled {
        background-color: rgba(map.get($current-theme, onSurface), opacity.$opacity-12);
        .mdc-evolution-chip__checkmark,
        .mdc-evolution-chip__text-label {
          color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38);
        }
      }
    }

    /* loading state */
    &.mx-loading-chip {
      .mdc-evolution-chip__cell {
        &:before {
          @include progress-spinner.spinner-border-color(rgba(map.get($current-theme, onSurface), opacity.$opacity-38));
        }
      }
    }

    /* assist chip */
    &.mx-chip-assist {
      &:not(.mdc-evolution-chip--disabled) {
        .mdc-evolution-chip__text-label {
          color: map.get($current-theme, onSurface);
        }
      }
      .mat-mdc-chip-focus-overlay {
        background-color: map.get($current-theme, onSurface);
      }
    }
  }

  /* selection-chip */
  .mx-chip-selection {
    &__option-wrapper {
      background-color: map.get($current-theme, surfaceContainer);
      color: map.get($current-theme, onSurface);
    }
    &__option {
      &:hover {
        &:after {
          background-color: map.get($current-theme, onSurface);
        }
      }
      &--is-selected {
        color: map.get($current-theme, primary);
        &:after {
          background-color: map.get($current-theme, onSurface);
        }
      }
    }
    .mdc-evolution-chip__text-label {
      display: flex;
      align-items: center;
      grid-gap: 8px;
    }
  }
}

.mat-mdc-chip {
  @extend .gl-label-md;
  box-sizing: border-box;
  &.mat-mdc-standard-chip {
    border-width: 1px;
    border-style: solid;

    &:not(.mdc-evolution-chip--disabled),
    &.mdc-evolution-chip--disabled {
      background-color: transparent;
    }
    &.mat-mdc-chip-disabled {
      opacity: 1;
    }
    .mat-mdc-chip-remove {
      opacity: 1;
    }
    &:hover {
      .mat-mdc-chip-focus-overlay {
        opacity: opacity.$opacity-8;
      }
    }
    &.cdk-drag:active {
      .mat-mdc-chip-focus-overlay {
        opacity: opacity.$opacity-12; // 0.16 - 0.04
      }
    }

    &.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic {
      width: 20px;
      height: 20px;
      .mdc-evolution-chip__checkmark {
        width: 18px;
        height: 18px;
        margin: 0 2px;
      }
    }
  }

  &.mx-loading-chip {
    .mdc-evolution-chip__cell {
      $chip-padding: 12px;
      padding-left: calc(#{$chip-padding} + 10px);
      &:before {
        @extend .progress-spinner, .progress-spinner--sm;
        content: '';
        position: absolute;
        left: $chip-padding;
      }
    }
  }
}