@use 'sass:map';
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/typography' as typography;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/transition';
@use '@mezzanine-ui/system/z-index' as z-index;
@use './inline-message' as *;

// Default padding config
$default-padding-config: (
  padding-y: spacing.semantic-variable(padding, vertical, calm),
  padding-x: spacing.semantic-variable(padding, horizontal, cozy),
);

// Base Info
$base-info: (
  background-color: palette.semantic-variable(background, info-faint),
  icon-color: palette.semantic-variable(icon, info-strong),
  text-color: palette.semantic-variable(text, info-strong),
);

// Base Error
$base-error: (
  background-color: palette.semantic-variable(background, error-faint),
  icon-color: palette.semantic-variable(icon, error-strong),
  text-color: palette.semantic-variable(text, error-strong),
);

// Base Warning
$base-warning: (
  background-color: palette.semantic-variable(background, warning-faint),
  icon-color: palette.semantic-variable(icon, warning-strong),
  text-color: palette.semantic-variable(text, warning-strong),
);

// Variant hierarchy map - 將所有 variants 整合
$variant-hierarchy: (
  base-info: $base-info,
  base-error: $base-error,
  base-warning: $base-warning,
);

// 取得特定 variant 和 hierarchy 的顏色值
@function _get-color($variant, $property) {
  $variant-map: map.get($variant-hierarchy, $variant);

  @if $variant-map {
    $value: map.get($variant-map, $property);

    @if $value == none {
      @return null;
    } @else {
      @return $value;
    }
  }

  @return null;
}

// 套用特定 variant 的顏色
@mixin _apply-variant-colors($variant) {
  $background-color: _get-color($variant, background-color);
  $icon-color: _get-color($variant, icon-color);
  $text-color: _get-color($variant, text-color);

  @if $background-color {
    background-color: $background-color;
  }

  @if $icon-color {
    --#{$prefix}-icon-color: #{$icon-color};
  }

  @if $text-color {
    --#{$prefix}-text-color: #{$text-color};
  }
}

// 套用 padding 配置
@mixin _apply-padding($padding-config) {
  padding: map.get($padding-config, padding-y) map.get($padding-config, padding-x);
}

.#{$prefix} {
  display: flex;
  align-items: center;
  gap: spacing.semantic-variable(gap, comfort);
  justify-content: space-between;
  width: fill-content;
  max-width: 100%;
  border-radius: radius.variable(base);
  flex-shrink: 0;
  box-sizing: border-box;

  @include _apply-padding($default-padding-config);

  &__content-container {
    display: flex;
    align-items: center;
    gap: spacing.semantic-variable(gap, tight);
  }

  &__icon {
    color: var(--#{$prefix}-icon-color);
    font-size: spacing.semantic-variable(size, element, gentle);
  }

  &__content {
    @include typography.semantic-variable(body);
    @include typography.overflow-ellipsis();

    color: var(--#{$prefix}-text-color);
  }

  @each $severity in $severities {
    &--#{$severity} {
      $variant-key: null;

      @if $severity == 'info' {
        $variant-key: 'base-info';
      } @else if $severity == 'error' {
        $variant-key: 'base-error';
      } @else {
        $variant-key: 'base-warning';
      }

      @include _apply-variant-colors($variant-key);
    }
  }

  // Set gap between inline messages when not inside InlineMessageGroup
  &:not(.#{$group-prefix} > &) {
    margin-bottom: spacing.semantic-variable(gap, comfort);
  }
}

.#{$group-prefix} {
  display: flex;
  flex-direction: column;
  z-index: z-index.get(feedback);
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  gap: spacing.semantic-variable(gap, base);
  margin-block: 0;

  > .#{$prefix} {
    pointer-events: auto;
  }
}