@use 'sass:map';

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

$split: () !default;
$split: map.merge(
  (
    handler-bg-color: value('fill-color-humble'),
    handler-z-index: 10,
    handler-size: 6px,
    button-color: value('color-white'),
    button-bg-color: value('border-color-light-2'),
    button-bg-color-hover: value('color-primary-base'),
    button-size: 24px,
    guide-bg-color: value('border-color-light-1'),
    guide-opacity: 50%,
    pointer-bg-color: value('border-color-base')
  ),
  $split
);

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

  @include basis {
    position: relative;
    width: 100%;
    height: 100%;
  }

  @include inherit-color;

  $pane: #{&}__panel;
  $trigger: #{&}__trigger;
  $handler: #{&}__handler;
  $button: #{&}__button;
  $icon: #{&}__icon;
  $guide: #{&}__guide;
  $pointer: #{&}__pointer;

  $handler-size: value('split-handler-size');
  $handler-size-h: calc(value('split-handler-size') * 0.5);
  $button-position: calc(value('split-handler-size') * -1);
  $button-margin: calc(value('split-handler-size') * 0.5 + 2px);
  $button-color: value('split-button-bg-color');
  $button-hover-color: value('split-button-bg-color-hover');

  &__panel {
    position: absolute;
  }

  &__trigger {
    position: absolute;
    z-index: value('split-handler-z-index');
    transform: translate(-50%, -50%);
  }

  &__handler {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: value('split-handler-bg-color');
    border: 0 solid value('split-handler-b-color');
    transition: value('transition-background'), value('transition-transform');
  }

  &__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: value('split-button-color');
    cursor: pointer;
    background-color: $button-color;
    border: 0;
    outline: 0;
    transition: value('transition-background');

    &::before,
    &::after {
      position: absolute;
      content: '';
      border: calc(#{$handler-size} * 0.5) solid transparent;
      transition: value('transition-border');
    }

    &--left-full {
      margin-bottom: $button-margin;

      &::before {
        top: $button-position;
        border-bottom-color: $button-color;
        border-left-color: $button-color;
      }

      &::after {
        bottom: $button-position;
        border-top-color: $button-color;
        border-left-color: $button-color;
      }

      &:hover,
      &:focus {
        &::before {
          border-bottom-color: $button-hover-color;
          border-left-color: $button-hover-color;
        }

        &::after {
          border-top-color: $button-hover-color;
          border-left-color: $button-hover-color;
        }
      }
    }

    &--right-full {
      margin-top: $button-margin;

      &::before {
        top: $button-position;
        border-right-color: $button-color;
        border-bottom-color: $button-color;
      }

      &::after {
        bottom: $button-position;
        border-top-color: $button-color;
        border-right-color: $button-color;
      }

      &:hover,
      &:focus {
        &::before {
          border-right-color: $button-hover-color;
          border-bottom-color: $button-hover-color;
        }

        &::after {
          border-top-color: $button-hover-color;
          border-right-color: $button-hover-color;
        }
      }
    }

    &--top-full {
      margin-inline-end: $button-margin;

      &::before {
        left: $button-position;
        border-top-color: $button-color;
        border-right-color: $button-color;
      }

      &::after {
        right: $button-position;
        border-top-color: $button-color;
        border-left-color: $button-color;
      }

      &:hover,
      &:focus {
        &::before {
          border-top-color: $button-hover-color;
          border-right-color: $button-hover-color;
        }

        &::after {
          border-top-color: $button-hover-color;
          border-left-color: $button-hover-color;
        }
      }
    }

    &--bottom-full {
      margin-inline-start: $button-margin;

      &::before {
        left: $button-position;
        border-right-color: $button-color;
        border-bottom-color: $button-color;
      }

      &::after {
        right: $button-position;
        border-bottom-color: $button-color;
        border-left-color: $button-color;
      }

      &:hover,
      &:focus {
        &::before {
          border-right-color: $button-hover-color;
          border-bottom-color: $button-hover-color;
        }

        &::after {
          border-bottom-color: $button-hover-color;
          border-left-color: $button-hover-color;
        }
      }
    }

    &:hover,
    &:focus {
      background-color: $button-hover-color;
    }
  }

  &__guide {
    position: absolute;
    z-index: calc(value('split-handler-z-index') + 1);
    display: none;
    pointer-events: none;
    background-color: value('split-guide-bg-color');
    opacity: value('split-guide-opacity');
  }

  &__pointer {
    pointer-events: none;
    background-color: value('split-pointer-bg-color');
  }

  &--moving {
    cursor: col-resize;
    user-select: none;

    #{$pane},
    & > #{$trigger},
    #{$handler} {
      pointer-events: none;
    }
  }

  &--vertical#{&}--moving {
    cursor: row-resize;
  }

  &--transition {
    #{$pane},
    & > #{$trigger},
    #{$handler} {
      pointer-events: none;
      transition: {
        property: top, right, bottom, left;
        timing-function: value('transition-timing');
        duration: value('transition-duration');
      }
    }

    #{$pane} {
      overflow: hidden;
    }
  }

  &--left-full {
    #{$pane} {
      &--left {
        padding-right: $handler-size !important;
      }

      &--right {
        padding-left: 0 !important;
        overflow: hidden;
      }
    }

    & > #{$trigger} {
      #{$handler} {
        transform: translateX(-100%);

        @include rtl {
          transform: translateX(0) !important;
        }
      }

      #{$button} {
        &--left-full {
          display: none;
        }

        &--right-full {
          margin-top: 0;
        }
      }
    }
  }

  &--right-full {
    #{$pane} {
      &--left {
        padding-right: 0 !important;
        overflow: hidden;
      }

      &--right {
        padding-left: $handler-size !important;
      }
    }

    & > #{$trigger} {
      #{$button} {
        &--left-full {
          margin-bottom: 0;
        }

        &--right-full {
          display: none;
        }
      }
    }
  }

  &--top-full {
    #{$pane} {
      &--top {
        padding-bottom: $handler-size !important;
      }

      &--bottom {
        padding-top: 0 !important;
        overflow: hidden;
      }
    }

    & > #{$trigger} {
      #{$handler} {
        transform: translateY(-100%);
      }

      #{$button} {
        &--top-full {
          display: none;
        }

        &--bottom-full {
          margin-left: 0;
        }
      }
    }
  }

  &--bottom-full {
    #{$pane} {
      &--top {
        padding-bottom: 0 !important;
      }

      &--bottom {
        padding-top: $handler-size !important;
        overflow: hidden;
      }
    }

    & > #{$trigger} {
      #{$button} {
        &--top-full {
          margin-right: 0;
        }

        &--bottom-full {
          display: none;
        }
      }
    }
  }

  &--top-full,
  &--right-full,
  &--bottom-full,
  &--left-full {
    & > #{$trigger} {
      #{$handler} {
        cursor: default !important;
      }
    }
  }

  &--horizontal {
    #{$pane} {
      top: 0;
      bottom: 0;

      &--left {
        left: 0;
        padding-right: $handler-size-h;
      }

      &--right {
        right: 0;
        padding-left: $handler-size-h;
      }
    }

    & > #{$trigger} {
      top: 50%;
      width: 0;
      height: 100%;

      @include rtl {
        transform: translate(50%, -50%);
      }

      #{$handler} {
        flex-direction: column;
        width: $handler-size;
        height: 100%;
        cursor: col-resize;

        @include rtl {
          transform: translateX(100%);
        }
      }

      #{$button} {
        width: 100%;
        height: value('split-button-size');
      }

      #{$pointer} {
        width: 100%;
        height: 1px;
        margin: 2px 0;
      }
    }

    & > #{$guide} {
      top: 0;
      left: 50%;
      width: $handler-size;
      height: 100%;
      cursor: col-resize;
      transform: translateX(-50%);
    }
  }

  &--vertical {
    #{$pane} {
      right: 0;
      left: 0;

      &--top {
        top: 0;
        padding-bottom: $handler-size-h;
      }

      &--bottom {
        bottom: 0;
        padding-top: $handler-size-h;
      }
    }

    & > #{$trigger} {
      left: 50%;
      width: 100%;
      height: 0;

      #{$handler} {
        flex-direction: row;
        width: 100%;
        height: $handler-size;
        cursor: row-resize;
      }

      #{$button} {
        width: value('split-button-size');
        height: 100%;
      }

      #{$pointer} {
        width: 1px;
        height: 100%;
        margin: 0 2px;
      }
    }

    & > #{$guide} {
      top: 50%;
      left: 0;
      width: 100%;
      height: $handler-size;
      cursor: row-resize;
      transform: translateY(-50%);
    }
  }
}