pissbot-9000/labscore/cardstack/DynamicCardStack.js

const { createEmbed, page } = require("#utils/embed");
const { iconAsEmojiObject } = 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 activeStacks = new WeakMap();

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

const SUBCATEGORY_STATE_TYPES = Object.freeze({
  NONE: 0,
  SINGLE_PAGE: 1,
  MULTI_PAGE: 2,
});

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.subcategoryState = SUBCATEGORY_STATE_TYPES.SINGLE_PAGE;
    this.currentSelectedSubcategory = null;

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

    console.log("now spawning " + this.uniqueId)
    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.currentPage(), [])

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

  /**
   * Get a Stack based on its attached message ID
   * @param {*} id Attached message ID
   * @returns {DynamicCardStack}
   */
  _getStackByMessageId(id){
    return activeStacks.get(id);
  }

  _createDynamicCardStack(){
    // Kill any previously active cardstacks
    if(activeStacks.get(this.context.message)){
      console.log(this.uniqueId + " is replacing " + this._getStackByMessageId(this.context.message?.id).uniqueId);
      this._getStackByMessageId(this.context.message).kill();
    }

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

  _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 before
      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)
    }
  }

  getPageByIndex(index){
    return this.activeCardStack[index];
  }

  nextPage(){
    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;
    console.log("new index: " + this.index)
    return Object.assign(this.getPageByIndex(this.index), { components: this._renderComponents() });
  }
  
  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.getPageByIndex(this.index), { components: this._renderComponents() });
  }

  currentPage() {
    return Object.assign(this.getPageByIndex(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"];

    //console.log("GOING OUT:")
    //console.log(JSON.stringify(message, null, 2))

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

  getCurrentCard(){
    return this.activeCardStack[this.index];
  }

  getPageIndex(){
    return this.index;
  }

  // API for contextual buttons
  
  /**
   * Retrieves state from the currently active page
   * @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];
  }

  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 || (this.subcategoryState !== SUBCATEGORY_STATE_TYPES.SINGLE_PAGE),
        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
      }

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

      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
      // Display the selected button
      if(this.currentSelectedSubcategory === b) component.style = 1;

      if(button.inline) nComponents.addButton(component);
      else {
        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];
  }

  _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;
  }

  _getCachedValue(index, componentId, key){
    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();

    // should be a built-in button
    if(["next","previous"].includes(ctx.data.customId)){
      console.log("triggering button")
      switch(ctx.data.customId){
        case "next":
          return ctx.respond({
            type: InteractionCallbackTypes.UPDATE_MESSAGE,
            data: this.nextPage()
          })
        case "previous":
          return ctx.respond({
            type: InteractionCallbackTypes.UPDATE_MESSAGE,
            data: this.previousPage()
          })
        default:
          console.error("unknown button??")
      }
      return;
    }

    // interactive buttons
    if(this.interactive_components[ctx.data.customId]){
      if(this.currentSelectedSubcategory === ctx.data.customId){
        console.log("restoring state")
        this.activeCardStack = [...this.cards];
        this.index = this.rootIndex;
        this.currentSelectedSubcategory = null;

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

      console.log("new category is " + this.currentSelectedSubcategory)

      this.index = 0;

      try{
        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.currentPage(), {components:this._renderComponents(false)})
          })
          return;
        } else {
          let processingEmbed = page(createEmbed("default", ctx, {
            image: {
              url: STATIC_ASSETS.card_skeleton
            }
          }))

          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)})
          })

          this.activeCardStack = await this.interactive_components[ctx.data.customId].resolvePage(this);

          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)
      }

      setTimeout(()=>{
        return this._edit(Object.assign(this.currentPage(), {components:this._renderComponents()}))
      }, 1500)

      return;
    }

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

module.exports.DynamicCardStack = DynamicCardStack;