@use 'sass:map';
@use '../utils/tokens.scss';
@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;

@import '@viasat/beam-tokens/components/Avatar';

$avatarSizes: (
  'xs': (
    'height': tokens.$bm-comp-avatar-size-xs,
    'width': tokens.$bm-comp-avatar-size-xs,
    'icon': tokens.$bm-comp-avatar-size-icon-xs,
    'gap': tokens.$bm-sem-space-25,
    'font': tokens.$bm-comp-avatar-typo-xs,
  ),
  'sm': (
    'height': tokens.$bm-comp-avatar-size-sm,
    'width': tokens.$bm-comp-avatar-size-sm,
    'icon': tokens.$bm-comp-avatar-size-icon-sm,
    'gap': tokens.$bm-sem-space-25,
    'font': tokens.$bm-comp-avatar-typo-sm,
  ),
  'md': (
    'height': tokens.$bm-comp-avatar-size-md,
    'width': tokens.$bm-comp-avatar-size-md,
    'icon': tokens.$bm-comp-avatar-size-icon-md,
    'gap': tokens.$bm-sem-space-25,
    'font': tokens.$bm-comp-avatar-typo-md,
  ),
  'lg': (
    'height': tokens.$bm-comp-avatar-size-lg,
    'width': tokens.$bm-comp-avatar-size-lg,
    'icon': tokens.$bm-comp-avatar-size-icon-lg,
    'gap': tokens.$bm-sem-space-50,
    'font': tokens.$bm-comp-avatar-typo-lg,
  ),
  'xl': (
    'height': tokens.$bm-comp-avatar-size-xl,
    'width': tokens.$bm-comp-avatar-size-xl,
    'icon': tokens.$bm-comp-avatar-size-icon-xl,
    'gap': tokens.$bm-sem-space-50,
    'font': tokens.$bm-comp-avatar-typo-xl,
  ),
);

$avatarShapes: (
  'circle': (
    'border-radius': tokens.$bm-sem-radius-round,
  ),
  'square': (
    'border-radius': tokens.$bm-sem-radius-sm,
  ),
);

$avatarAppearances: (
  'neutral': (
    'background': tokens.$bm-comp-avatar-color-neutral-bg,
    'color': tokens.$bm-comp-avatar-color-neutral-fg,
  ),
  'accent': (
    'background': tokens.$bm-comp-avatar-color-accent-bg,
    'color': tokens.$bm-comp-avatar-color-accent-fg,
  ),
  'overflow': (
    'background': tokens.$bm-comp-avatar-color-overflow-bg,
    'color': tokens.$bm-comp-avatar-color-overflow-fg,
  ),
);

$avatarBaseClass: '#{constants.$prefix}avatar';

.#{$avatarBaseClass} {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;

  &__image {
    display: flex; // NOTE: For web-components
    height: 100%;
    width: 100%;
  }

  &--interactive {
    cursor: pointer;
  }

  &--disabled {
    opacity: var(--bm-sem-opacity-disabled);
    user-select: none;
  }

  &--hidden {
    display: none;
  }

  &--with-border {
    flex: 0 0 auto;
    outline: tokens.$bm-sem-border-width-md solid tokens.$bm-comp-avatar-color-border;
  }

  &--content {
    z-index: 1;
    position: relative; // NOTE: For Webcomponent z-index doesn't work without this
  }

  &:focus-visible {
    @include mixins.simulated-inset-outline();
  }

  // Generate size modifiers
  // ex. .avatar--sm
  @each $sizeName, $sizeStyles in $avatarSizes {
    &--#{$sizeName} {
      height: map.get($sizeStyles, 'height');
      width: map.get($sizeStyles, 'width');
    }

    &__icon--#{$sizeName} {
      display: flex; // NOTE: Without this ONLY xs icon displays wrong
      color: tokens.$bm-comp-avatar-color-neutral-fg;
      width: map.get($sizeStyles, 'icon');
      height: map.get($sizeStyles, 'icon');
    }

    &__text--#{$sizeName} {
      cursor: default;
      font: map.get($sizeStyles, 'font');
    }
  }

  // Generate shape modifiers
  // ex. .avatar-circle
  @each $shapeName, $shapeStyles in $avatarShapes {
    &--#{$shapeName} {
      border-radius: map.get($shapeStyles, 'border-radius');
    }
  }

  // Generate shape modifiers
  // ex. .avatar-neutral
  @each $appearanceName, $appearanceStyles in $avatarAppearances {
    &--#{$appearanceName} {
      background: map.get($appearanceStyles, 'background');
      color: map.get($appearanceStyles, 'color');
    }
  }
}

$avatarGroupBaseClass: '#{constants.$prefix}avatar-group';
.#{$avatarGroupBaseClass} {
  display: flex;
  row-gap: tokens.$bm-sem-space-50;

  > *,
  bm-avatar {
    flex: 0 0 auto;
    outline: tokens.$bm-sem-border-width-md solid tokens.$bm-comp-avatar-color-border;
  }

  &--wrapping {
    flex-wrap: wrap;
  }

  @each $sizeName, $sizeStyles in $avatarSizes {
    &--stacked-#{$sizeName} {
      padding-inline-start: calc(map.get($sizeStyles, 'gap'));
      ::slotted(*) {
        margin-inline-start: calc(map.get($sizeStyles, 'gap') * -1);
      }
      > *,
      bm-avatar {
        margin-inline-start: calc(map.get($sizeStyles, 'gap') * -1);
      }
    }
  }

  @each $sizeName, $sizeStyles in $avatarSizes {
    &--spaced-#{$sizeName} {
      gap: map.get($sizeStyles, 'gap');
    }
  }

  @each $sizeName, $sizeStyles in $avatarSizes {
    &--#{$sizeName} {
      ::slotted(*) {
        height: map.get($sizeStyles, 'height');
      }
    }
  }

  @each $shapeName, $shapeStyles in $avatarShapes {
    &--#{$shapeName} {
      > *,
      bm-avatar {
        border-radius: map.get($shapeStyles, 'border-radius');
      }
      ::slotted(*) {
        border-radius: map.get($shapeStyles, 'border-radius');
      }
    }
  }
}