@use 'sass:map';
@use 'vuetify/settings';
@use '@/assets/styles/settings/_colors.scss';
@use '@/assets/styles/generic/_variables.scss';
@use '@/assets/styles/themes/adamant/_mixins.scss';


$chat-sender: (
  'font-size': 15px,
  'line-height': 1.2
);

$chat-message: (
  'font-size': 14px,
  'font-weight': 300,
  'line-height': 1
);

$chat-avatar-size: 40px;

$scroll-bar-width: 4px;

.a-chat {
  display: block;
  text-decoration: none;
  height: 100%; // <-- Fallback for Chrome < v108
  // Chrome supports `dvh, lvh...` units starting with v108.
  // See https://caniuse.com/viewport-unit-variants
  height: calc(100dvh - var(--v-layout-bottom));
  position: relative;

  @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom);
    top: env(safe-area-inset-top);
    height: calc(100dvh - var(--v-layout-bottom) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  }

  &__content {
    height: inherit;
    display: flex;
    flex-direction: column;
    background-color: transparent;
  }

  &__body {
    position: relative;
    flex: 1;
    color: inherit;
  }

  &__body-messages {
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
    width: 100%;
    height: 100%;
    padding: 16px 16px 16px 16px;

    /* Scrollbar styles (Firefox) */
    scrollbar-color: map.get(settings.$grey, 'lighten-2' transparent);
    scrollbar-width: thin;

    /* Scrollbar styles (WebKit) */
    &::-webkit-scrollbar {
      width: $scroll-bar-width;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: map.get(settings.$grey, 'lighten-2');
    }

    &::-webkit-scrollbar-thumb:hover {
      background: map.get(settings.$grey, 'lighten-1');
    }
  }

  &__message-container {
    display: inline-block;
    position: relative;
    clear: both;
    float: left;
    max-width: 80%;
    margin: unset; // resets margins of <v-row/>
    margin-bottom: 16px;

    &:hover {
      .a-chat__message-actions-icon {
        visibility: visible;
        transition:
          visibility 0.5s,
          max-height 0.5s;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }

    & + & {
      margin-top: unset; // resets margins of `.v-row + .v-row`
    }

    &--grouped {
      margin-bottom: 4px;
    }

    &--grouped-left {
      margin-bottom: 4px;
    }

    &--right {
      float: right;
    }

    &--transition {
      transition: left 0.4s;
    }

    &--disable-max-width {
      max-width: unset;
    }
  }

  &__message {
    display: flex;
    flex-direction: row;
    padding: 8px 16px;
    border-radius: 16px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 0;
      height: 0;
      border: 22px solid transparent;
    }
  }

  &__message-container:not(&__message-container--right):not(&__message-container--grouped-left) .a-chat__message::after {
    left: -6px;
    border-right-color: white;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(-15deg);
  }

  &__message-container--right:not(&__message-container--grouped) .a-chat__message::after {
    right: -6px;
    border-left-color: white;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(15deg);
  }

  &__message-actions-icon {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    border-radius: 0 8px;
  }

  @keyframes flashing {
    0% {
    }
    50% {
      background-color: rgba(map.get(colors.$adm-colors, 'primary'), 0.25);
    }
    100% {
    }
  }

  &__message--flashing {
    animation: flashing 1s 1;
  }

  /**
   * 1. Аvatar must have width/height even if empty.
   */
  &__message-avatar {
    width: $chat-avatar-size;
    height: $chat-avatar-size;
    min-width: $chat-avatar-size;
    min-height: $chat-avatar-size;
    margin-right: 8px;
    border-radius: 4px;

    img {
      border-radius: inherit;
    }

    &--right {
      order: 2;
      margin-right: 0px;
      margin-left: 8px;
    }
  }

  /**
   * 1. Element `pre` must not overflow the parent flex element.
   */
  &__message-card {
    text-align: left;
    display: inline-block;
    min-width: 0;
  }

  &__message-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 17px;
  }

  &__message-text {
    font-size: map.get($chat-message, 'font-size');
    font-weight: map.get($chat-message, 'font-weight');
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;

    code {
      font-weight: inherit;
      font-size: 14px;
      padding: 2px 4px;
      border-radius: 6px;
      overflow-x: auto;
      max-width: 100%;
      tab-size: 4;
      line-height: 24px;
    }

    code:before {
      letter-spacing: inherit;
    }

    p {
      margin-bottom: 0;
    }

    p:not(:last-child) {
      margin-bottom: 8px;
    }

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    pre {
      font-size: 12px;
      padding: 8px;
      margin-bottom: 8px;
      tab-size: 4;
      border-radius: 6px;
      overflow-x: auto;
      max-width: 100%;

      code {
        padding: 0px;
      }
    }
  }

  &__quoted-message {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  /**
   * 1. align text to top
   */
  &__sender {
    font-size: map.get($chat-sender, 'font-size');
    line-height: map.get($chat-sender, 'line-height');
    font-weight: 700;
    margin-right: 8px;
  }

  &__timestamp {
    font-size: 10px;
    line-height: 1;
  }

  &__amount {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    margin-top: 6px;
    margin-bottom: 6px;

    &--clickable {
      cursor: pointer;
    }
  }

  &__rates-column {
    flex-direction: column;
  }

  &__rates {
    color: hsla(0, 0%, 100%, 0.7);
    font-style: italic;
    font-size: 14px;
    font-weight: 300;
  }

  &__status {
    line-height: 1;
    margin-left: 8px;

    i {
      line-height: 1.2;
    }
  }

  &__blockchain-status {
    font-size: 12px;
    line-height: 1;
    margin-right: 5px;
  }

  &__direction {
    font-size: 14px;
    font-weight: 300;
    border-bottom: 1px solid map.get(colors.$adm-colors, 'secondary2');
    padding-bottom: 5px;
    margin-bottom: 15px;
  }

  &__form {
    padding: 8px 12px 8px 12px;
    position: relative;
    width: 100%;

    /**
     * Vuetify
     * 1. fix Firefox `textarea` height.
     * 2. reset textarea extra margins.
     */
    textarea {
      line-height: 18px;
    }

    .v-field__input {
      mask-image: none;
      padding-top: 7px;
      padding-bottom: 7px;
      min-height: var(--v-input-control-height);
      overflow: visible; // show scrollbar even with VTextarea `auto-grow` prop enabled

      /* Scrollbar styles (Firefox) */
      scrollbar-color: map.get(colors.$adm-colors, 'secondary2-transparent' transparent);
      scrollbar-width: thin;

      /* Scrollbar styles (WebKit) */
      &::-webkit-scrollbar {
        width: 2px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: map.get(colors.$adm-colors, 'secondary2-transparent');
      }

      &::-webkit-scrollbar-thumb:hover {
        background: map.get(colors.$adm-colors, 'secondary2-transparent');
      }
    }

    .v-text-field {
      padding-top: 0;
      margin-top: 0;
    }

    .v-text-field__slot {
      font-weight: 400;
    }
  }
  &__form-append {
    margin-right: 8px;
  }
  &__fab {
    position: absolute;
    right: 16px;
    bottom: 16px;
    opacity: 0.7;

    &:hover {
      opacity: 1;
    }
  }
  &__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(6px);
  }
}

/** Themes **/
.v-theme--light {
  .a-chat {
    &__content {
      color: map.get(settings.$shades, 'black');
    }

    &__body {
      @include mixins.linear-gradient-light-gray();
    }

    &__message {
      background-color: map.get(colors.$adm-colors, 'light-gray');
      border-style: solid;
      border-width: 0.1px;
      border-color: map.get(colors.$adm-colors, 'light-gray2');
      box-shadow:
        0 1px 10px hsla(0, 0%, 39.2%, 0.06),
        0 1px 1px hsla(0, 0%, 39.2%, 0.04),
        0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);

      &--red {
        background-color: map.get(settings.$red, 'lighten-5');
      }

      &--green {
        background-color: map.get(settings.$green, 'lighten-5');
      }
    }

    &__sender {
      color: map.get(settings.$grey, 'darken-4');
    }

    &__timestamp {
      color: map.get(colors.$adm-colors, 'muted');
    }

    &__blockchain-status {
      color: map.get(colors.$adm-colors, 'muted');
    }

    &__amount {
      color: map.get(colors.$adm-colors, 'regular');
    }

    &__rates {
      color: map.get(colors.$adm-colors, 'muted');
    }

    &__direction {
      color: map.get(colors.$adm-colors, 'regular');
    }

    &__message-text {
      color: map.get(colors.$adm-colors, 'regular');

      a {
        color: map.get(settings.$blue, 'base');
      }

      code {
        background-color: map.get(settings.$grey, 'lighten-4');
        color: map.get(settings.$grey, 'darken-3');
        border-color: map.get(settings.$grey, 'lighten-2');
      }

      pre {
        background-color: map.get(settings.$grey, 'lighten-4');
        color: map.get(settings.$grey, 'darken-3');
        border-color: map.get(settings.$grey, 'lighten-2');
      }
    }
    &__form {
      background-color: map.get(colors.$adm-colors, 'secondary2');

      .v-text-field__slot {
        .v-label {
          color: map.get(colors.$adm-colors, 'muted');
        }

        textarea {
          color: map.get(colors.$adm-colors, 'regular');
          caret-color: map.get(colors.$adm-colors, 'primary2');
        }
      }

      .v-text-field > .v-input__control > .v-input__slot:before {
        border-color: rgba(0, 0, 0, 0.12);
      }

      .v-text-field:not(.v-input--has-state) > .v-input__control > .v-input__slot:hover:before {
        border-color: rgba(0, 0, 0, 0.12);
      }

      .v-text-field.v-input--is-focused > .v-input__control > .v-input__slot:after {
        border-width: thin 0 0 0;
        color: map.get(colors.$adm-colors, 'primary2');
      }

      .v-text-field > .v-input__control > .v-input__slot:after {
        transition: unset;
      }

      .v-input--is-focused .v-input__slot .v-icon {
        color: map.get(colors.$adm-colors, 'muted') !important;
      }

      &--is-active .v-input--is-focused .v-input__slot .v-icon {
        color: map.get(colors.$adm-colors, 'primary') !important;
      }
    }
    &__send-icon {
      color: map.get(settings.$grey, 'darken-1');
    }
  }
}
.v-theme--dark {
  .a-chat {
    &__content {
      color: map.get(settings.$shades, 'white');
    }

    &__body {
      @include mixins.linear-gradient-dark-soft();
    }

    &__message {
      border-style: solid;
      border-width: 0.1px;
      border-color: map.get(colors.$adm-colors, 'black4');
      background-color: map.get(colors.$adm-colors, 'black3');
      box-shadow:
        0 1px 10px hsla(0, 0%, 39.2%, 0.06),
        0 1px 1px hsla(0, 0%, 39.2%, 0.04),
        0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
      &--red {
        background-color: map.get(settings.$grey, 'darken-3');
      }
      &--green {
        background-color: map.get(settings.$grey, 'darken-3');
      }
    }

    &__message-container--right:not(&__message-container--grouped) .a-chat__message::after {
      border-left-color: map.get(colors.$adm-colors, 'black3');
    }

    &__message-container:not(&__message-container--right):not(&__message-container--grouped-left) .a-chat__message::after {
      border-right-color: map.get(colors.$adm-colors, 'black3');
    }

    &__message-actions-icon {
      background-image: linear-gradient(
        45deg,
        map.get(colors.$adm-colors, 'muted'),
        map.get(settings.$shades, 'black') 40%
      );
    }

    &__sender {
      color: map.get(settings.$shades, 'white');
    }

    &__timestamp {
      color: map.get(settings.$grey, 'base');
    }
    &__blockchain-status {
      color: map.get(settings.$grey, 'base');
    }

    &__message-text {
      a {
        color: map.get(settings.$blue, 'lighten-2');
      }

      code {
        color: map.get(settings.$shades, 'white');
        border-color: map.get(settings.$grey, 'darken-2');
        background-color: map.get(colors.$adm-colors, 'secondary2-slightly-transparent');
      }
      pre {
        color: inherit;
        border-color: map.get(settings.$grey, 'darken-2');
        background-color: map.get(colors.$adm-colors, 'secondary2-slightly-transparent');

        code {
          background-color: transparent;
        }
      }
    }

    &__form {
      background-color: map.get(settings.$grey, 'darken-4');
    }
    &__send-icon {
    }
  }
}
