@use 'sass:map';

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

$date-picker: () !default;
$date-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: 1px,
    separator-color: value('content-color-disabled'),
    exchange-color: value('content-color-third'),
    panel-bg-color: value('bg-color-base'),
    panel-border-radius: value('radius-base'),
    panel-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'),
    arrow-color: value('content-color-third'),
    arrow-color-hover: value('color-primary-base'),
    header-color-hover: value('color-primary-base'),
    header-height: 36px,
    item-color-hover: value('calendar-index-color-hover'),
    item-color-selected: value('calendar-index-color-selected'),
    item-color-today: value('calendar-index-color-today'),
    item-color-outside: value('calendar-index-color-outside'),
    item-color-disabled: value('calendar-index-color-disabled'),
    item-bg-color: value('calendar-index-bg-color'),
    item-bg-color-hover: value('calendar-index-bg-color-hover'),
    item-bg-color-selected: value('calendar-index-bg-color-selected'),
    item-bg-color-disabled: value('calendar-index-bg-color-disabled'),
    item-bg-color-today: value('calendar-index-bg-color-today'),
    item-bg-color-outside: value('calendar-index-bg-color-outside'),
    item-radius: value('calendar-index-radius'),
    range-bg-color: value('calendar-range-bg-color'),
    range-opacity: value('calendar-range-opacity')
  ),
  $date-picker
);

.#{$namespace}-date-picker {
  &-vars {
    @include define-preset-values('date-picker', $date-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('date-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('date-picker-unit-h-padding');
    color: value('date-picker-unit-color');
    text-align: center;
    transition: value('transition-background'), value('transition-color');

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

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

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

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

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

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

  &__separator {
    line-height: 1;
    color: value('date-picker-separator-color');
    transition: value('transition-color');
  }

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

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

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

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

  &__pad {
    width: 2px;
  }

  &__clear {
    @include clean-button;
  }

  &__popper {
    padding: 8px 0;
  }

  &__panel {
    position: relative;
    display: flex;
    background-color: value('date-picker-panel-bg-color');
    border-radius: value('date-picker-panel-border-radius');
    box-shadow: value('date-picker-panel-shadow');

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

    &-body {
      display: flex;
    }
  }

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

  &__shortcuts {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 0;
    overflow: auto;
    vertical-align: top;
    background-color: value('date-picker-shortcut-bg-color');
    border-inline-end: value('border-shape') value('date-picker-d-color');
    scrollbar-width: none;

    @include clear-both;

    &::-webkit-scrollbar {
      display: none;
    }

    &--top {
      bottom: auto;
    }

    &--right {
      left: auto;
    }

    &--bottom {
      top: auto;
    }

    &--left {
      right: auto;
    }

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

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

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

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

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

  &__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: value('date-picker-header-height');
    padding: 0 16px;
    border-bottom: value('border-shape') value('date-picker-d-color');

    &--time {
      padding: 0;
    }
  }

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

  &__year-month {
    display: flex;
    flex: auto;
    justify-content: center;
    min-width: 0;
  }

  &__arrow {
    display: flex;
    justify-content: center;
    width: 14px;
    color: value('date-picker-arrow-color');
    cursor: pointer;
    transition: value('transition-color');

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

  &__prev-year {
    margin-inline-end: 4px;
  }

  &__next-year {
    margin-inline-start: 4px;
  }

  &__prev-month {
    inset-inline-start: 30px;
  }

  &__next-month {
    inset-inline-end: 30px;
  }

  &__calendar {
    padding: 8px 12px;

    .#{$namespace}-calendar {
      &__row--week {
        margin-bottom: 6px;
      }
    }
  }

  @mixin calendar-panel {
    & {
      // here is header items style
      margin: 0 3px;
      cursor: pointer;
      transition: value('transition-color');

      &:hover {
        color: value('date-picker-header-color-hover');
      }
    }

    &-panel {
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(3, 1fr);
      width: 224px;
      height: 230px;
    }

    &-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 28px;
      background-color: transparent;
      border-radius: value('date-picker-item-radius');

      &::before {
        position: absolute;
        right: 0;
        left: 0;
        display: none;
        height: 24px;
        pointer-events: none;
        content: '';
        background-color: value('date-picker-range-bg-color');
        opacity: value('date-picker-range-opacity');
      }

      // ensure content above the range mask
      &-inner {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: value('date-picker-item-bg-color');
        border-radius: value('date-picker-item-radius');
        transition: value('transition-color'), value('transition-background');
      }
    }

    $label: '#{&}-label';
    $label-i: '#{&}-label-inner';

    &-item {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &--today {
        &,
        &:hover {
          #{$label-i} {
            color: value('date-picker-item-color-today');
            background-color: value('date-picker-item-bg-color-today');
          }
        }
      }

      &--prev,
      &--next {
        &,
        &:hover {
          #{$label-i} {
            color: value('date-picker-item-color-outside');
            background-color: value('date-picker-item-bg-color-outside');
          }
        }
      }

      &:hover #{$label-i} {
        color: value('date-picker-item-color-hover');
        background-color: value('date-picker-item-bg-color-hover');
      }

      &--selected {
        &,
        &:hover {
          #{$label-i} {
            color: value('date-picker-item-color-selected');
            background-color: value('date-picker-item-bg-color-selected');
          }
        }
      }

      &--disabled {
        &,
        &:hover {
          #{$label-i} {
            color: value('date-picker-item-color-disabled');
            cursor: not-allowed;
            background-color: value('date-picker-item-bg-color-disabled');
          }
        }
      }

      &--in-range #{$label} {
        &::before {
          display: block;
        }
      }
    }
  }

  &__year {
    @include calendar-panel;
  }

  &__month {
    @include calendar-panel;
  }

  &__time-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-inline-start: value('border-shape') value('date-picker-d-color');
  }

  &__wheel {
    display: flex;
    gap: 6px;
    height: calc(100% - #{value('date-picker-header-height')});
    padding: 0 10px;

    // .#{$namespace}-wheel__list {
    //   padding: 0 10px;
    // }

    .#{$namespace}-time-picker__wheel {
      display: flex;
      align-items: center;
      height: 100%;
    }
  }

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

  &--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;
    }
  }
}