Dynamic Type Mapping in a Custom Property Editor

import { LightningElement, api, track } from "lwc";

export default class DynamicTypeCpe extends LightningElement {
  _inputVariables = [];
  _builderContext = {};
  _elementInfo = {};
  _typeMappings = [];

  _flowVariables;
  _elementType;
  _elementName;
  /* array of complex object containing name-value of a input parameter.
   * eg: [{
   *       name: 'prop1_name',
   *       value: 'value',
   *       valueDataType: 'string'
   *     }]
   */
  @api
  get inputVariables() {
    return this._inputVariables;
  }

  set inputVariables(variables) {
    this._inputVariables = variables || [];
    this.initializeValues();
  }

  /* map of resource available in the flow
       {
           actionCalls: [],
           apexPluginCalls: [],
           constants: [],
           formulas: [],
           recordCreates: [],
           recordDeletes: [],
           recordLookups: [],
           recordUpdates: [],
           screens: [],
           stages: [],
           textTemplates: [],
           variables: []
      }
    */
  @api
  get builderContext() {
    return this._builderContext;
  }

  set builderContext(context) {
    this._builderContext = context || {};
    if (this._builderContext) {
      const { variables } = this._builderContext;
      this._flowVariables = [...variables];
    }
  }

  /* contains the information about the LWC or Action in which
   * the configurationEditor is defined.
   * eg: {
   *       apiName: 'CreateCase', // dev name of the action or screen
   *       type: 'Action' // or 'Screen'
   *     }
   */
  @api
  get elementInfo() {
    return this._elementInfo;
  }

  set elementInfo(info) {
    this._elementInfo = info || {};
    if (this._elementInfo) {
      this._elementName = this._elementInfo.apiName;
      this._elementType = this._elementInfo.type;
    }
  }
  
  /* array of complex object containing type name-value of the dynamic data types
   * in Action or Screen
   * eg: [{
   *       typeName: 'T', // the type name
   *       typeValue: 'Account' // or any other sObject
   *     }]
   */
  @api
  get typeMappings() {
    return this._typeMappings;
  }

  set typeMappings(mappings) {
    this._typeMappings = mappings || {};
    this.initializeTypeMappings();
  }

  /* Return a promise that resolve and return errors if any
   *    [{
   *      key: 'key1',
   *      errorString: 'Error message'
   *    }]
   */
  @api
  validate() {
    const validity = [];
    return validity;
  }
  
  get options() {
    return [
      { label: "Account", value: "Account" },
      { label: "Case", value: "Case" },
      { label: "Contact", value: "Contact" }
    ];
  }

  get recordVariableOptions() {
    if (this.typeValue) {
      return this.updateRecordVariablesComboboxOptions(this.typeValue);
    }
    return [];
  }

  @track
  inputValue = "";

  @track
  typeValue = "";

  @track
  record;

  initializeTypeMappings() {
    this._typeMappings.forEach((typeMapping) => {
      if (typeMapping.name && typeMapping.value) {
        this.typeValue = typeMapping.value;
      }
    });
  }

  initializeValues() {
    this._inputVariables.forEach((variable) => {
      if (variable.name && variable.value) {
        if (variable.valueDataType === "reference") {
          this.inputValue = "{!" + variable.value + "}";
        } else {
          this.inputValue = variable.value;
        }
      }
    });
  }

  handleComboboxChange(event) {
    if (event && event.detail) {
      const newValue = event.detail.value;
      this.comboboxvalue = newValue;
      // for Screens the name atrribute for event is just the dynamic type e.g "T"
      // for Actions it's the type followed by the param name e.g "T__paramName"
      const name = this._elementType === "Screen" ? "T" : "T__record";
      const dynamicTypeChangeEvent = new CustomEvent(
        "configuration_editor_type_mapping_changed",
        {
          bubbles: true,
          cancelable: false,
          composed: true,
          detail: {
            name,
            value: newValue
          }
        }
      );
      this.dispatchEvent(dynamicTypeChangeEvent);
      this.updateRecordVariablesComboboxOptions(newValue);
    }
  }

  updateRecordVariablesComboboxOptions(objectType) {
    const variables = this._flowVariables.filter(
      (variable) => variable.objectType === objectType
    );
    let comboboxOptions = [];
    variables.forEach((variable) => {
      comboboxOptions.push({
        label: variable.name,
        value: "{!" + variable.name + "}"
      });
    });
    return comboboxOptions;
  }

  handleRecordChange(event) {
    if (event && event.detail) {
      const newValue = event.detail.value;
      this.inputValue = newValue;
      const valueChangedEvent = new CustomEvent(
        "configuration_editor_input_value_changed",
        {
          bubbles: true,
          cancelable: false,
          composed: true,
          detail: {
            name: "record",
            newValue,
            newValueDataType: "reference"
          }
        }
      );
      this.dispatchEvent(valueChangedEvent);
    }
  }
}