<script setup>
import "@core/utils/external_api";
import { onMounted, onUnmounted, ref } from 'vue';
import videocall from './../views/videocall/videocall.vue';
const token = ref(localStorage.getItem('meeting_id'))
const count = ref(5);
const isDialogVisible = ref(true);
const api = ref();
const microphones = ref([
  {
    title: "Default Microphone",
    id: 1,
    index: 1
  }, {
    title: "Default Microphone 2",
    id: 2,
    index: 2
  }
])

const speakers = ref([
  {
    title: "Default Speaker",
    id: 1,
    index: 1
  }, {
    title: "Default Speaker 2",
    id: 2,
    index: 2
  }
])

onMounted(() => {
  document.addEventListener('mousemove', handleMouseMove)
  const name = "xyz";
  const domain = "8x8.vc";
  const options = {
    roomName: 'vpaas-magic-cookie-769c471e6c614755b51aea9447a554fc/' + localStorage.getItem('meeting_id'),
    // jwt: "{{ $jassToken }}",
    userInfo: {
      displayName: name,
    },
    parentNode: document.querySelector("#jaas-container"),
  };
  // api.value = new JitsiMeetExternalAPI(domain, options);
  // api.value.addEventListener('readyToClose', (event) => {
  // // The call is ready to be closed, perform actions accordingly
  //   console.log('Jitsi call ended:', event);
  // });
  // api.value.addEventListener('videoConferenceLeft', (event) => {
  // // The user has left the video conference, perform actions accordingly
  //   console.log('patient left the Jitsi call:', event);
  //   // router.push('/overview');
  // });
});

onUnmounted(() => {
  document.removeEventListener('mousemove', handleMouseMove)
  // Clean up the API instance when the component is unmounted
  if (api.value) {
    api.value.dispose();
  }
});
const x = ref(0)
const y = ref(0)
const dragging = ref(false)

const rect = ref(null)

const style = computed(() => {
  return {
    transform: `translate(${x.value}px, ${y.value}px)`
  }
})

const handleMouseDown = e => {
  rect.value = e.currentTarget.getBoundingClientRect()
  dragging.value = true
}

const handleMouseMove = e => {
  if (!dragging.value) return
  x.value = Math.min(Math.max(0, e.clientX - rect.value.left), window.innerWidth - rect.value.width) - 25
  y.value = Math.min(Math.max(0, e.clientY - rect.value.top), window.innerHeight - rect.value.height) - 25
}
</script>


<template>
  <!-- <div class="auth-wrapper d-flex align-center justify-center pa-4"> -->
  <!-- <div id="jaas-container" >

        </div> -->
  <!-- Show the iframe when countdown reaches 1 -->
  <!-- <iframe v-if="!isDialogVisible" width="100%" height="500px" frameborder="0" allowfullscreen></iframe> -->
  <!-- </div> -->
  <videocall :token="token" :recording="false" height="calc(100vh - 80px)"></videocall>
</template>

<style lang="scss">
@use "@core/scss/template/pages/page-auth.scss";

#jaas-container {
  height: 550px;
  width: 100%
}

.small-screen {
  background-color: white;
  min-height: 150px;
  max-width: 24%;
}

.livekit-container {
  min-height: 600px;
  height: 100%;
  background-color: black;
  position: relative;
}

.draggable-card {
  cursor: move;
  position: relative;
}

.box {
  position: absolute;
  cursor: move;
  width: 150px;
  height: 150px;
  background: #313131;
  border-radius: 10px;
  margin-left: 10px;
}
</style>
