@use 'sass:map';
@use '@angular/material' as mat;
@use '../base/colors';
@use '../base/shape';
@use '../base/typography' as typo;
@use '../base/elevation' as elv;
@use '../base/opacity' as op;
@use './progress-spinner' as spinner;

$black: map.get(colors.$mx-global, black);
$white: map.get(colors.$mx-global, white);

//#region Button Theme
@mixin mx-button-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark == true {
    $color-theme: colors.$mx-dark;
  }

  $primary: map.get($color-theme, primary);
  $onPrimary: map.get($color-theme, onPrimary);
  $primary-opacity08: rgba($primary, op.$opacity-8);
  $primaryContainer: map.get($color-theme, primaryContainer);
  $onPrimaryContainer: map.get($color-theme, onPrimaryContainer);
  $error: map.get($color-theme, error);
  $onError: map.get($color-theme, onError);
  $onSurface: map.get($color-theme, onSurface);
  $onSurface-opacity038: rgba($onSurface, op.$opacity-38);
  $onSurface-opacity012: rgba($onSurface, op.$opacity-12);
  $onSurface-opacity008: rgba($onSurface, op.$opacity-8);
  $onSecondaryContainer: map.get($color-theme, onSecondaryContainer);
  $onSecondaryContainer-opacity038: rgba(map.get($color-theme, onSecondaryContainer), op.$opacity-38);
  $secondaryContainer: map.get($color-theme, secondaryContainer);
  $onErrorContainer: map.get($color-theme, onErrorContainer);
  $errorContainer: map.get($color-theme, errorContainer);
  $outline: map.get($color-theme, outline);
  $outline-opacity012: rgba($outline, op.$opacity-12);
  $surfaceContainerLow: map.get($color-theme, surfaceContainerLow);
  $surfaceContainerHigh: map.get($color-theme, surfaceContainerHigh);
  $inversePrimary: map.get($color-theme, inversePrimary);
  $inverseOnSurface-opacity038: rgba(map.get($color-theme, inverseOnSurface), op.$opacity-38);
  $tertiaryContainer: map.get($color-theme, tertiaryContainer);
  $onTertiaryContainer: map.get($color-theme, onTertiaryContainer);
  $onSurfaceVariant: map.get($color-theme, onSurfaceVariant);
  $onSurfaceVariant-opacity008: rgba($onSurfaceVariant, op.$opacity-8);
  $inverseOnSurface: map.get($color-theme, inverseOnSurface);
  $outlineVariant: map.get($color-theme, outlineVariant);

  // mat-button
  a,
  button {
    &.mat-mdc-button {
      &:not(:disabled) {
        color: $primary;
      }
      &:hover {
        .mat-mdc-button-persistent-ripple::before {
          background-color: $primary;
          opacity: op.$opacity-8;
        }
      }

      &:disabled {
        color: $onSurface-opacity038;
      }
    }
  }

  a,
  button {
    &.mat-warn {
      &.mat-mdc-button {
        &:not(:disabled) {
          color: $error;
        }
        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $error;
          }
        }
      }
    }
  }

  // mat-flat-button
  a,
  button {
    &.mat-mdc-unelevated-button {
      &:not(:disabled) {
        background-color: $primary;
        color: $onPrimary;
      }
      &:hover {
        @extend .gl-el-1;
        .mat-mdc-button-persistent-ripple::before {
          background-color: $onPrimary;
          opacity: op.$opacity-8;
        }
      }
      &:disabled {
        color: $onSurface-opacity038;
        background-color: $onSurface-opacity012;
      }
    }
  }

  a,
  button {
    &.mat-warn {
      &.mat-mdc-unelevated-button {
        &:not(:disabled) {
          background-color: $error;
          color: $onError;
        }
        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $onError;
          }
        }
      }
    }
  }

  // mx-tonal-button
  a,
  button {
    &.mx-tonal-button {
      &.mat-mdc-unelevated-button {
        &:not(:disabled) {
          color: $onSecondaryContainer;
          background-color: $secondaryContainer;
        }
        &:hover {
          @extend .gl-el-1;
          .mat-mdc-button-persistent-ripple::before {
            background-color: $onSecondaryContainer;
            opacity: op.$opacity-8;
          }
        }
        &:disabled {
          color: $onSurface-opacity038;
          background-color: $onSurface-opacity012;
        }
      }

      &.mat-warn {
        &.mat-mdc-unelevated-button {
          &:not(:disabled) {
            color: $onErrorContainer;
            background-color: $errorContainer;
          }
          &:hover {
            .mat-mdc-button-persistent-ripple::before {
              background-color: $onErrorContainer;
            }
          }
        }
      }
    }
  }

  // mx-invert-button
  a,
  button {
    &.mx-invert-button {
      &.mat-mdc-button {
        &:not(:disabled) {
          color: $inversePrimary;
        }
        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $inversePrimary;
            opacity: op.$opacity-8;
          }
        }
        &:disabled {
          color: $inverseOnSurface-opacity038;
        }
      }
    }
  }

  // mat-stroked-button
  a,
  button {
    &.mat-mdc-outlined-button {
      &:not(:disabled) {
        border-color: $outline;
        color: $primary;
      }

      &:hover {
        .mat-mdc-button-persistent-ripple::before {
          background-color: $primary;
          opacity: op.$opacity-8;
        }
      }
      &:disabled {
        color: $onSurface-opacity038;
        border-color: $outline-opacity012;
      }
    }
  }

  a,
  button {
    &.mat-warn {
      &.mat-mdc-outlined-button {
        &:not(:disabled) {
          color: $error;
        }

        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $error;
          }
        }
      }
    }
  }

  // mdc-raised-button
  a,
  button {
    &.mat-mdc-raised-button {
      &:not(:disabled) {
        @extend .gl-el-1;
        background-color: $surfaceContainerLow;
        color: $primary;
      }

      &:hover {
        @extend .gl-el-2;
        .mat-mdc-button-persistent-ripple::before {
          background-color: $primary;
          opacity: op.$opacity-8;
        }
      }
      &:disabled {
        color: $onSurface-opacity038;
        background-color: $onSurface-opacity012;
      }
    }
  }

  a,
  button {
    &.mat-warn {
      &.mat-mdc-raised-button {
        &:not(:disabled) {
          color: $error;
        }

        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $error;
          }
        }
      }
    }
  }

  // mat-icon-button
  a,
  button {
    &.mat-mdc-icon-button {
      &:not(:disabled) {
        color: $onSurfaceVariant;
        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $onSurfaceVariant;
            opacity: op.$opacity-8;
          }
        }
      }
      &.mat-mdc-button-base {
        &:disabled {
          color: $onSurfaceVariant;
          opacity: op.$opacity-38;
        }
      }
    }
  }

  a,
  button {
    &.mx-button-selected {
      &.mat-mdc-icon-button {
        &:not(:disabled) {
          color: $primary;
          &:hover {
            .mat-mdc-button-persistent-ripple::before {
              background-color: $primary;
            }
          }
        }
        &.mat-mdc-button-base {
          &:disabled {
            color: $onSurface;
            opacity: op.$opacity-38;
          }
        }
      }
    }
  }

  a,
  button {
    &.mx-invert-button {
      &.mat-mdc-icon-button {
        &:not(:disabled) {
          color: $inverseOnSurface;
          &:hover {
            .mat-mdc-button-persistent-ripple::before {
              background-color: $inverseOnSurface;
              opacity: op.$opacity-8;
            }
          }
        }
        &.mat-mdc-button-base {
          &:disabled {
            color: $inverseOnSurface;
            opacity: op.$opacity-38;
          }
        }
      }
    }
  }

  // mat-fab
  a.mat-mdc-fab,
  button.mat-mdc-fab,
  a.mat-mdc-mini-fab,
  button.mat-mdc-mini-fab {
    @extend .gl-el-3;
    color: $onPrimaryContainer;
    background-color: $primaryContainer;

    &:hover {
      @extend .gl-el-4;

      .mat-mdc-button-persistent-ripple::before {
        opacity: op.$opacity-8;
        background-color: $onPrimaryContainer;
      }
    }
  }

  a,
  button {
    &.mat-surface {
      &.mat-mdc-fab,
      &.mat-mdc-mini-fab {
        color: $primary;
        background-color: $surfaceContainerHigh;

        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $primary;
          }
        }
      }
    }
  }

  a,
  button {
    &.mat-secondary {
      &.mat-mdc-fab,
      &.mat-mdc-mini-fab {
        color: $onSecondaryContainer;
        background-color: $secondaryContainer;

        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $onSecondaryContainer;
          }
        }
      }
    }
  }

  a,
  button {
    &.mat-tertiary {
      &.mat-mdc-fab,
      &.mat-mdc-mini-fab {
        color: $onTertiaryContainer;
        background-color: $tertiaryContainer;

        &:hover {
          .mat-mdc-button-persistent-ripple::before {
            background-color: $onTertiaryContainer;
          }
        }
      }
    }
  }

  // mx-loading-button
  a,
  button {
    &.mx-loading-button {
      .mdc-button__label::before {
        @include spinner.spinner-border-color($onSurface-opacity038);
      }

      &.mx-invert-button {
        .mdc-button__label::before {
          @include spinner.spinner-border-color($inverseOnSurface-opacity038);
        }
      }
    }
  }

  // mx-social-button
  a,
  button {
    &.mx-social-button {
      background-color: transparent;
      border-color: $outlineVariant;
      color: $onSurface;

      &:hover {
        background-color: $onSurface-opacity008;
      }
    }
  }

  // mx-split-button
  a,
  button {
    &.mx-split-button {
      &--left {
        &.mat-mdc-unelevated-button {
          border-right-color: $onPrimary;

          &:disabled {
            border-right-color: $onSurface-opacity012;
          }

          &.mx-tonal-button:not(:disabled) {
            border-right-color: $onSecondaryContainer-opacity038;
          }
        }
      }
    }
  }

  // mx-split-button
  mx-split-button {
    .mx-split-button {
      &--right {
        &.mat-mdc-button-base {
          width: 20px !important;
          padding-right: 4px;
        }
        &:hover {
          &.mat-mdc-button-base {
            width: 24px !important;
            padding-right: 0;
          }
        }
      }
    }
    &:has(.mx-split-button--right:hover) {
      .mx-split-button--left {
        padding-right: 4px;
      }
    }
    @include mx-split-button-icon-only($onSurfaceVariant, $onSurfaceVariant-opacity008);
  }
  // mx-split-stroked-button
  mx-split-stroked-button {
    @include mx-split-button-icon-only($onSurfaceVariant, $onSurfaceVariant-opacity008);
  }
}
//#endregion

@mixin mx-split-button-icon-only($color, $backgroundColor) {
  &:has(.mx-icon-only) {
    .mx-split-button--left,
    .mx-split-button--right {
      color: $color;
      &:hover {
        &.mat-mdc-button-base {
          background-color: $backgroundColor;
        }
      }
    }
  }
}

//#region Button Struture
$icon-btn-lg-size: 48px;
$icon-lg-size: 24px;
$icon-btn-md-size: 40px;
$icon-md-size: 24px;
$icon-btn-sm-size: 32px;
$icon-sm-size: 20px;
$icon-btn-xs-size: 24px;
$icon-xs-size: 16px;

@mixin btn-small-size {
  @extend .gl-label-sm;
  height: 24px;
  min-width: 24px;

  .mat-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }

  &.mx-loading-button {
    .mdc-button__label::before {
      margin-right: 4px;
    }
  }
}

@mixin btn-mini-size {
  @extend .gl-label-sm;
  height: 16px;
  min-width: 24px;

  .mat-icon {
    width: 16px;
    height: 16px;
    margin-right: 2px;
  }
}

a,
button {
  &.mdc-button {
    padding: 0 16px;
    min-width: 48px;

    &:disabled {
      cursor: not-allowed;
    }
  }

  &.mat-mdc-button {
    padding: 0 8px;
    &.mx-small {
      @include btn-small-size();
      padding: 4px;
    }
    &.mx-mini {
      @include btn-mini-size();
      padding: 0 2px;
    }
  }

  &.mat-mdc-outlined-button {
    &:not(:disabled) {
      border-width: 1px;
      border-style: solid;
    }

    &.mx-small {
      @include btn-small-size();
      padding: 4px 8px;
    }
  }

  &.mat-mdc-button-base {
    @extend .gl-label-md;
  }

  &.mx-loading-button {
    .mdc-button__label::before {
      content: '';
      display: inline-flex;
      margin-right: 8px;
      @extend .progress-spinner;
      @extend .progress-spinner--sm;
    }
  }

  &.mat-mdc-extended-fab {
    height: 56px;
    border-radius: 100px;
    padding: 0 20px;
    .mat-icon {
      margin-left: 0;
    }
  }

  &.mx-large-fab {
    &.mat-mdc-fab {
      width: 96px;
      height: 96px;

      .mat-icon {
        width: 36px;
        height: 36px;
      }
    }
  }

  &.mat-mdc-icon-button {
    &.mat-mdc-button-base {
      &.mx-icon-lg {
        width: $icon-btn-lg-size;
        height: $icon-btn-lg-size;
        .mat-mdc-button-touch-target {
          width: $icon-btn-lg-size;
          height: $icon-btn-lg-size;
        }
        .mat-icon {
          width: $icon-lg-size;
          height: $icon-lg-size;
        }
      }
      &.mx-icon-md {
        width: $icon-btn-md-size;
        height: $icon-btn-md-size;
        padding: 8px;
        .mat-mdc-button-touch-target {
          width: $icon-btn-md-size;
          height: $icon-btn-md-size;
        }
        .mat-icon {
          width: $icon-md-size;
          height: $icon-md-size;
        }
      }
      &.mx-icon-sm {
        width: $icon-btn-sm-size;
        height: $icon-btn-sm-size;
        padding: 6px;
        .mat-mdc-button-touch-target {
          width: $icon-btn-sm-size;
          height: $icon-btn-sm-size;
        }
        .mat-icon {
          svg {
            width: $icon-sm-size;
            height: $icon-sm-size;
          }
          width: $icon-sm-size;
          height: $icon-sm-size;
        }
      }
      &.mx-icon-xs {
        width: $icon-btn-xs-size;
        height: $icon-btn-xs-size;
        padding: 4px;
        .mat-mdc-button-touch-target {
          width: $icon-btn-xs-size;
          height: $icon-btn-xs-size;
        }
        .mat-icon {
          svg {
            width: $icon-xs-size;
            height: $icon-xs-size;
          }
          width: $icon-xs-size;
          height: $icon-xs-size;
        }
      }
    }
  }

  &.mx-social-button {
    @extend .gl-label-md;
    @extend .rounded-x-sm;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-width: 1px;
    border-style: solid;

    .mat-icon {
      margin-right: 12px;
      width: 18px;
      height: 18px;
    }
  }

  &.mx-split-button {
    &--left {
      z-index: 10;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      &.mat-mdc-unelevated-button {
        border-right-style: solid;
        border-right-width: 1px;
      }

      .mdc-button__label {
        span {
          margin-right: 0;
        }
        .mat-icon {
          margin-left: -4px;
        }
      }

      &.mx-icon-only {
        &.mat-mdc-button-base {
          min-width: unset !important;
          padding-left: 8px;
          padding-right: 8px;
        }

        .mdc-button__label {
          .mat-icon {
            width: 20px;
            height: 20px;
            margin-left: 0px;
            margin-right: 0px;
          }
        }
      }

      .mdc-button__label {
        display: flex;
        align-items: center;
        .mat-icon {
          width: 18px;
          height: 18px;
          margin-right: 8px;
        }
      }
    }
    &--right {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      padding: 0;
      .mat-icon {
        width: 18px;
        margin: 0;
      }
      &.mat-mdc-outlined-button {
        border-left-width: 0px;
      }

      &.mat-mdc-button-base {
        padding: 0;
        width: 24px !important;
        min-width: unset !important;
        box-sizing: border-box;
      }
    }
  }
}

.mx-split-button--wrapper {
  display: inline-block;
}

//#endregion