@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/opacity';

$top-nav-light: (
  primary: map.get(colors.$mx-light, primary),
  onPrimary: map.get(colors.$mx-light, onPrimary),
  onPrimaryVariant: map.get(colors.$mx-light, inverseOnSurface),
  onPrimaryActiveIndicator: map.get(colors.$mx-light, onPrimary)
);

$top-nav-dark: (
  primary: map.get(colors.$mx-dark, surfaceContainerHighest),
  onPrimary: map.get(colors.$mx-dark, onSurface),
  onPrimaryVariant: map.get(colors.$mx-dark, onSurfaceVariant),
  onPrimaryActiveIndicator: map.get(colors.$mx-dark, primary)
);

@mixin mx-top-nav-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;
  $top-nav-theme: $top-nav-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
    $top-nav-theme: $top-nav-dark;

    .mx-top-nav__logo--primary {
      display: none;
    }
    .mx-top-nav__logo--white {
      display: block;
    }
  } @else {
    .mx-top-nav--primary {
      .mx-top-nav__logo--primary {
        display: none;
      }
    }
    .mx-top-nav--secondary {
      .mx-top-nav__logo--white {
        display: none;
      }
    }
  }

  .mx-top-nav {
    &--primary {
      background-color: map.get($top-nav-theme, primary);
      .mat-icon {
        color: map.get($top-nav-theme, onPrimaryVariant);
      }
      .mx-top-nav-model-name {
        color: map.get($top-nav-theme, onPrimary);
      }
      .mx-top-nav-link-button {
        color: map.get($top-nav-theme, onPrimaryVariant);
        &--is-active {
          color: map.get($top-nav-theme, onPrimary);
          &:after {
            background-color: map.get($top-nav-theme, onPrimaryActiveIndicator);
          }
        }
        &:hover {
          background-color: rgba(map.get($color-theme, onPrimary), opacity.$opacity-8);
        }
      }
      .mx-avatar-profile {
        &__user-name,
        &__user-info {
          color: map.get($top-nav-theme, onPrimary);
        }
        &.mat-mdc-menu-trigger {
          &:hover {
            background-color: rgba(map.get($top-nav-theme, onPrimary), opacity.$opacity-8);
          }
        }
      }
    }
    &--secondary {
      background-color: map.get($color-theme, surfaceContainerHighest);
      .mx-top-nav-model-name {
        color: map.get($color-theme, onSurface);
      }
      .mx-top-nav-link-button {
        color: map.get($color-theme, onSurfaceVariant);
        &--is-active {
          color: map.get($color-theme, onSurface);
          &:after {
            background-color: map.get($color-theme, primary);
          }
        }
        &:hover {
          background-color: rgba(map.get($color-theme, primary), opacity.$opacity-8);
        }
      }
      .mx-avatar-profile {
        &__user-name,
        &__user-info {
          color: map.get($color-theme, onSurface);
        }
        .mat-mdc-menu-trigger {
          &:hover {
            background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
          }
        }
      }
    }

    .mx-avatar-profile__content {
      .mx-avatar-profile__user-name {
        @extend .gl-label-md;
      }
      .mx-avatar-profile__user-info {
        @extend .gl-body-md;
      }
    }
  }

  .mx-top-nav-model-name {
    &--has-border {
      border-left: 1px solid map.get($color-theme, outlineVariant);
    }
  }
}