@use 'sass:map';

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

$slider: () !default;
$slider: map.merge(
  (
    track-bg-color: value('fill-color-humble'),
    track-bg-color-hover: value('fill-color-hover'),
    track-bg-color-disabled: value('slider-track-bg-color'),
    track-height: 4px,
    filler-bg-color: value('color-primary-opacity-2'),
    filler-bg-color-hover: value('color-primary-base'),
    filler-bg-color-disabled: value('fill-color-disabled'),
    handler-size: 16px,
    handler-bg-color: value('color-white'),
    handler-b-width: 2px,
    handler-b-color: value('color-primary-base'),
    handler-b-color-disabled: value('fill-color-disabled'),
    handler-s-color: value('color-primary-light-6'),
    handler-shadow: unset,
    handler-shadow-hover: unset,
    handler-shadow-focus: 0 0 4px 1px value('slider-handler-s-color'),
    handler-shadow-disabled: unset,
    handler-scale-hover: 1.25,
    handler-scale-focus: 1.25,
    marker-size: 8px,
    marker-pad: 32px
  ),
  $slider
);

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

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

  @include basis {
    display: flex;
    width: 100%;
    cursor: pointer;
  }

  $padding: max(0px, calc((value('slider-handler-size') - value('slider-track-height')) * 0.5));
  $margin: calc(value('slider-handler-size') * 0.5 + 1px);

  &--vertical {
    display: inline-flex;
    width: auto;
    height: 100%;
  }

  &--with-marker {
    margin-bottom: value('slider-marker-pad');
  }

  &--flip-marker {
    margin-top: value('slider-marker-pad');
    margin-bottom: 0;
  }

  &--vertical#{&}--with-marker {
    margin-inline-end: value('slider-marker-pad');
    margin-bottom: 0;
  }

  &--vertical#{&}--flip-marker {
    margin-inline: value('slider-marker-pad') 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  &--loading {
    cursor: auto;
  }

  &--disabled {
    cursor: not-allowed;
  }

  &__container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - value('slider-handler-size') - 2px);
    padding: $padding 0;
    margin: 0 $margin;
    cursor: pointer;
  }

  &--vertical &__container {
    flex-direction: row;
    width: auto;
    height: calc(100% - value('slider-handler-size') - 2px);
    padding: 0 $padding;
    margin: $margin 0;
  }

  &--disabled &__container {
    cursor: not-allowed;
  }

  &__track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: value('slider-track-height');
    overflow: hidden;
    background-color: value('slider-track-bg-color');
    border-radius: value('slider-track-height');
    transition: value('transition-background');
  }

  &:hover &__track,
  &--sliding &__track {
    background-color: value('slider-track-bg-color-hover');
  }

  &--vertical &__track {
    width: value('slider-track-height');
    height: 100%;
  }

  &--reverse &__track {
    align-items: flex-end;
    justify-content: flex-end;
  }

  &--disabled &__track,
  &--disabled:hover &__track,
  &--disabled#{&}--sliding &__track {
    background-color: value('slider-track-bg-color-disabled');
  }

  &__filler {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    padding: $padding 0;
    overflow: hidden;
    border-radius: value('slider-track-height');

    &-inner {
      width: 100%;
      height: 100%;
      background-color: value('slider-filler-bg-color');
      border-radius: value('slider-track-height');
      transition: value('transition-background');
    }
  }

  &--vertical &__filler {
    inset-inline: 0;
    top: auto;
    bottom: auto;
    width: auto;
    height: 100%;
    padding: 0 $padding;
  }

  &--range-draggable &__filler {
    cursor: ew-resize;
  }

  &--vertical#{&}--range-draggable &__filler {
    cursor: ns-resize;
  }

  &:hover &__filler,
  &--sliding &__filler {
    &-inner {
      background-color: value('slider-filler-bg-color-hover');
    }
  }

  &--disabled &__filler,
  &--disabled:hover &__filler,
  &--disabled#{&}--sliding &__filler {
    &-inner {
      background-color: value('slider-filler-bg-color-disabled');
    }
  }

  $handler-size: value('slider-handler-size');

  &__trigger {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: $handler-size;
    height: $handler-size;
    transition: value('transition-opacity');

    .#{$namespace}-tooltip {
      line-height: 1;
      cursor: pointer;
      user-select: none;

      &,
      &__trigger {
        width: 100%;
        height: 100%;
      }
    }
  }

  &--hide-trigger &__trigger {
    opacity: 0%;
  }

  &__handler {
    @include round-border(value('slider-handler-b-color')) {
      width: $handler-size;
      height: $handler-size;
      cursor: pointer;
      background-color: value('slider-handler-bg-color');
      border: value('slider-handler-b-width') solid value('slider-handler-b-color');
      border-radius: $handler-size;
      outline: 0;
      box-shadow: value('slider-handler-shadow');
      transition: value('transition-border'), value('transition-shadow'),
        value('transition-transform');
    }

    &::before {
      inset-inline-start: 2px;
      top: 2px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      opacity: 0%;
    }
  }

  &--hide-trigger &__handler {
    transform: scale(0);
  }

  $handler: #{&}__handler;

  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 0;
    transition: value('transition-transform');

    &:hover {
      transform: scale(value('slider-handler-scale-hover'));

      #{$handler} {
        box-shadow: value('slider-handler-shadow-hover');
      }
    }

    &:focus,
    &--sliding {
      transform: scale(value('slider-handler-scale-focus'));

      #{$handler} {
        box-shadow: value('slider-handler-shadow-focus');
      }
    }

    &--loading #{$handler}::before {
      opacity: 100%;
    }
  }

  &--disabled &__button {
    #{$handler} {
      cursor: not-allowed;
      border-color: value('slider-handler-b-color-disabled');
    }

    &,
    &:hover {
      transform: scale(1);

      #{$handler} {
        box-shadow: value('slider-handler-shadow-disabled');
      }
    }
  }

  &--disabled#{&}--sliding &__button &__handler {
    box-shadow: value('slider-handler-shadow-disabled');
  }

  &__tip {
    min-width: auto;
    min-height: auto;
    user-select: none;
  }

  $marker-size: value('slider-marker-size');

  &__point {
    position: absolute;
    display: flex;
    pointer-events: none;
  }

  &__dot {
    width: $marker-size;
    height: $marker-size;
    background-color: value('slider-handler-bg-color');
    border: value('slider-handler-b-width') solid value('slider-handler-b-color-disabled');
    border-radius: $marker-size;
    transition: value('transition-border');
  }

  &__point--in-range &__dot {
    border-color: value('slider-handler-b-color');
  }

  &--disabled &__point &__dot {
    border-color: value('slider-handler-b-color-disabled');
  }

  $markers-pos: calc(value('slider-handler-size') + 6px);

  &__markers {
    position: absolute;
    top: $markers-pos;
    width: 100%;
  }

  &--flip-marker &__markers {
    top: auto;
    bottom: $markers-pos;
  }

  &--vertical &__markers {
    inset-inline-start: $markers-pos;
    top: auto;
    width: auto;
    height: 100%;
  }

  &--vertical#{&}--flip-marker &__markers {
    inset-inline: auto $markers-pos;
    bottom: auto;
  }

  &__marker {
    position: absolute;
    user-select: none;
  }

  &--flip-marker &__marker {
    bottom: 0;
  }

  &--vertical#{&}--flip-marker &__marker {
    right: 0;
    bottom: auto;
  }

  $states: success, error, warning;

  @each $state in $states {
    &--#{$state} {
      @include define-slider-style(
        (
          filler-bg-color: 'color' $state 'opacity-2',
          filler-bg-color-hover: 'color' $state 'base',
          handler-b-color: 'color' $state 'base',
          handler-s-color: 'color' $state 'light-6'
        )
      );
    }
  }
}