@use 'sass:map';

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

$time-picker: () !default;
$time-picker: map.merge(
  (
    color-disabled: value('input-control-color-disabled'),
    color-error: value('color-error-base'),
    unit-color: value('content-color-base'),
    unit-color-hover: value('color-primary-base'),
    unit-color-focus: value('color-white'),
    unit-color-disabled: value('input-control-color-disabled'),
    unit-bg-color-focus: value('color-primary-opacity-1'),
    unit-bg-color-error: value('color-error-opacity-1'),
    unit-h-padding: 2px,
    separator-color: value('content-color-disabled'),
    exchange-color: value('content-color-third'),
    exchange-color-hover: value('color-primary-base'),
    pane-bg-color: value('bg-color-base'),
    pane-radius: value('radius-base'),
    pane-shadow: value('shadow-base'),
    shortcut-bg-color: value('fill-color-background'),
    shortcut-bg-color-hover: value('fill-color-hover'),
    d-color: value('border-color-light-2'),
    divider: value('border-shape') value('time-picker-d-color'),
    wheel-v-padding: 8px,
    wheel-h-padding: 12px,
    option-color-disabled: value('content-color-disabled')
  ),
  $time-picker
);

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

  @include basis {
    display: inline-flex;
    width: 100%;
    user-select: none;
  }

  @include input.handler(#{&}__selector);

  $wheel: '#{$namespace}-wheel';

  &__selector {
    cursor: pointer;
  }

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

  &__control {
    position: relative;
    display: flex;
    align-items: center;
  }

  &__input {
    display: flex;
    align-items: center;
    outline: 0;

    &--error {
      color: value('time-picker-color-error');
    }
  }

  &__placeholder {
    overflow: hidden;
    color: value('input-placeholder-color');
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }

  &__unit {
    padding: 0 value('time-picker-unit-h-padding');
    color: value('time-picker-unit-color');
    text-align: center;
    transition: value('transition-background'), value('transition-color');

    &:hover {
      color: value('time-picker-unit-color-hover');
    }

    &--focused,
    &--focused:hover {
      color: value('time-picker-unit-color-focus');
      background-color: value('time-picker-unit-bg-color-focus');
    }
  }

  &--disabled &__unit {
    color: value('time-picker-unit-color-disabled');
  }

  &__input--error &__unit {
    color: value('time-picker-color-error');

    &--focused {
      color: value('time-picker-unit-color-focus');
      background-color: value('time-picker-unit-bg-color-error');
    }
  }

  &__label {
    text-align: center;
    user-select: none;
    transition: value('transition-background'), value('transition-color');
  }

  &__separator {
    color: value('time-picker-separator-color');
    transition: value('transition-color');
  }

  &__input--error &__separator {
    color: value('time-picker-color-error');
  }

  &--disabled &__separator {
    color: value('time-picker-color-disabled');
  }

  &__exchange {
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: value('time-picker-exchange-color');

    &--enabled:hover {
      color: value('time-picker-exchange-color-hover');
    }
  }

  &--disabled &__exchange {
    color: value('time-picker-color-disabled');
  }

  &__clear {
    @include clean-button;
  }

  &__popper {
    padding: 8px 0;
  }

  &__panel {
    display: flex;
    justify-content: center;
    min-width: 152px;
    background-color: value('time-picker-pane-bg-color');
    border-radius: value('time-picker-pane-radius');
    box-shadow: value('time-picker-pane-shadow');

    &--vertical {
      flex-direction: column;
    }
  }

  &__list {
    display: flex;
    flex-direction: column;
  }

  &__shortcuts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 0;
    background-color: value('time-picker-shortcut-bg-color');
    border-inline-end: value('time-picker-divider');

    &--top,
    &--bottom {
      flex-flow: row wrap;
      justify-content: center;
      padding: 0 6px;
    }

    &--bottom,
    &--right {
      order: 1;
    }
  }

  &__shortcut {
    width: 100%;
    padding: 6px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: value('transition-background');

    &:hover {
      background-color: value('time-picker-shortcut-bg-color-hover');
    }
  }

  &__shortcuts--top &__shortcut,
  &__shortcuts--bottom &__shortcut {
    width: auto;
  }

  &__wheels {
    display: flex;
    gap: 6px;
    padding: value('time-picker-wheel-v-padding') value('time-picker-wheel-h-padding');
  }

  &__wheel {
    display: flex;

    .#{$wheel}__item:hover {
      color: value('wheel-item-color-active-hover');
    }
  }

  &--no-hour {
    .#{$wheel}:first-of-type {
      display: none;
    }
  }

  &--no-minute {
    .#{$wheel}:nth-of-type(2) {
      display: none;
    }
  }

  &--no-second {
    .#{$wheel}:last-of-type {
      display: none;
    }
  }

  &__option--disabled {
    color: value('time-picker-option-color-disabled');
    transition: value('transition-color');
  }

  &__action {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 6px 8px;
    border-top: value('time-picker-divider');
  }
}