@use "../variables" as *;
@use "../helpers/mixins" as *;


// Positions
$_message-group-avatar-justify-content: flex-end;

/********** Styles **********/
.#{$prefix}-message-group {

  // Local alias
  $group-class: &;
  $message-class: #{$prefix}-message;
  $avatar-class: #{$prefix}-avatar;

  box-sizing: border-box;
  @include flex-row;
  margin: $message-group-margin;

  &__avatar {
    box-sizing: border-box;
    @include flex-column;
    justify-content: $_message-group-avatar-justify-content;
  }

  // Container for header, message and footer
  &__content {
    box-sizing: border-box;
    @include flex-column;
  }

  &__header {
    box-sizing: border-box;
    display: flex;
    font-size: $message-group-header-font-size;
    font-family: $message-group-header-font-family;
    color: $message-group-header-color;
    background-color: $message-group-header-bg-color;
    margin: $message-group-header-margin;
    padding: $message-group-header-padding;
  }

  &__footer {
    box-sizing: border-box;
    display: flex;
    font-size: $message-group-footer-font-size;
    font-family: $message-group-footer-font-family;
    color: $message-group-footer-color;
    background-color: $message-group-footer-bg-color;
    margin: $message-group-footer-margin;
    padding: $message-group-footer-padding;
  }

  &__messages {
    box-sizing: border-box;
    // First message in group
    .#{$prefix}-message:first-child {
      margin-top: 0;
    }

    // Every message in group
    .#{$prefix}-message {
      .#{$message-class}__content {
        background-color: $message-group-message-content-bg-color;
        margin-top: 0;
      }
    }

    // Last message in group
    .#{$prefix}-message:last-child {

    }

  }

  // Modifier - group of incoming messages
  &--incoming {
    justify-content: flex-start;

    & #{$group-class}__avatar {
      margin-right: 8px;
      order: 0;
    }

    & #{$group-class}__content {
      order: 1;
    }

    & #{$group-class}__messages {

      // First message in incoming group
      & .#{$message-class}:first-child .#{$message-class}__content {
        border-radius: $message-group-incoming-message-content-first-border-radius;
      }

      // Message in incoming group
      & .#{$message-class} .#{$message-class}__content {
        border-radius: $message-group-incoming-message-content-border-radius;
        color: $message-group-message-content-incoming-color;
        background-color: $message-group-message-content-incoming-bg-color;
      }

      // Last message in incoming group
      & .#{$message-class}:last-child .#{$message-class}__content {
        border-radius: $message-group-incoming-message-content-last-border-radius;
      }

      // Single message in incoming group
      // !!! only-child must be placed after last-child
      .#{$prefix}-message:only-child .#{$message-class}__content {
        border-radius: $message-group-incoming-message-content-single-border-radius;
      }

    }

  }

  // Modifier - group of outgoing messages
  &--outgoing {
    justify-content: flex-end;
    margin-left: auto;

    & #{$group-class}__avatar {
      margin-left: 8px;
      order: 1;
    }

    & #{$group-class}__content {
      order: 0;
    }

    & #{$group-class}__messages {

      & .#{$message-class} {
        justify-content: flex-end;
      }

      // First message in outgoing group
      & .#{$message-class}:first-child .#{$message-class}__content {
        border-radius: $message-group-outgoing-message-content-first-border-radius;
      }

      // Message in outgoing group
      & .#{$message-class} .#{$message-class}__content {
        border-radius: $message-group-outgoing-message-content-border-radius;
        color: $message-group-message-content-outgoing-color;
        background-color: $message-group-message-content-outgoing-bg-color;
      }

      // Last message in outgoing group
      & .#{$message-class}:last-child .#{$message-class}__content {
        border-radius: $message-group-outgoing-message-content-last-border-radius;
      }

      // Single message in outgoing group
      // !!! only-child must be placed after last-child
      .#{$prefix}-message:only-child .#{$message-class}__content {
        border-radius: $message-group-outgoing-message-content-single-border-radius;
      }

    }
  }

  // Avatar position
  // By default incoming and default message has avatar on left and outgoing has avatar on right.
  // This can be changed by adding --avatar-left or avatar-right modifier
  &--avatar-tl {

    #{$group-class}__avatar {
      justify-content: flex-start;
      order: 0;
      margin-right: $message-group-avatar-horizontal-margin;
      margin-left: 0;
    }

    #{$group-class}__content {
      order: 1;
    }
  }

  &--avatar-tr {
    #{$group-class}__avatar {
      justify-content: flex-start;
      order: 1;
      margin-left: $message-group-avatar-horizontal-margin;
      margin-right: 0;
    }

    #{$group-class}__content {
      order: 0;
    }
  }

  &--avatar-bl {
    #{$group-class}__avatar {
      justify-content: flex-end;
      order: 0;
      margin-right: $message-group-avatar-horizontal-margin;
      margin-left: 0;
    }

    #{$group-class}__content {
      order: 1;
    }
  }

  &--avatar-br {
    #{$group-class}__avatar {
      justify-content: flex-end;
      order: 1;
      margin-left: $message-group-avatar-horizontal-margin;
      margin-right: 0;
    }

    #{$group-class}__content {
      order: 0;
    }
  }

  &--avatar-cl {

    #{$group-class}__avatar {
      justify-content: center;
      order: 0;
      margin-right: $message-group-avatar-horizontal-margin;
      margin-left: 0;
    }

    #{$group-class}__content {
      order: 1;
    }
  }

  &--avatar-cr {
    #{$group-class}__avatar {
      justify-content: center;
      order: 1;
      margin-left: $message-group-avatar-horizontal-margin;
      margin-right: 0;
    }

    #{$group-class}__content {
      order: 0;
    }
  }

}