@use "sass:math";

@mixin handler-type($name, $color) {
  &.#{$name} {
    color: $color;
    border-bottom-color: $color;

    .handler-trigger,
    .toggle-btn {
      &:hover {
        color: saturate($color, 30%);
      }
    }
  }
}

@mixin is-executing() {
  &.is-executing {
    color: white;
    transition: none;

    i {
      animation: spin 0.75s infinite linear;
    }
  }
}

@mixin is-dragging() {
  &:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }
}

.blank-box-style {
  height: 15px;
  border-bottom: 1px dashed $grey2;
  padding-left: 1ch;
  padding-right: 1ch;
  margin-left: math.div($spacing-medium, 2);
  margin-right: math.div($spacing-medium, 2);
}

.blank-text-style {
  @extend .placeholder;
  text-align: left;
}

$toplevel-shadow: 1px 2px 2px 0 $black1;
$toplevel-shadow-front: 1px 2px 4px 2px $black1;

/* Toplevel */
.toplevel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: max-content;
  min-width: $toplevel-min-width;
  padding: 4px;
  background: $toplevel-background;
  box-shadow: $toplevel-shadow;

  .node.hovering & {
    box-shadow: $toplevel-shadow-front;
  }

  .node.selected & {
    box-shadow: none;
  }

  .mouseovered-selectable {
    background-color: $hover-background;
    transition-delay: 0.4s;

    &.blank {
      color: $white2;
      transition-delay: 0.4s;
    }
  }

  .mouseovered-enterable {
    cursor: text;
  }

  .commandTarget {
    @extend .selected;
  }

  .blank {
    @extend .blank-box-style;
    @extend .blank-text-style;
    min-width: 8ch;

    &.arg-on-new-line {
      padding-left: 0ch;
      margin-left: 0px;
      text-align: start;
      font-size: $code-font-size;

      .blank-entry {
        @extend .blank-text-style;
        width: 100%;
      }
    }
  }

  .blankOr.selected {
    background-color: $selected-background;
    color: $white2;

    &.tstr {
      color: $string-color;
    }

    &.blank {
      color: $grey8;
    }
  }
}

//*************
// Handler
//*************

.toplevel .spec-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;

  color: $default-toplevel-color;
  font-size: 8pt;

  border-bottom: 1px solid $default-toplevel-color;
  padding-bottom: 4px;
  padding-top: 4px;
  padding-left: $spacing-medium;
  padding-right: 16px;
  cursor: move;

  @include handler-type(http-get, $http-get);
  @include handler-type(http-post, $http-post);
  @include handler-type(http-put, $http-put);
  @include handler-type(http-delete, $http-delete);
  @include handler-type(http-patch, $http-patch);
  @include handler-type(http-options, $http-options);
  @include handler-type(cron, $cron-color);
  @include handler-type(worker, $queue-color);
  @include handler-type(repl, $repl-color);

  .blankOr {
    cursor: text;
  }

  .toplevel-type,
  .handler-actions,
  .toplevel-name {
    margin: 0;
    display: inline-block;
  }

  .toplevel-type div {
    display: inline-block;
  }

  .toplevel-type .modifier {
    margin-left: 1ch;

    .entry #autocomplete-holder {
      min-width: 160px;
      width: max-content;

      span.types {
        margin-left: 4ch;
      }
    }
  }

  .handler-trigger {
    display: inline;
    margin-left: 4px;
    position: relative;

    &:hover {
      cursor: pointer;
    }

    @include is-executing();

    &.inactive {
      display: inline;
      margin-left: 4px;
      color: $grey2;

      &:hover {
        cursor: not-allowed;
      }
    }

    &.complete {
      &:before {
        @include font-awesome($fa-check);

        position: absolute;
        left: 0;
        opacity: 1;

        /* duration timing-fn delay fill-mode animation-name */
        animation: 0.5s linear 2s forwards fadeOut;
      }

      &.failed {
        &:before {
          @include font-awesome($fa-times);
          color: $red;

          position: absolute;
          left: 0;
          opacity: 1;

          /* duration timing-fn delay fill-mode animation-name */
          animation: 0.5s linear 2s forwards fadeOut;
        }
      }

      i.fa.fa-redo {
        opacity: 0;

        /* duration timing-fn delay fill-mode animation-name */
        animation: 0.5s linear 2.25s forwards fadeIn;
      }
    }
  }

  // remove dotted outline after clicking (source: reset-normalize)
  a:focus {
    outline: none;
  }

  .handler-lock {
    position: absolute;
    left: -2px;
    top: -$spacing-medium;
    color: $white1;
    font-size: 12px;
    color: $unlock-color;

    &.active {
      color: $lock-color;
    }
  }

  .handler-expand {
    position: absolute;
    top: 0;
    right: 4px;
    font-size: 16px;
    color: $grey2;
  }
}

.function-body,
.handler-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;

  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.2s height ease, 0.1s opacity linear 0s;

  &.expand {
    height: auto;
    opacity: 1;
    overflow: visible;
    transition: 0.2s height ease, 0.1s opacity linear 0.18s;
  }
}

.live-value {
  display: none;
}

/********************
* Entry box
********************/

// TODO: figure out proper entry box positioning
// -- this is a demo hack
.spec-header .entry form {
  cursor: text;
  margin-top: 0px;
  position: relative;
}

.db .entry form {
  position: relative;
  margin-top: 0px;
}

.ast .entry form {
  position: relative;
  margin-top: 0px;
}

.selecting-command .entry {
  margin-top: 4px;
  display: block;
}

.versioned-function {
  display: inline-block;
  vertical-align: baseline;

  .version {
    font-size: 0.6rem;
    margin-right: -2px;
  }
}
