pissbot-9000/labscore/cardstack/DynamicCardStack.js

const { createEmbed, page } = require("#utils/embed");
const { iconAsEmojiObject, icon, link} = require("#utils/markdown");
const { editOrReply } = require("#utils/message");
const { STATIC_ASSETS } = require("#utils/statics");

const { Context } = require("detritus-client/lib/command");
const { MessageComponentTypes, InteractionCallbackTypes } = require("detritus-client/lib/constants");
const { Message } = require("detritus-client/lib/structures");
const { ComponentContext, Components, ComponentActionRow} = require("detritus-client/lib/utils");
const {DISCORD_INVITES} = require("#constants");

/**
 * Stores all active card stacks
 * @type {WeakMap<WeakKey, DynamicCardStack>}
 */
const activeStacks = new WeakMap();

const DEFAULT_BUTTON_ICON_MAPPINGS = Object.freeze({
  "next": "button_chevron_right",
  "previous": "button_chevron_left"
});

const STACK_CACHE_KEYS = Object.freeze({
  RESULT_CARDS: 0
})

/**
 * DynamicCardStack represents an interactive stacks
 * of cards (embeds) for the user to paginate through
 * or interact with.
 */
class DynamicCardStack {
  /**
   * Creates a new DynamicCardStack
   * @param {Context} context Context
   * @param {Object} options DynamicCardStack Arguments
   * @param {Array<string>} options.buttons CardStack built-in navigation buttons
   * @param {Array} options.cards Baseline CardStack 
   * @param {Object} options.interactive Interactive Components
   * @param {Number} options.startingIndex Starting card index
   * @param {boolean} options.loop Wrap paging
   * @param {number} options.expires CardStack timeout
   * @param {boolean} options.disableStackCache Allows disabling the stack result cache, meaning that every trigger will reevaluate a stack
   */
  constructor(context, options){
    this.context = context;

    this.cards = options.cards || [];
    this.buttons = options.buttons || ["previous","next"]
    this.interactive_components = options.interactive || {};
    this.index = options.startingIndex || 0;
    this.rootIndex = this.index;
    this.loopPages = options.loop || true;
    this.expires = options.expires || 5*60*1000;

    this.uniqueId = (Date.now()*Math.random()).toString(36);

    this.stackCache = {};
    this.pageState = [];
    this.currentSelectedSubcategory = null;

    /*
    this.lastInteraction = Date.now();
    this.spawned = 0;
    */

    this._spawn();
  }

  /**
   * Kills the dynamic card stack.
   */
  async kill(clearComponents){
    console.log("killing " + this.uniqueId)
    clearTimeout(this.timeout);

    this.listener.clear();
    if(clearComponents) await this._edit(this.getCurrentCard(), [])

    // Remove reference to free the cardstack for GC
    activeStacks.delete(this.context.message || this.context.interaction);
  }

  /**
   * Get a Stack from an attached reference (message/interaction).
   * @param {Message} ref Attached message/interaction
   * @returns {DynamicCardStack}
   */
  _getStackByReference(ref){
    return activeStacks.get(ref);
  }

  /**
   * Attaches a cardstack to its internal reference.
   * @private
   */
  _createDynamicCardStack(){
    // Kill any previously active cardstacks on this reference
    // (prevents oddities when editing a regular command)
    if(activeStacks.get(this.context.message || this.context.interaction)){
      this._getStackByReference(this.context.message || this.context.interaction).kill();
    }

    activeStacks.set(this.context.message || this.context.interaction, this);
  }

  /**
   * Cretaes a timeout for the paginator.
   * TODO: make this work properly
   * @returns {number} Timeout
   * @private
   */
  _createTimeout(){
    return setTimeout(()=>{
      /*
      // This currently isn't doable with our Components listener.
      if(this.spawned - this.lastInteraction <= this.expires){
        clearTimeout(this.timeout)
        this.spawned = Date.now();
        // New expiry time is 30 seconds
        this.expires = 30*1000;
        this.timeout = this._createTimeout();
      } else {
        this.kill(true);
      }*/
      this.kill(true);
    }, this.expires)
  }

  /**
   * Creates a new cardstack in the given channel
   */
  _spawn(){
    try{
      this._createDynamicCardStack(this.context.client);
      
      this.activeCardStack = [...this.cards];

      // Resolve page state for all
      // root pages.
      let i = 0;
      for(const ac of this.cards){
        if(ac["_meta"]){
          this.pageState[i] = Object.assign({}, ac["_meta"]);
        }
        i++;
      }

      // Create internal component listener
      this.listener = new Components({
        timeout: this.expires,
        run: this._handleInteraction.bind(this),
        onError: (e)=>{
          console.log(e)
        }
      })

      this.timeout = this._createTimeout()

      //this.spawned = Date.now()

      return this._edit({
        ...this.getCurrentCard(),
        components: this.listener
      });
    }catch(e){
      console.log(e)
    }
  }

  /**
   * Gets a card from the currently active
   * stack by its index
   * @param index Page Index
   * @returns {*}
   */
  getCardByIndex(index){
    // TODO: remove this some time after launch
    let card = Object.assign({}, this.activeCardStack[index])
    if(!card.content) card.content = "";
    card.content += `\n-# ${icon("flask_mini")} You are using the new page system • Leave feedback or report bugs in our ${link(DISCORD_INVITES.feedback_cardstack, "Discord Server", "labsCore Support", false)}!`
    return card;
  }

  /**
   * Advances the index and returns the next card from the stack.
   * @returns {Message} Card
   */
  nextCard(){
    this.index = this.index + 1;
    if(this.index >= this.activeCardStack.length){
      if(this.loopPages) this.index = 0;
    }

    if(this.currentSelectedSubcategory == null) this.rootIndex = this.index;
    return Object.assign(this.getCardByIndex(this.index), { components: this._renderComponents() });
  }

  /**
   * Decreases the index and returns the next card from the stack.
   * @returns {Message} Card
   */
  previousPage(){
    this.index = this.index - 1;
    if(this.index < 0){
      if(this.loopPages) this.index = this.activeCardStack.length - 1;
      else this.index = 0;
    }

    if(this.currentSelectedSubcategory == null) this.rootIndex = this.index;
    return Object.assign(this.getCardByIndex(this.index), { components: this._renderComponents() });
  }

  /**
   * Edits the cardstack message.
   * Automatically applies and rerenders components.
   * @param {Message} cardContent Card Content
   * @param {boolean, Array} components Custom Components Array
   */
  async _edit(cardContent, components = false){
    let message = Object.assign({}, cardContent);

    if(!components){
      this.listener.components = this._renderComponents();
      message.components = this.listener;
    } else {
      message.components = components;
    }

    if(message["_meta"]) delete message["_meta"];

    try{
      return editOrReply(this.context, {
        ...message,
        reference: true,
        allowedMentions: {parse: [], repliedUser: false}
      })
    }catch(e){
      console.log(e)
    }
  }

  /**
   * Returns the currently selected card from the
   * active stack.
   * @returns {Message} Card
   */
  getCurrentCard(){
    return this.getCardByIndex(this.index)
  }

  /**
   * Retrieves state from the currently active root card
   * @param {String} key 
   */
  getState(key){
    if(!this.pageState[this.rootIndex]) return null;
    if(!this.pageState[this.rootIndex][key]) return null;
    return this.pageState[this.rootIndex][key];
  }

  /**
   * Returns all page state.
   * Only really intended for debugging purposes.
   * @returns {Object}
   */
  getAllState(){
    return this.pageState;
  }

  /**
   * Renders components and button states
   */
  _renderComponents(disabled = false){
    let nComponents = new ComponentActionRow({})
    let nComponentsSecondary = [new ComponentActionRow({})]

    // First Row always starts with built-in components
    for(const b of this.buttons){
      let btn = {
        type: MessageComponentTypes.BUTTON,
        customId: b,
        style: 2,
        disabled: this.activeCardStack.length === 1 || disabled,
        emoji: iconAsEmojiObject(DEFAULT_BUTTON_ICON_MAPPINGS[b])
      }

      nComponents.addButton(btn)
    }

    for(const b of Object.keys(this.interactive_components)){
      let button = this.interactive_components[b];

      // Validate if the component should be visible on this page.
      // If a function is provided we need to execute it.
      if(typeof(button.visible) === "boolean" && button.visible === false) continue;
      else if(typeof(button.visible) === "function" && !button.visible(this)) continue;
      
      let component = {
        type: MessageComponentTypes.BUTTON,
        customId: b,
        style: button.style || 2,
        disabled: disabled
      }

      // Dynamic disabling
      if(!disabled && button.condition && typeof(button.condition) == "function")
        component.disabled = !button.condition(this);

      // Dynamic label
      if(button.label){
        if(typeof(button.label) === "function") component.label = button.label(this);
        else component.label = button.label;
      }

      if(button.icon) component.emoji = iconAsEmojiObject(button.icon) || undefined

      // Change color if this is the active button.
      // TODO: allow overwriting the "active" color
      if(this.currentSelectedSubcategory === b) component.style = 1;

      // Insert the component at the correct slot.
      if(button.inline){
        // Ensure there is enough space for an inline component.
        if(nComponents.components.length >= 5){
          // Ensure there is space on secondary rows.
          if(nComponentsSecondary[nComponentsSecondary.length - 1].components.length >= 5)
            nComponentsSecondary.push(new ComponentActionRow({}))

          nComponentsSecondary[nComponentsSecondary.length - 1].addButton(component);
        } else {
          nComponents.addButton(component);
        }
      } else {
        // Ensure there is space on secondary rows to insert
        // the component.
        if(nComponentsSecondary[nComponentsSecondary.length - 1].components.length >= 5)
          nComponentsSecondary.push(new ComponentActionRow({}))

        nComponentsSecondary[nComponentsSecondary.length - 1].addButton(component);
      }
    }

    if(nComponentsSecondary[0].components.length >= 1) return [nComponents, ...nComponentsSecondary]
    return [nComponents];
  }

  /**
   * Compute Cache
   *
   * The compute cache allows storing computed values
   * (i.e. resulting card stacks) in order to skip
   * refetching or reprocessing substacks when not
   * necessary. The cache can be disabled per-component.
   */

  /**
   * Set an internal cached computed value.
   * @param index Root Card Index
   * @param componentId Component ID
   * @param key Cache Key
   * @param value Cache Data
   * @private
   */
  _setCachedValue(index, componentId, key, value){
    if(!this.stackCache[index]) this.stackCache[index] = {};
    if(!this.stackCache[index][componentId]) this.stackCache[index][componentId] = {};
    this.stackCache[index][componentId][key] = value;
  }

  /**
   * Retrieve an internal cached computed value.
   * @param index Root Card Index
   * @param componentId Component ID
   * @param key Cache Key
   * @returns {*|null} Cached Data
   * @private
   */
  _getCachedValue(index, componentId, key){
    if(this.interactive_components[componentId].disableCache) return null;

    if(!this.stackCache[index]) return null;
    if(!this.stackCache[index][componentId]) return null;
    if(!this.stackCache[index][componentId][key]) return null;
    return this.stackCache[index][componentId][key];
  }

  /**
   * Handles an interaction from the attached components.
   * @param {ComponentContext} ctx 
   */
  async _handleInteraction(ctx){
    if(ctx.user.id !== this.context.user.id) return ctx.respond({
      type: InteractionCallbackTypes.DEFERRED_UPDATE_MESSAGE
    })

    //this.lastInteraction = Date.now();

    // Built-in Buttons
    // TODO: derive this from a constant
    if(["next","previous"].includes(ctx.data.customId)){
      switch(ctx.data.customId){
        case "next":
          return ctx.respond({
            type: InteractionCallbackTypes.UPDATE_MESSAGE,
            data: this.nextCard()
          })
        case "previous":
          return ctx.respond({
            type: InteractionCallbackTypes.UPDATE_MESSAGE,
            data: this.previousPage()
          })
        default:
          console.error("unknown button??")
      }
      return;
    }

    // Interactive Components
    if(this.interactive_components[ctx.data.customId]){
      // If the selected button is already active, disable it
      // and restore the root stack at its previous index.
      if(this.currentSelectedSubcategory === ctx.data.customId){
        this.activeCardStack = [...this.cards];
        this.index = this.rootIndex;
        this.currentSelectedSubcategory = null;

        return await ctx.respond({
          type: InteractionCallbackTypes.UPDATE_MESSAGE,
          data: Object.assign(this.getCurrentCard(), { components: this._renderComponents(false)})
        })
      }
      else this.currentSelectedSubcategory = ctx.data.customId;

      // Reset page index so the new stack starts on page 0
      this.index = 0;

      try{
        // If we have a cached result, retrieve it
        if(this._getCachedValue(this.rootIndex, ctx.data.customId, STACK_CACHE_KEYS.RESULT_CARDS) !== null){
          this.activeCardStack = [...this._getCachedValue(this.rootIndex, ctx.data.customId, STACK_CACHE_KEYS.RESULT_CARDS)];
          await ctx.respond({
            type: InteractionCallbackTypes.UPDATE_MESSAGE,
            data: Object.assign(this.getCurrentCard(), {components:this._renderComponents(false)})
          })
          return;
        } else {
          // Controls if we should display a loading (skeleton) embed while the
          // new stack is being fetched/rendered. Instant results should only
          // ever be used if we rely on local data or can guarantee almost-instant
          // processing/fetching times.
          if(!this.interactive_components[ctx.data.customId].instantResult) {
            let processingEmbed = page(createEmbed("default", ctx, {
              image: {
                url: STATIC_ASSETS.card_skeleton
              }
            }))

            // Render a custom loading skeleton embed
            // TODO: maybe allow several loading modes here
            //    i.e COPY_PARENT which will copy select fields
            //    from the parent embed or SKELETON_WITH_TITLE.
            //      -> needs iterating on visual language first
            if(this.interactive_components[ctx.data.customId].renderLoadingState)
              processingEmbed = page(this.interactive_components[ctx.data.customId].renderLoadingState(this));

            await ctx.respond({
              type: InteractionCallbackTypes.UPDATE_MESSAGE,
              data: Object.assign(processingEmbed, { components: this._renderComponents(true)})
            })
          }

          // Compute the active cardstack.
          this.activeCardStack = await this.interactive_components[ctx.data.customId].resolvePage(this);

          // TODO: this needs several modes/callback types.
          //    SUBSTACK - Creates a "submenu" with a brand new cardstack
          //    REPLACE_PARENT - Replaces the parent card in the root stack
          //    REPLACE_ROOT_STACK - Replaces the root stack

          // Cache the computed cardstack for future accessing.
          // The cache can be disabled/bypassed if we either
          // a) have really big/complex results
          // b) want to ensure data is always fresh
          if(!this.interactive_components[ctx.data.customId].disableCache){
            this._setCachedValue(this.rootIndex, ctx.data.customId, STACK_CACHE_KEYS.RESULT_CARDS, [...this.activeCardStack]);
          }
        }
      } catch(e){
        this.activeCardStack = [
          page(createEmbed("error", ctx, "Stack rendering failed."))
        ]
        console.log("resolve failed:")
        console.log(e)
        // TODO: better errors maybe?
      }

      // Update the card stack with a card from the new stack.
      if(this.interactive_components[ctx.data.customId].instantResult){
        await ctx.respond({
          type: InteractionCallbackTypes.UPDATE_MESSAGE,
          data: Object.assign(this.getCurrentCard(), { components: this._renderComponents()})
        })
      } else {
        setTimeout(()=>{
          return this._edit(Object.assign(this.getCurrentCard(), {components:this._renderComponents()}))
        }, 1500)
      }

      return;
    }

    console.error("Unknown button was triggered on stack: " + ctx.data.customId);
  }
}

module.exports.DynamicCardStack = DynamicCardStack;