@use 'sass:map';
@use 'sass:math';

@use './shared' as *;
@use './design' as *;

$bubble: () !default;
$bubble: map.merge(
  (
    color: value('content-color-base'),
    bg-color: value('bg-color-base'),
    b-color: value('border-color-base'),
    s-color: value('shadow-color-base'),
    radius: value('radius-base'),
    min-width: 60px,
    min-height: 30px,
    content-v-padding: 8px,
    content-h-padding: 14px,
    arrow-size: 7px,
    arrow-v-offset: 16px,
    arrow-h-offset: 28px
  ),
  $bubble
);

.#{$namespace}-bubble {
  &-vars {
    @include define-preset-values('bubble', $bubble);
  }

  @mixin define-bubble-style($style-map) {
    @include define-preset-style('bubble', $style-map);
  }

  @include basis {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    color: value('bubble-color');
  }

  &__content {
    position: relative;
    min-width: value('bubble-min-width');
    min-height: value('bubble-min-height');
    padding: value('bubble-content-v-padding') value('bubble-content-h-padding');
    color: inherit;
    word-break: break-all;
    background-color: value('bubble-bg-color');
    border: value('border-shape') value('bubble-b-color');
    border-radius: value('bubble-radius');
  }

  &--background &__content {
    border: 0;
  }

  &--shadow &__content {
    border: 0;
    box-shadow: value('shadow-shape') value('bubble-s-color');
  }

  &__arrow {
    // pointer-events: none;

    &,
    &::after {
      position: absolute;
      width: 0;
      height: 0;
      border: 0 solid transparent;
    }

    &::after {
      content: '';
    }
  }

  $content: #{&}__content;
  $arrow: #{&}__arrow;

  @mixin with-bg {
    @include define-bubble-style(
      (
        b-color: 'bubble-bg-color'
      )
    );

    #{$arrow} {
      &::after {
        display: none;
      }
    }
  }

  @each $type in $types {
    @at-root {
      &--#{$type} {
        @include define-bubble-style(
          (
            color: 'color-white',
            bg-color: 'color' $type 'base'
          )
        );

        @include with-bg;
      }
    }
  }

  &--background {
    @include with-bg;
  }

  $size: value('bubble-arrow-size');
  $s-pad: 6px;
  $l-pad: calc(#{math.round($s-pad * 0.5)} + #{$size});

  $bg-color: value('bubble-bg-color');
  $border-color: value('bubble-b-color');
  $v-offset: value('bubble-arrow-v-offset');
  $h-offset: value('bubble-arrow-h-offset');

  &--top,
  &--top-start,
  &--top-end {
    padding: $s-pad 0 $l-pad;
  }

  @mixin top-arrow {
    bottom: $l-pad;
    border-width: $size $size 0;
    border-top-color: $border-color;
    transform: translateY(100%);

    &::after {
      bottom: 1px;
      border-width: $size $size 0;
      border-top-color: $bg-color;
      transform: translateX(-50%);

      @include rtl {
        transform: translateX(50%);
      }
    }
  }

  &--top > &__arrow {
    left: calc(50% - #{$size});

    @include top-arrow;
  }

  &--top-start > &__arrow {
    left: calc(#{$h-offset} - #{$size});

    @include top-arrow;
  }

  &--top-end > &__arrow {
    left: calc(100% - #{$h-offset} - #{$size});

    @include top-arrow;
  }

  &--bottom,
  &--bottom-start,
  &--bottom-end {
    padding: $l-pad 0 $s-pad;
  }

  @mixin bottom-arrow {
    top: $l-pad;
    border-width: 0 $size $size;
    border-bottom-color: $border-color;
    transform: translateY(-100%);

    &::after {
      top: 1px;
      border-width: 0 $size $size;
      border-bottom-color: $bg-color;
      transform: translateX(-50%);

      @include rtl {
        transform: translateX(50%);
      }
    }
  }

  &--bottom > &__arrow {
    left: calc(50% - #{$size});

    @include bottom-arrow;
  }

  &--bottom-start > &__arrow {
    left: calc(#{$h-offset} - #{$size});

    @include bottom-arrow;
  }

  &--bottom-end > &__arrow {
    left: calc(100% - #{$h-offset} - #{$size});

    @include bottom-arrow;
  }

  &--left,
  &--left-start,
  &--left-end {
    padding: 0;
    padding-inline: $s-pad $l-pad;
  }

  @mixin left-arrow {
    right: $l-pad;
    border-width: $size 0 $size $size;
    border-inline-start-color: $border-color;
    transform: translateX(100%);

    @include rtl {
      border-width: $size $size $size 0;
      transform: translateX(100%) scaleX(-1);
    }

    &::after {
      inset-inline-end: 1px;
      border-width: $size 0 $size $size;
      border-inline-start-color: $bg-color;
      transform: translateY(-50%);

      @include rtl {
        border-width: $size $size $size 0;
      }
    }
  }

  &--left > &__arrow {
    top: calc(50% - #{$size});

    @include left-arrow;
  }

  &--left-start > &__arrow {
    top: calc(#{$v-offset} - #{$size});

    @include left-arrow;
  }

  &--left-end > &__arrow {
    top: calc(100% - #{$v-offset} - #{$size});

    @include left-arrow;
  }

  &--right,
  &--right-start,
  &--right-end {
    padding: 0;
    padding-inline: $l-pad $s-pad;
  }

  @mixin right-arrow {
    left: $l-pad;
    border-width: $size $size $size 0;
    border-inline-end-color: $border-color;
    transform: translateX(-100%);

    @include rtl {
      border-width: $size 0 $size $size;
      transform: translateX(-100%) scaleX(-1);
    }

    &::after {
      inset-inline-start: 1px;
      border-width: $size $size $size 0;
      border-inline-end-color: $bg-color;
      transform: translateY(-50%);

      @include rtl {
        border-width: $size 0 $size $size;
      }
    }
  }

  &--right > &__arrow {
    top: calc(50% - #{$size});

    @include right-arrow;
  }

  &--right-start > &__arrow {
    top: calc($v-offset - #{$size});

    @include right-arrow;
  }

  &--right-end > &__arrow {
    top: calc(100% - #{$v-offset} - #{$size});

    @include right-arrow;
  }
}