/* =========================================================== *
 *                      Type Writer Effect                     *
/* =========================================================== */

@use 'base';

/* ==================
 * Graphical Container
 */
@mixin typing-wrapper($prompt-width, $command-width) {
  .typing-wrapper-#{$prompt-width}-#{$command-width} {
    // wrapper shape + center position
    margin: auto auto;
    width: $prompt-width + $command-width + 1ch; // +1 for cursor width
  
    // flexbox alignments
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: start;
    text-align: start;

    border: 0.5ch solid base.$color-txt;
    padding: 20px;
  }
}

/* ==================
 * TTY Prompt
 */
@mixin typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period) {
  .typing-prompt-#{$prompt-width}-#{$command-width}-#{$typing-duration}-#{$blink-period} {
    width: $prompt-width + $command-width; // ignore cursor (right border)
    border-right: 1ch solid; // cursor

    // hide what the animation hasn't shown yet
    white-space: nowrap;
    overflow: hidden;

    // typing animation then start cursor blink
    animation:
      typing $typing-duration steps($command-width),
      cursor-blink $blink-period steps(1, start) $typing-duration infinite alternate;
  }
}

@mixin typing($prompt-width) {
  @keyframes typing-#{$prompt-width} {
    from {
      width: $prompt-width // ignore effect for prompt
    }
  }
}
    
@keyframes cursor-blink {
  50% {
    border-color: transparent
  }
}

/* =====================
 * TTY Output
 */
@mixin typing-result($typing-duration, $reveal-delay) {
  .typing-result-#{$typing-duration}-#{$reveal-delay} {
    visibility: hidden;
    white-space: pre-wrap; // preserve linebreaks

    // show result once typing ends + delay
    animation:
      unhide-result 1s ($typing-duration + $reveal-delay) forwards; 
  }
}

@keyframes unhide-result {
  to {
    visibility: visible
  }
}

/* =========================
 * Intended Public Interface
 */
@mixin tty($prompt-width, $command-width, $typing-duration: 3s, $blink-period: 0.6s, $reveal-delay: 0.8s) {
  @include typing-wrapper($prompt-width, $command-width);
  @include typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period);
  @include typing-result($typing-duration, $reveal-delay);
}