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

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

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

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

  $popper: #{&}__popper;
  $arrow: #{&}__arrow;

  @include basis;

  &__trigger {
    display: inline-block;
  }

  &__tip {
    position: relative;
    min-width: value('tooltip-min-width');
    min-height: value('tooltip-min-height');
    padding: value('tooltip-v-padding') value('tooltip-h-padding');
    background-color: value('tooltip-bg-color');
    border-radius: value('tooltip-radius');
    box-shadow: value('tooltip-shadow');

    #{$popper}--dark & {
      color: value('tooltip-color-dark');
      box-shadow: value('tooltip-shadow-dark');
    }
  }

  &__arrow {
    pointer-events: none;

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

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

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

  &__popper {
    &[data-popper-placement^='top'] {
      padding: $s-pad 0 $l-pad;

      & > #{$arrow} {
        bottom: $l-pad;
        border-width: $size $size 0;
        transform: translateY(100%);

        // @include rtl {
        //   transform: translate(50%, 100%);
        // }

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

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

    &[data-popper-placement^='bottom'] {
      padding: $l-pad 0 $s-pad;

      & > #{$arrow} {
        top: $l-pad;
        border-width: 0 $size $size;
        transform: translateY(-100%);

        // @include rtl {
        //   transform: translate(50%, -100%);
        // }

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

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

    &[data-popper-placement^='left'] {
      padding: 0 $l-pad 0 $s-pad;

      & > #{$arrow} {
        right: $l-pad;
        border-width: $size 0 $size $size;
        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;
          transform: translateY(-50%);

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

    &[data-popper-placement^='right'] {
      padding: 0 $s-pad 0 $l-pad;

      & > #{$arrow} {
        left: $l-pad;
        border-width: $size $size $size 0;
        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;
          transform: translateY(-50%);

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

    &--no-arrow {
      &[data-popper-placement^='top'],
      &[data-popper-placement^='bottom'] {
        padding: $s-pad 0;
      }

      &[data-popper-placement^='left'],
      &[data-popper-placement^='right'] {
        padding: 0 $s-pad;
      }
    }

    $v-offset: value('tooltip-arrow-v-offset');
    $h-offset: value('tooltip-arrow-h-offset');

    &[data-popper-placement='top'] > #{$arrow} {
      left: 50%;
    }

    &[data-popper-placement='top-start'] > #{$arrow} {
      left: $h-offset;

      @include rtl {
        left: calc(100% - #{$h-offset});
      }
    }

    &[data-popper-placement='top-end'] > #{$arrow} {
      left: calc(100% - #{$h-offset});

      @include rtl {
        left: $h-offset;
      }
    }

    &[data-popper-placement='bottom'] > #{$arrow} {
      left: 50%;
    }

    &[data-popper-placement='bottom-start'] > #{$arrow} {
      left: $h-offset;

      @include rtl {
        left: calc(100% - #{$h-offset});
      }
    }

    &[data-popper-placement='bottom-end'] > #{$arrow} {
      left: calc(100% - #{$h-offset});

      @include rtl {
        left: $h-offset;
      }
    }

    &[data-popper-placement='left'] > #{$arrow} {
      top: 50%;
    }

    &[data-popper-placement='left-start'] > #{$arrow} {
      top: $v-offset;
    }

    &[data-popper-placement='left-end'] > #{$arrow} {
      top: calc(100% - #{$v-offset});
    }

    &[data-popper-placement='right'] > #{$arrow} {
      top: 50%;
    }

    &[data-popper-placement='right-start'] > #{$arrow} {
      top: $v-offset;
    }

    &[data-popper-placement='right-end'] > #{$arrow} {
      top: calc(100% - #{$v-offset});
    }

    &--no-hover {
      pointer-events: none;
    }
  }

  @mixin theme($name, $content-color, $border-color, $fill-color) {
    &__popper--#{$name} > &__tip {
      color: $content-color;
      background-color: $fill-color;
    }

    &__popper--#{$name} {
      &[data-popper-placement^='top'] {
        & > #{$arrow} {
          border-top-color: $border-color;

          &::after {
            border-top-color: $fill-color;
          }
        }
      }

      &[data-popper-placement^='bottom'] {
        & > #{$arrow} {
          border-bottom-color: $border-color;

          &::after {
            border-bottom-color: $fill-color;
          }
        }
      }

      &[data-popper-placement^='left'] {
        & > #{$arrow} {
          border-inline-start-color: $border-color;

          &::after {
            border-inline-start-color: $fill-color;
          }
        }
      }

      &[data-popper-placement^='right'] {
        & > #{$arrow} {
          border-inline-end-color: $border-color;

          &::after {
            border-inline-end-color: $fill-color;
          }
        }
      }
    }
  }

  @include theme(
    'light',
    value('tooltip-content-color'),
    value('tooltip-s-color'),
    value('tooltip-bg-color')
  );

  @include theme(
    'dark',
    value('tooltip-content-color-dark'),
    value('tooltip-s-color-dark'),
    value('tooltip-bg-color-dark')
  );
}