@use 'sass:map';

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

$wheel: () !default;
$wheel: map.merge(
  (
    b-color: value('border-color-base'),
    b-color-hover: value('color-primary-opacity-1'),
    b-color-focus: value('wheel-b-color-hover'),
    b-color-disabled: value('border-color-light-2'),
    item-v-padding: 3px,
    item-h-padding: 8px,
    item-opacity: 50%,
    item-opacity-active: 100%,
    item-color-active-hover: value('color-primary-opacity-1'),
    item-color-disabled: value('content-color-disabled'),
    arrow-color: value('content-color-secondary'),
    arrow-color-hover: value('content-color-base'),
    arrow-color-disabled: value('content-color-disabled'),
    arrow-size: 15px,
    mask-bg-color: transparent,
    mask-bg-color-hover: value('color-primary-opacity-8'),
    mask-bg-color-focus: value('wheel-mask-bg-color-hover')
  ),
  $wheel
);

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

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

  @include basis {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    outline: 0;
  }

  &--horizontal {
    flex-direction: row;
  }

  &__scroll {
    position: relative;
    cursor: pointer;
    user-select: none;
    border: value('border-shape') transparent;
  }

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

  &--loading &__scroll {
    cursor: auto;
  }

  &__list {
    display: flex;
    flex-direction: column;
    padding: 6px;
    margin: 0;
  }

  &--horizontal &__list {
    flex-direction: row;
  }

  &__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: value('wheel-item-v-padding') value('wheel-item-h-padding');
    list-style: none;
    opacity: value('wheel-item-opacity');
    transition: value('transition-color'), value('transition-opacity');

    &--active {
      opacity: value('wheel-item-opacity-active');
    }

    &--disabled {
      color: value('wheel-item-color-disabled');
    }
  }

  &:hover &__item {
    &--active {
      color: value('wheel-item-color-active-hover');
    }

    &--disabled {
      color: value('wheel-item-color-disabled');
    }
  }

  &--disabled &__item {
    color: value('wheel-item-color-disabled');
  }

  &__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: value('wheel-arrow-size');
    color: value('wheel-arrow-color');
    cursor: pointer;
    user-select: none;
    transition: value('transition-color');

    &:hover {
      color: value('wheel-arrow-color-hover');
    }

    &--disabled {
      &,
      &:hover {
        color: value('wheel-arrow-color-disabled');
        cursor: not-allowed;
      }
    }
  }

  &--horizontal &__arrow {
    width: value('wheel-arrow-size');
    height: 100%;
  }

  &__mask {
    position: absolute;
    pointer-events: none;
    background-color: value('wheel-mask-bg-color');
    opacity: 40%;
    transition: value('transition-background'), value('transition-border');
  }

  &:hover:not(#{&}--disabled) &__mask {
    background-color: value('wheel-mask-bg-color-hover');
  }

  &:focus:not(#{&}--disabled) &__mask {
    background-color: value('wheel-mask-bg-color-focus');
  }

  $border-width: value('wheel-mask-b-width');

  &--vertical &__mask {
    inset-inline: 0;

    &--top {
      top: 0;
      border-bottom-width: $border-width;
    }

    &--bottom {
      bottom: 0;
      border-top-width: $border-width;
    }
  }

  &--horizontal &__mask {
    top: 0;
    bottom: 0;

    &--top {
      inset-inline-start: 0;
      border-inline-end-width: $border-width;
    }

    &--bottom {
      inset-inline-end: 0;
      border-inline-start-width: $border-width;
    }
  }

  $unit-size: 16px;

  &__border {
    @include h-moving-border(value('wheel-b-color')) {
      position: absolute;
      pointer-events: none;
      border: value('border-shape') value('wheel-b-color');
      transition: value('transition-border');
    }

    &--vertical {
      @include v-moving-border(value('wheel-b-color')) {
        position: absolute;
      }
    }

    &::before,
    &::after {
      opacity: 0%;
    }

    &--active {
      &::before,
      &::after {
        opacity: 100%;
      }
    }
  }

  &:hover:not(#{&}--disabled) &__border {
    &,
    &::before,
    &::after {
      border-color: value('wheel-b-color-hover');
    }
  }

  &:focus:not(#{&}--disabled) &__border {
    &,
    &::before,
    &::after {
      border-color: value('wheel-b-color-focus');
    }
  }

  &--disabled &__border {
    border-color: value('wheel-b-color-disabled');
  }

  $states: success, error, warning;

  @each $state in $states {
    &--#{$state} {
      @include define-wheel-style(
        (
          b-color: 'color' $state 'opacity-1',
          b-color-hover: 'color' $state 'opacity-1',
          mask-bg-color: 'color' $state 'opacity-8',
          mask-bg-color-hover: 'color' $state 'opacity-8',
          arrow-color: 'color' $state 'opacity-3',
          arrow-color-hover: 'color' $state 'base',
          arrow-color-disabled: 'color' $state 'opacity-6'
        )
      );
    }
  }
}