@use 'sass:map';

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

$transfer: () !default;
$transfer: map.merge(
  (
    d-color: value('border-color-light-2'),
    panel-bg-color: transparent,
    panel-bg-color-disabled: value('fill-color-humble'),
    panel-b-color: value('border-color-base'),
    panel-b-color-hover: value('color-primary-light-1'),
    panel-b-color-focus: value('transfer-panel-b-color-hover'),
    panel-b-color-disabled: value('border-color-light-2'),
    panel-s-color-focus: value('color-primary-opacity-6'),
    panel-radius: value('radius-base'),
    panel-width: 200px,
    panel-height: 280px,
    header-bg-color: value('fill-color-background'),
    reverse-color: value('content-color-secondary'),
    reverse-color-hover: value('color-primary-base'),
    reverse-color-disabled: value('content-color-disabled'),
    option-color-hitting: value('color-primary-base'),
    option-color-disabled: value('content-color-disabled'),
    option-bg-color: transparent,
    option-bg-color-hover: value('fill-color-hover'),
    option-bg-color-hitting: value('fill-color-humble'),
    empty-color: value('content-color-placeholder')
  ),
  $transfer
);

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

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

  $radius: value('transfer-panel-radius');

  @include basis {
    display: flex;
    align-items: center;
  }

  $states: success, error, warning;

  @each $state in $states {
    &--#{$state} {
      @include define-transfer-style(
        (
          panel-b-color: 'color' $state 'light-1',
          panel-b-color-hover: 'color' $state 'light-1',
          panel-s-color-focus: 'color' $state 'opacity-6',
          reverse-color-hover: 'color' $state 'base'
        )
      );
    }
  }

  &__panel {
    display: flex;
    flex-direction: column;
    width: value('transfer-panel-width');
    height: value('transfer-panel-height');
    user-select: none;
    border: value('border-shape') value('transfer-panel-b-color');
    border-radius: $radius;
    outline: 0;
    transition:
      value('transition-background'), value('transition-border'), value('transition-shadow');

    &:hover {
      border-color: value('transfer-panel-b-color-hover');
    }

    &:focus,
    &:focus-within {
      border-color: value('transfer-panel-b-color-focus');
      box-shadow: value('shadow-focus') value('transfer-panel-s-color-focus');
    }

    &--disabled {
      cursor: not-allowed;

      &,
      &:hover,
      &:focus,
      &:focus-within {
        background-color: value('transfer-panel-bg-color-disabled');
        border-color: value('transfer-panel-b-color-disabled');
        box-shadow: none;
      }
    }
  }

  &__header {
    display: flex;
    align-items: center;
    padding: 8px 12px 9px;
    background-color: value('transfer-header-bg-color');
    border-bottom: value('border-shape') value('transfer-d-color');
    border-radius: $radius $radius 0 0;
  }

  &__body {
    flex: 1 0 0;
    padding: 3px 0;
    margin: 0;
    overflow: hidden;
  }

  &__footer {
    display: flex;
    align-items: center;
    padding: 7px 12px 6px;
    border-top: value('border-shape') value('transfer-d-color');
    border-radius: 0 0 $radius $radius;
  }

  &__checkbox {
    margin-inline-end: 6px;
  }

  &__reverse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    margin-inline-end: 6px;
    color: value('transfer-reverse-color');
    cursor: pointer;
    transition: value('transition-color');

    &:hover {
      color: value('transfer-reverse-color-hover');
    }

    &--disabled {
      cursor: not-allowed;

      &,
      &:hover {
        color: value('transfer-reverse-color-disabled');
      }
    }
  }

  &__counter {
    user-select: none;
  }

  &__title {
    display: flex;
    flex: 1 0 0;
    justify-content: flex-end;
  }

  &__loading {
    display: flex;
    margin-inline-start: 4px;
  }

  &__filter {
    padding: 0 6px;
    border-bottom: value('border-shape') value('transfer-d-color');

    .#{$namespace}-input {
      background-color: transparent;
      border: 0;
      box-shadow: none;
    }
  }

  &__actions {
    display: flex;
    flex-direction: column;
    margin: 0 8px;
  }

  &__option {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
    background-color: value('transfer-option-bg-color');
    transition: value('transition-color'), value('transition-background');

    &:hover {
      background-color: value('transfer-option-bg-color-hover');
    }

    &--hitting {
      color: value('transfer-option-color-hitting');
      background-color: value('transfer-option-bg-color-hitting');
    }

    &--disabled {
      color: value('transfer-option-color-disabled');
      cursor: not-allowed;

      &:hover {
        background-color: value('transfer-option-bg-color');
      }
    }
  }

  &__label {
    padding: 0 4px;
  }

  &__pagination {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    line-height: 1;
  }

  &__page-input {
    width: 60px;
  }

  &__page-plus,
  &__page-minus {
    color: value('content-color-secondary');
    cursor: pointer;
    transition: value('transition-color');

    &:hover {
      color: value('color-primary-base');
    }

    &--disabled {
      cursor: not-allowed;

      &,
      &:hover {
        color: value('content-color-disabled');
      }
    }
  }

  &__page-plus {
    margin-inline-end: 2px;
  }

  &__page-minus {
    margin-inline-start: 2px;
  }

  &__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 16px 3px;
    color: value('transfer-empty-color');
    white-space: nowrap;
    cursor: default;
  }
}