/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use 'sass:map';
@use 'sass:string';
@use '@material/typography/typography' as mdc-typography;
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
@use '@material/theme/theme' as mdc-theme;
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/icon-button/mixins' as mdc-icon-button-mixins;
@use '@material/top-app-bar/mixins' as mdc-top-app-bar-mixins;
@use '@material/top-app-bar/variables' as mdc-top-app-bar-variables;
@use '../theme';
@use './variables';

@mixin provide-theme($theme) {
  @include theme.theme-properties(app-bar, $theme, variables.$theme-values);
}

@mixin base() {
  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);
  @include theme.css-custom-property(background-color, --forge-app-bar-theme-background, variables.$background);
  @include theme.z-index(header);

  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  transition: box-shadow 200ms linear;
}

@mixin row() {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: variables.$row-height;
}

@mixin row-two-column() {
  grid-template-columns: 1fr auto;
}

@mixin section() {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: 0 4px;
  height: variables.$row-height;
  box-sizing: border-box;
}

@mixin section-align-start() {
  justify-content: flex-start;
  order: -1;
  grid-column: 1;
}

@mixin section-align-center() {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin section-align-end() {
  justify-content: flex-end;
  order: 1;
  grid-column: 3;
}

@mixin title() {
  @include mdc-typography.typography(headline5);
  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
  padding-right: 8px;
}

@mixin fixed() {
  transition: box-shadow 200ms linear;
}

@mixin raised() {
  @include mdc-elevation-theme.elevation(4);
}

@mixin title-hover() {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  cursor: pointer;
}

@mixin title-active() {
  background-color: rgba(255, 255, 255, 0.24);
}

/// Creates styles for the app-bar host element.
@mixin host() {
  @include theme.z-index(header);

  position: relative;
  display: block;
  contain: layout style;
}

/// Creates the styles for the logo.
@mixin logo() {
  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);

  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 8px;
  font-size: 3rem;
  overflow: visible;
}

@mixin bottom() {
  padding: 0 4px;
  display: flex;
  align-items: center;
  height: auto !important;
  overflow: hidden;
}

@mixin no-center-align-end() {
  grid-column: 2;
}

@mixin core-styles() {
  .forge-app-bar {
    @include base;

    &__row {
      @include row;

      .forge-app-bar--no-center & {
        @include row-two-column;
      }
    }

    &__section {
      @include section;

      &--align-start {
        @include section-align-start;
      }

      &--align-center {
        @include section-align-center;
      }

      &--align-end {
        @include section-align-end;
      }
    }

    &--no-center {
      .forge-app-bar__section--align-end {
        @include no-center-align-end;
      }
    }
    
    ::slotted([slot=logo]) {
      @include logo;
    }

    ::slotted([slot=profile]) {
      margin-left: 4px;
    }

    ::slotted([slot=title]) {
      @include title;
    }

    slot[name=user-action] {
      display: inline-flex;
      margin-right: 24px;
    }

    &__title {
      @include title;

      &--interactable {
        &:hover {
          @include title-hover;
        }

        &:active {
          @include title-active;
        }
      }
    }

    &__bottom {
      @include bottom;

      grid-row: 2;
    }

    &--fixed {
      @include fixed;
    }

    &--raised {
      @include raised;
    }
  }
}

@mixin default-theme() {
  ::slotted(*:not(forge-button)) {
    --mdc-theme-on-primary: var(--forge-app-bar-theme-on-background, #{variables.$on-background});
    --mdc-theme-on-surface: var(--forge-app-bar-theme-on-background, #{variables.$on-background});
  }

  --mdc-theme-text-secondary-on-background: var(--forge-app-bar-theme-secondary-on-background, #{variables.$secondary-on-background});
  --mdc-theme-text-secondary-on-light: var(--forge-app-bar-theme-secondary-on-background, #{variables.$secondary-on-background});
  --mdc-theme-text-disabled-on-background: var(--forge-app-bar-theme-disabled-on-background, #{variables.$disabled-on-background});
  --mdc-theme-text-disabled-on-light: var(--forge-app-bar-theme-disabled-on-light, #{variables.$disabled-on-light});

  ::slotted(forge-tab-bar) {
    --mdc-theme-primary: var(--forge-app-bar-theme-on-background, #{variables.$on-background});
  }

  ::slotted(forge-button[type=outlined]),
  ::slotted(forge-button:not([type])) {
    --mdc-theme-primary: var(--forge-app-bar-theme-on-background, rgba(255, 255, 255, 0.87));
  }
}
