/**
 * @name eventHandlers
 * @description Object with the event handlers for the SDK events
 * @type {Object}
 */
const eventHandlers = {
  VD_mounted: onSDKMounted,
};

const configObject = {
  sdkVideo: {
    flowType: { 
      documents: "ES_IDCard_2015",
    },
  },
};

// SDK instance and available sdk events
let VDVideo, SdkEvents;

// config setup control , set this true if you want to use the config.json instead configObject
let isConfigByFile = true;

window.onload = initializeElementsValue;

// Initialize elements value
function initializeElementsValue() {
  SdkEvents = window.vdVideo.VDVideo.events;
  addListeners();
}

/**
 * @name handleEvent
 * @description Object with the event handlers for the SDK events. You can check the available events in the documentation here: https://docs.veridas.com/document-sdk/html/v4.2/api/#dispatched-events.
 * @param {Object} e Event object
 * @returns {void}
 */
function handleEvent(e) {
  const handler = eventHandlers[e.type];
  if (handler) {
    handler(e);
  }
}

/**
 * @name addListeners
 * @description Adds the event listeners for the SDK events in the `SdkEvents` array
 */
function addListeners() {
  SdkEvents.forEach((sdkEvent) => {
    addEventListener(sdkEvent, (e) => {
      handleEvent(e);
    });
  });
}

async function onSDKMounted() {
  VDVideo = document.querySelector("vd-video");

  if (isConfigByFile) {
    await VDVideo.initializeSdk("./config.json");
  } else if (configObject) {
    await VDVideo.initializeSdk(configObject);
  } else {
    await VDVideo.initializeSdk();
  }
}

const startDemo = () => {
  const elementApp = document.getElementsByClassName('element-app')[0];
  const buttonElement = document.getElementsByTagName('button')[0];
  buttonElement.remove();

  elementApp.innerHTML = `   
      <my-element id="myelement">
          <div class="container">
              <vd-video></vd-video>
          </div>
      </my-element>   
  `;
};
