<script setup>
import axios from '@axios';
import { onBeforeMount, onMounted, ref } from 'vue';
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore()
const router = useRouter()
const route = useRoute()
const recordVid = ref(true)
const agentId = ref(localStorage.getItem('agent_id'))
const token = ref(localStorage.getItem('agent_meeting_id'))
const questions = ref([]);
const call_type = ref(localStorage.getItem('call_type'));
onBeforeMount(async () => {

  console.log('call type', call_type.value)
});
onMounted(() => {
  const mainContainer = document.querySelector('.layout-content-wrapper');
  const callContainer = document.querySelector('.draggable-off');
  if (callContainer) {
    callContainer.style.width = 'calc(100vw - 260px)'
    callContainer.style.left = '260px'
  }
  console.log('mainContainer.offsetWidth', mainContainer.offsetWidth)
  if (mainContainer) {
    mainContainer.style.display = 'none';
  }
  axios.post('/agent/api/patient-recording-switch-get/' + agentId.value)
    .then(response => {
      console.log('rec ', response.data.recording_switch)
      if (response.data.recording_switch == 1)
        recordVid.value = true
      else
        recordVid.value = false
    })
    .catch(error => {
      console.error('error recording ', error.response.data);
    });

  axios.post('/agent/api/questions-list')
    .then(r => {
      console.log("Question", r.data);
      questions.value = r.data;
    }).catch(error => {
      console.log("ErrorResponse", error);
      isLoadingVisible.value = false;
    });
});
onUnmounted(async () => {
  const mainContainer = document.querySelector('.layout-content-wrapper');
  const callContainer = document.querySelector('.draggable');
  console.log('callContainer', callContainer);
  if (mainContainer)
    mainContainer.style.display = 'block';
  if (callContainer) {
    callContainer.style.width = '15%'
    callContainer.style.left = 'unset'
  }

});
const groupedQuestions = computed(() => {
  const groups = {};
  for (const key in questions.value) {
    if (questions.value.hasOwnProperty(key)) {
      let groupQuestions = questions.value[key];
      groupQuestions.forEach(question => {
        const groupId = question.group_id;

        if (!groups[groupId]) {
          groups[groupId] = {
            name: key,
            questions: [],
          };
        }

        groups[groupId].questions.push(question);
      });
    }
  }




  console.log("groups", groups);
  // Convert groups object to an array
  return Object.values(groups);
});
const getTranscript = (transcriptData) => {
  // Parse the JSON string
  const responseObj = JSON.parse(transcriptData);

  // Extract the questions_and_answers array
  const questionsAndAnswers = JSON.parse(responseObj.text);

  if (Array.isArray(questionsAndAnswers) && questionsAndAnswers.length > 0) {

    questions.value.forEach(item => {
      const result = findCommonQuestion(item.question, questionsAndAnswers);

      if (result.hasCommonQuestion) {
        console.log(`Common question found at index ${result.indexInArray2} in array2.`);
        answers.value[item.id] = questionsAndAnswers[result.indexInArray2].answer
      }
    });
    // questions.value.forEach(item => {
    //   if (result.hasCommonQuestion) {
    //     console.log(`Common question found at index ${result.indexInArray2} in array2.`);
    //     answers.value[item.question.id] = questionsAndAnswers[result.indexInArray2].answer
    //   }

    // });

    // transcript.value.push(questionsAndAnswers);
    // console.log('transcript ', transcript.value, hasCommonQuestion(questions.value, questionsAndAnswers))
  }

};
onBeforeRouteLeave(async () => {
  if (store.getters.getCallStarted) {
    // const confirmation = window.confirm('Are you sure you want to leave this page?')
    // if (!confirmation) {
    // Prevent navigation if the user cancels
    // return false
    // } else {
    store.dispatch('updateFloatingWindow', true)
    // }
  }

});
</script>
<template>
  <!-- <videocall :token="token" :recording="recordVid" :call_type="call_type" @update:transcriptData="getTranscript">
  </videocall> -->
  <div class="videoCallContainer">

  </div>
</template>
<style scoped>
.layout-content-wrapper {
  display: none !important;
}
</style>
