@use 'sass:map';

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

$video: () !default;
$video: map.merge(
  (
    bg-color: #111,
    state-color: value('content-color-third'),
    loading-color: value('content-color-third'),
    controls-bg-color: unset,
    controls-bg-image: linear-gradient(to top, rgba(#111, 75%) 0%, transparent 100%),
    progress-height: 3px,
    progress-pad: 5px,
    progress-segment-bg-color: rgba(#fff, 35%),
    progress-filler-bg-color: value('color-primary-base'),
    progress-trigger-radius: value('radius-base'),
    progress-trigger-width: 14px,
    progress-trigger-height: 10px,
    progress-indicator-color: value('color-primary-base'),
    progress-indicator-size: 4px,
    control-color: rgba(#fff, 85%),
    control-color-active: #fff,
    control-color-disabled: rgba(#fff, 50%),
    control-bg-color: rgba(#000, 75%),
    control-radius: value('radius-small'),
    control-shadow: value('shadow-shape') #000,
    control-option-bg-color-hover: rgba(#fff, 15%),
    control-option-bg-color-active: rgba(#fff, 15%),
    timer-radius: value('radius-small')
  ),
  $video
);

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

  @include basis {
    position: relative;
    width: 100%;
    height: 100%;
    outline-color: transparent;
  }

  &__main {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: value('video-bg-color');
  }

  &__player {
    display: flex;
    width: 100%;
    height: 100%;
    transition: value('transition-transform');

    &--flipped {
      transform: scale(-1, 1);
    }
  }

  &__video {
    width: 100%;
    height: 100%;
    outline-color: transparent;
  }

  &__poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__state {
    position: absolute;
    top: 50%;
    left: 50%;
    color: value('video-state-color');
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  &__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    color: value('video-loading-color');
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  &-state-effect-enter-active {
    animation: #{$namespace}-video-state-effect 250ms;
  }

  &-state-effect-leave-active {
    animation: #{$namespace}-video-state-effect reverse 250ms;
  }

  @keyframes #{$namespace}-video-state-effect {
    0% {
      opacity: 0%;
      transform: translate(-50%, -50%) scale(1.6);
    }

    100% {
      opacity: 100%;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  &__controls {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    padding: 16px 0 4px;
    transition: value('transition-transform');

    &::before {
      position: absolute;
      inset: 0;
      pointer-events: none;
      content: '';
      background-color: value('video-controls-bg-color');
      background-image: value('video-controls-bg-image');
      transition: value('transition-opacity');
    }

    &--collapsed {
      transform: translateY(
          calc(#{value('video-progress-pad')} + #{value('video-progress-height')} + 43px)
        )
        translateZ(0);

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

    &-top,
    &-bottom {
      z-index: 1;
      display: flex;
      gap: 0 10px;
      align-items: center;
      width: 100%;
    }

    &-bottom {
      height: 40px;
    }

    &-left,
    &-center,
    &-right {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      height: 100%;
    }

    &-left {
      padding-inline-start: 10px;
    }

    &-center {
      flex: auto;
      justify-content: center;
    }

    &-right {
      padding-inline-end: 10px;
    }
  }

  &__progress {
    position: relative;
    width: 100%;
    padding: 0 10px;
    transition: padding value('transition-base');

    &--disabled {
      pointer-events: none;
    }

    &-segment {
      height: 100%;
      padding: value('video-progress-pad') 0;
    }

    &-track {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: value('video-progress-segment-bg-color');
      border-radius: value('video-progress-height');
    }

    &-filler {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: value('video-progress-filler-bg-color');
      border-radius: value('video-progress-height');
      transition: value('transition-background');
    }

    &-slider {
      @include define-preset-values(
        'slider',
        (
          track-height: calc(#{value('video-progress-height')} + #{value('video-progress-pad')} * 2),
          handler-size: 13px,
          handler-scale-hover: 1,
          handler-scale-focus: 1,
          track-bg-color: transparent,
          track-bg-color-hover: transparent,
          marker-pad: 0
        )
      );
    }

    &-trigger {
      position: relative;
      width: value('video-progress-trigger-width');
      height: value('video-progress-trigger-height');
      background-color: #fff;
      border: 2px solid value('video-progress-filler-bg-color');
      border-radius: value('video-progress-trigger-radius');
    }

    .#{$namespace}-slider {
      padding: 0;
      margin: 0;

      &__container {
        width: 100%;
        padding: 0;
        margin: 0;
      }

      &__track {
        gap: 0 3px;
      }
    }

    &-indicator {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      opacity: 0%;
      transition: value('transition-opacity');

      &--active {
        opacity: 100%;
      }

      $size: value('video-progress-indicator-size');
      $pos: calc(
        100% - #{$size} * 0.5 - #{value('video-progress-pad')} + #{value(
            'video-progress-trigger-height'
          )} * 0.25
      );
      $color: value('video-progress-indicator-color');

      &::before,
      &::after {
        position: absolute;
        left: 50%;
        content: '';
        border: $size solid transparent;
        transform: translateX(-50%);
      }

      &::before {
        bottom: $pos;
        border-top-color: $color;
      }

      &::after {
        top: $pos;
        border-bottom-color: $color;
      }
    }
  }

  &__controls--collapsed &__progress {
    padding: 0;
  }

  &__preview {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(5px + value('video-progress-pad'));
    pointer-events: none;
    opacity: 0%;
    transition: value('transition-opacity');

    &--active {
      opacity: 100%;
    }

    &-image {
      position: relative;
      width: 60px;
      padding-top: 100%;

      @supports (aspect-ratio: 16 / 9) {
        aspect-ratio: 16 / 9;
        padding-top: 0;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    &-time {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px;
      line-height: 1;
      color: value('video-control-color');
      background-color: value('video-control-bg-color');
      border-radius: value('video-control-radius');
      box-shadow: value('video-control-shadow');
    }

    &--has-image &-time {
      position: absolute;
      bottom: 0;
    }
  }

  &__control {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 100%;
    line-height: 1;
    color: value('video-control-color');
    transition: value('transition-color');

    &:hover,
    &:focus-within {
      color: value('video-control-color-active');
    }

    &--disabled {
      &,
      &:hover,
      &:focus-within {
        color: value('video-control-color-disabled');
        cursor: not-allowed;
      }
    }

    &-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0 6px;
      line-height: inherit;
      color: inherit;
      cursor: pointer;
      background-color: transparent;
      border: 0;
      outline: 0;
    }

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

    &-tip,
    &-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: calc(5px + value('video-progress-pad'));
      color: value('video-control-color');
      background-color: value('video-control-bg-color');
      border-radius: value('video-control-radius');
      box-shadow: value('video-control-shadow');
    }

    &-tip {
      padding: 6px;
    }

    &-name,
    &-shortcut {
      display: inline-flex;
      align-items: center;
      line-height: 1;
      white-space: nowrap;
    }

    &-shortcut {
      margin-inline-start: 3px;
    }

    &-options {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 5px 0;
      margin: 0;
      user-select: none;
    }

    &-option {
      justify-content: center;
      color: value('video-control-color');
      text-align: center;
      background-color: transparent;

      &:hover {
        color: value('video-control-color-active');
        background-color: value('video-control-option-bg-color-hover');
      }

      &--selected {
        color: value('video-control-color-active');
        background-color: value('video-control-option-bg-color-active');
      }

      &--disabled {
        &,
        &:hover {
          color: value('video-control-color-disabled');
          background-color: transparent;
        }
      }
    }
  }

  &__timer {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;

    &-input {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 22px;
      overflow: hidden;
      color: inherit;
      background-color: rgba(#fff, 30%);
      border-radius: value('video-timer-radius');

      .#{$namespace}-input__control {
        color: inherit;
        text-align: center;
        user-select: auto;
        background-color: transparent;
        border: 0;
        outline: 0;
      }
    }

    &-separator {
      margin: 0 1px;
    }
  }

  &__playback-rate {
    min-width: 44px;
  }

  &__volume {
    &-panel {
      width: 40px;
      height: 140px;
      padding: 6px 0;
    }

    &-text {
      flex-shrink: 0;
      padding: 2px 0 4px;
    }

    &-slider {
      @include define-preset-values(
        'slider',
        (
          handler-size: 14px,
          handler-scale-hover: 1,
          handler-scale-focus: 1
        )
      );

      width: auto;
    }
  }

  &__progress-line {
    position: absolute;
    inset: auto 0 0;
    pointer-events: none;
  }
}