"use strict";
(async function () {
  let
    control_approve = document.getElementById("Approve"),
    control_communicationRoomId = document.getElementById("CommunicationRoomId"),
    control_communicationUserId = document.getElementById("CommunicationUserId"),
    control_communicationUserToken = document.getElementById("CommunicationUserToken"),
    control_participants = document.getElementById("Participants"),
    control_reject = document.getElementById("Reject"),
    control_templateVideo = document.getElementById("templateVideo"),
    control_videoGrid = document.getElementById("VideoGrid"),
    control_videoGridContainer = document.getElementById("videoGrid-container"),
    control_viewDocument = document.getElementById("ViewDocument"),
    control_serverCallIID = document.getElementById("ServerCallID"),
    x = 1;

  let participants = JSON.parse(control_participants.value);

  async function _initVideoCall() {
    let userAccessToken = control_communicationUserToken.value;
    const videoCall = jfa.communication.videocall;
    let options = {
      onCreateLocalVideoStream: function (el) {
        if (el) {
          el.style['transform'] = '';
          let notary = participants.find(p => p.RoomUserID == control_communicationUserId.value);
          document.getElementById(notary.Id).appendChild(el);
        }
      },
      remoteVideoIsAvailableChanged: function (e) {
        let participant = participants.find(p => p.RoomUserID == e.participantId);
        if (participant) {
          e.el.querySelector('video').style['object-fit'] = 'cover';
          document.getElementById(participant.Id).appendChild(e.el);
        }
      },
      onGetServerCallID: function (serverCallId) {
        let url = jfa.utilities.routing.getCurrentURLWithHandler("StartRecording");
        url.searchParams.append("ServerCallID", serverCallId);
        jfa.utilities.request.post(url, {})
          .then(resp => {
            if (resp.ok === true) {
              console.log("started recording");
            }
          })
          .catch(err => console.error(err));
      }
    };
    await videoCall.init(userAccessToken, options);
    videoCall.joinRoom(control_communicationRoomId.value);
  }

  function _updateGrid() {
    control_videoGrid.innerHTML = '';

    participants.forEach((participant, index) => {
      const col = document.createElement('div');
      col.className = 'participant-col';
      const tmpl = control_templateVideo.cloneNode(true).content;
      const vidcontainer = tmpl.querySelector(".video-container")
      if (vidcontainer) {
        vidcontainer.id = participant.Id;
        vidcontainer.classList.add(participant.Id);
        vidcontainer.classList.add(participant.Type == 'Notary' ? 'local-video-container' : 'remote-video-container');
      }
      let participantName = tmpl.querySelector(".participant-name")
      if (participantName) {
        participantName.textContent = participant.DisplayName;
      }
      col.appendChild(tmpl);
      control_videoGrid.appendChild(col);
    });

    // Dynamically adjust grid columns based on participant count
    const count = participants.length;
    const cols = count <= 2 ? 'col-12 col-sm-12 offset-md-1 col-md-10 offset-lg-0 col-lg-6' :
      count <= 4 ? 'col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6' :
        count <= 8 ? 'col-6 col-md-6 col-lg-4 col-xl-4' :
          count <= 9 ? 'col-4' :
            'col-6 col-sm-4 col-lg-3';

    document.querySelectorAll('.participant-col').forEach(el => {
      el.className = `participant-col ${cols}`;
    });

    const fluid = count <= 2 ? 'container-fluid' :
      count <= 8 ? 'container-xxl' :
        'container-xl'
    control_videoGridContainer.className = `${fluid} py-3`;
  }

  function _bindEvents() {
    window.addEventListener('resize', _updateGrid);
    control_viewDocument.addEventListener("click", function () {
      alert('not yet implemented');
    });
    control_approve.addEventListener("click", function () {
      let url = jfa.utilities.routing.getCurrentURLWithHandler("StopRecording");
      jfa.utilities.request.post(url, {})
        .then(resp => {
          if (resp.ok === true) {
            console.log("stopped recording");
          }
        })
        .catch(err => console.error(err));
    });
    control_reject.addEventListener("click", function () {
      alert('not yet implemented');
    });
  }

  async function _init() {
    _bindEvents();
    _updateGrid();
    await _initVideoCall();
  }

  await _init();
})();