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

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

$alertBaseClass: '#{constants.$prefix}alert';
$alertIconClass: '#{$alertBaseClass}__icon';
$alertContentClass: '#{$alertBaseClass}__content';

$appearances: (
  'positive': (
    'background': tokens.$bm-comp-alert-color-positive-bg,
    'icon-color': tokens.$bm-comp-alert-color-positive-icon,
    'body-color': tokens.$bm-comp-alert-color-positive-body,
    'heading-color': tokens.$bm-comp-alert-color-positive-heading,
    'border-color': tokens.$bm-comp-alert-color-positive-border,
  ),
  'warning': (
    'background': tokens.$bm-comp-alert-color-warning-bg,
    'icon-color': tokens.$bm-comp-alert-color-warning-icon,
    'body-color': tokens.$bm-comp-alert-color-warning-body,
    'heading-color': tokens.$bm-comp-alert-color-warning-heading,
    'border-color': tokens.$bm-comp-alert-color-warning-border,
  ),
  'negative': (
    'background': tokens.$bm-comp-alert-color-negative-bg,
    'icon-color': tokens.$bm-comp-alert-color-negative-icon,
    'body-color': tokens.$bm-comp-alert-color-negative-body,
    'heading-color': tokens.$bm-comp-alert-color-negative-heading,
    'border-color': tokens.$bm-comp-alert-color-negative-border,
  ),
  'infoPrimary': (
    'background': tokens.$bm-comp-alert-color-info-primary-bg,
    'icon-color': tokens.$bm-comp-alert-color-info-primary-icon,
    'body-color': tokens.$bm-comp-alert-color-info-primary-body,
    'heading-color': tokens.$bm-comp-alert-color-info-primary-heading,
    'border-color': tokens.$bm-comp-alert-color-info-primary-border,
  ),
  'infoSecondary': (
    'background': tokens.$bm-comp-alert-color-info-secondary-bg,
    'icon-color': tokens.$bm-comp-alert-color-info-secondary-icon,
    'body-color': tokens.$bm-comp-alert-color-info-secondary-body,
    'heading-color': tokens.$bm-comp-alert-color-info-secondary-heading,
    'border-color': tokens.$bm-comp-alert-color-info-secondary-border,
  ),
);

.#{$alertBaseClass} {
  display: flex;
  align-items: center;
  word-break: break-word;
  gap: tokens.$bm-comp-alert-space-gap;

  padding: tokens.$bm-comp-alert-space-sm-y tokens.$bm-comp-alert-space-x;

  box-shadow: tokens.$bm-comp-alert-shadow;

  border-width: tokens.$bm-comp-alert-border-width;
  border-style: solid;
  border-radius: tokens.$bm-comp-alert-radius-in-page;

  &__content__wrapper {
    flex: 1 0 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: tokens.$bm-comp-alert-space-gap;
  }

  .#{$alertContentClass} {
    display: flex;
    flex-direction: column;
    gap: tokens.$bm-comp-alert-space-text-gap;
    font: tokens.$bm-comp-alert-typo-sm-body;

    &__heading {
      font: tokens.$bm-comp-alert-typo-sm-heading;
    }
  }

  &__actions {
    display: flex;
    gap: tokens.$bm-comp-alert-space-actions-gap;
  }

  .#{$alertIconClass},
  .#{$alertIconClass} svg {
    display: flex;
    align-self: center;
    align-items: center;
    min-width: tokens.$bm-comp-alert-size-sm-icon;
    min-height: tokens.$bm-comp-alert-size-sm-icon;

    &--wrapping {
      align-self: flex-start;
    }
  }

  &__close-button {
    // Allows the close button to drop in with no extra height
    display: flex;

    align-self: center;

    &--wrapping {
      align-self: baseline;
    }
  }

  &--full-width {
    border-radius: tokens.$bm-comp-alert-radius-full-width;
  }

  &--md {
    padding: tokens.$bm-comp-alert-space-y tokens.$bm-comp-alert-space-x;

    .#{$alertContentClass} {
      font: tokens.$bm-comp-alert-typo-md-body;

      &__heading {
        font: tokens.$bm-comp-alert-typo-md-heading;
      }
    }

    .#{$alertIconClass},
    .#{$alertIconClass} svg {
      min-width: tokens.$bm-comp-alert-size-md-icon;
      min-height: tokens.$bm-comp-alert-size-md-icon;
    }
  }

  @each $state, $colors in $appearances {
    &--#{$state} {
      background-color: map.get($colors, 'background');
      border-color: map.get($colors, 'border-color');

      .#{$alertIconClass},
      .#{$alertIconClass} svg {
        color: map.get($colors, 'icon-color');
      }

      .#{$alertContentClass} {
        color: map.get($colors, 'body-color');
      }
    }
  }

  &[dir='rtl'] {
    flex-direction: row-reverse;
  }

  &--no-box {
    display: contents;
  }
}