"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_displayName = document.getElementById("DisplayName"),
    control_participants = document.getElementById("Participants"),
    control_reject = document.getElementById("Reject"),
    control_templateSidePane = document.getElementById("TemplateSidePane"),
    control_templateParticipantItem = document.getElementById("TemplateParticipantItem"),
    control_draggableModal = document.getElementById("DraggableModal"),
    control_rightSidebarModal = document.getElementById("RightSidebarModal"),
    /*control_videoGrid = document.getElementById("VideoGrid"),*/
    control_videoGridContainer = document.getElementById("videoGrid-container"),
    control_viewDocument = document.getElementById("ViewDocument"),
    control_serverCallIID = document.getElementById("ServerCallID"),
    control_participantType = document.getElementById("ParticipantType"),
    control_participantListGroup = document.getElementById("ParticipantListGroup"),
    control_selfieImage = document.getElementById("SelfieImage"),
    control_identificationImage = document.getElementById("IdentificationImage"),
    x = 1;

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

  async function _initVideoCall() {
    let self = this;
    let customButtons = [];
    if (control_participantType.value == 'Notary') {
      customButtons = [
        function (args) {
          return {
            placement: 'secondary',
            // Icon registered by the composites.
            iconName: 'OpenAttachment',
            strings: {
              label: 'View Document',
              tooltipContent: 'View the document.'
            },
            onItemClick: function () {
              alert('Document Modal goes here.');
            }
          };
        },
        function (args) {
          return {
            placement: 'secondary',
            // Icon registered by the composites.
            iconName: 'ControlButtonParticipantsContextualMenuItem',
            strings: {
              label: 'View Participants',
              tooltipContent: 'View the participants.'
            },
            onItemClick: function () {
              const modal = bootstrap.Modal.getOrCreateInstance(control_rightSidebarModal);
              modal.show();
            }
          };
        },
        function (args, b, c) {
          return {
            placement: 'primary',
            // Icon registered by the composites.
            iconName: 'EditBoxSubmit',
            strings: {
              label: 'Approve',
              tooltipContent: 'Approve the Transaction'
            },
            onItemClick: approveTransaction
          };
        },
        function (args, b, c) {
          return {
            placement: 'primary',
            // Icon registered by the composites.
            iconName: 'EditBoxCancel',
            strings: {
              label: 'Reject',
              tooltipContent: 'Reject the Transaction'
            },
            onItemClick: function () {
              alert('Rejected!');
            }
          };
        }
      ];
    } else {
      customButtons = [
        function (args) {
          return {
            placement: 'primary',
            // Icon registered by the composites.
            iconName: 'OpenAttachment',
            strings: {
              label: 'View Document',
              tooltipContent: 'View the document.'
            },
            onItemClick: function () {
              alert('Document Modal goes here.');
            }
          };
        },
        function (args) {
          return {
            placement: 'secondary',
            // Icon registered by the composites.
            iconName: 'OpenAttachment',
            strings: {
              label: 'View Document',
              tooltipContent: 'View the document.'
            },
            onItemClick: function () {
              alert('Document Modal goes here.');
            }
          };
        },
      ];
    }

    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);
      //  }
      //},
      onGetServerCallIDCallback: 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));
        //debugger;
      },
      stateChangedCallback: function (state) {
        //console.log(state);
      },
      onFetchParticipantMenuItemsCallback: function (participantUserId, userId, defaultMenuItems) {
        const participantList = document.querySelector('[data-ui-id="people-pane-content"]');
        if (participantList) {
          participantList.innerHTML = '';
          console.log(participants);
        }
        defaultMenuItems = [];
      },
      onFetchCustomButtonPropsCallbacks: customButtons,
      onAddParticipantCallback: function (e, f) {
        //debugger;
        console.log(e, f);
      },
      participantsJoinedCallback: function (e, f) {
        //debugger;
        console.log(e, f);
      },
      callEndedCallback: function (a, b, c) {
      },
      token: control_communicationUserToken.value,
      roomID: control_communicationRoomId.value,
      displayName: control_displayName.value,
      userID: control_communicationUserId.value,
      videoContainer: control_videoGridContainer
    };
    await videoCall.init(options);
    await videoCall.joinRoom();
  }

  function approveTransaction(e) {
    jfa.communication.videocall.stopCall(true);
    let url = jfa.utilities.routing.getCurrentURLWithHandler("Approve");
    jfa.utilities.request.post(url, {})
      .then(resp => {
        if (resp.ok === true) {
          debugger;
        }
      })
      .catch(err => console.error(err));
  }

  //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 _createParticipantListItems() {
    control_participantListGroup.innerHTML = '';
    participants.forEach(participant => {
      if (participant.Type === 'Notary') {
        return;
      }
      const initials = participant.DisplayName.split(' ').map(n => n.charAt(0)).join('');
      let tmpl = control_templateParticipantItem.cloneNode(true).content;
      tmpl.querySelector('.participant-item').dataset.participantUid = participant.RoomUserID;
      tmpl.querySelector('.participant-item').dataset.participantUid = participant.UID;
      tmpl.querySelector('.participant-avatar').textContent = initials;
      tmpl.querySelector('.participant-name').textContent = participant.DisplayName;
      control_participantListGroup.appendChild(tmpl);
    });
  }

  function _bindEvents() {
    control_participantListGroup.addEventListener('click', function (event) {
      let target = event.target?.closest('.list-group-item');
      if (target) {

        const participant = participants.find(p => p.UID == target.dataset.participantUid);
        if (!participant) {
          return;
        }


        let selfieUrl = jfa.utilities.routing.getCurrentURLWithHandler("SelfieImage");
        selfieUrl.searchParams.append("meetingRoomUserID", participant.RoomUserID);


        let identificationUrl = jfa.utilities.routing.getCurrentURLWithHandler("IdentificationDocument");
        identificationUrl.searchParams.append("meetingRoomUserID", participant.RoomUserID);
        control_selfieImage.src = selfieUrl;

        const sidebarModal = bootstrap.Modal.getOrCreateInstance(control_rightSidebarModal);
        sidebarModal.hide();
        control_identificationImage.src = identificationUrl;

        const draggableModal = bootstrap.Modal.getOrCreateInstance(control_draggableModal);
        draggableModal.show();
      }
    });

    control_draggableModal.addEventListener('shown.bs.modal', function (e) {
      makeDraggable(control_draggableModal);
    });
  }

  function makeDraggable(modal) {
    let isDragging = false;
    let offsetX, offsetY;

    const header = modal.querySelector('.modal-header');

    header.addEventListener('mousedown', (e) => {
      isDragging = true;
      offsetX = e.clientX - modal.offsetLeft;
      offsetY = e.clientY - modal.offsetTop;
    });

    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      modal.style.left = `${e.clientX - offsetX}px`;
      modal.style.top = `${e.clientY - offsetY}px`;
    });

    document.addEventListener('mouseup', () => {
      isDragging = false;
    });
  }

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

  await _init();
})();