<template>
  <main class="h-screen-main relative">
    <div class="h-full relative bg-neutral-50">
      <ConformanceSidebar></ConformanceSidebar>
      <ConformanceResults></ConformanceResults>
    </div>
    <StatusBar></StatusBar>
  </main>
</template>
<script>
import { storeToRefs } from 'pinia';
import axios from 'axios';
import LoadingStore from '@/stores/loading.js';
import ConformanceStore from '@/stores/conformance.js';
import StatusBar from '@/components/Discover/StatusBar.vue';
import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';

export default {
  setup() {
    const loadingStore = LoadingStore();
    const conformanceStore = ConformanceStore();
    const { isLoading } = storeToRefs(loadingStore);
    const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
      conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence,
      selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData,
      conformanceTempReportData, conformanceFileName,
    } = storeToRefs(conformanceStore);

    return { isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
      conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType,
      selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo,
      conformanceRuleData, conformanceTempReportData, conformanceFileName
    };
  },
  components: {
    StatusBar,
    ConformanceResults,
    ConformanceSidebar,
  },
  async created() {
    this.isLoading = true;

    const params = this.$route.params;
    const file = this.$route.meta.file;
    const isCheckPage = this.$route.name.includes('Check');

    if(!isCheckPage) {
      switch (params.type) {
        case 'log': // FILES page 來的 log
          this.conformanceLogId = params.fileId;
          break;
        case 'filter': // FILES page 來的 filter
          this.conformanceFilterId = params.fileId;
          break;
      }
    } else {
      switch (params.type) {
        case 'log': // FILES page 來的已存檔 rule(log-check)
          this.conformanceLogId = file.parent.id;
          this.conformanceFileName = file.name;
          break;
        case 'filter': // FILES page 來的已存檔 rule(filter-check)
          this.conformanceFilterId = file.parent.id;
          this.conformanceFileName = file.name;
          break;
      }
      await this.conformanceStore.getConformanceReport();
    }
    await this.conformanceStore.getConformanceParams();
    // 給 rule 檔取得 ShowBar 一些時間
    setTimeout(() => this.isLoading = false, 500);
  },
  mounted() {
    this.selectedRuleType = 'Have activity';
    this.selectedActivitySequence = 'Start & End';
    this.selectedMode = 'Directly follows';
    this.selectedProcessScope = 'End to end';
    this.selectedActSeqMore = 'All';
    this.selectedActSeqFromTo = 'From';
  },
  beforeUnmount() {
    // 離開 conformance 時將 id 為 null，避免污染其他檔案
    this.conformanceLogId = null;
    this.conformanceFilterId = null;
    this.conformanceLogCreateCheckId = null;
    this.conformanceFilterCreateCheckId = null;
    this.conformanceRuleData = null;
    this.conformanceFileName = null;
  },
  async beforeRouteEnter(to, from, next) {
    const isCheckPage = to.name.includes('Check');
    if (isCheckPage) {
      const conformanceStore = ConformanceStore();
      // Save token in Headers.
      // (?:^|.;\s)：匹配 "luciaToken" 之前的內容，允許它在字符串開頭或某個分號之後。
      // luciaToken\s=\s**：匹配 "luciaToken="，並忽略兩邊的空格。
      // ([^;]*)：捕獲 "luciaToken" 的值，直到遇到下一個分號或字符串結尾。
      // .*$：匹配剩餘的字符，確保完整的提取。
      // |^.*$：在找不到 "luciaToken" 的情況下，匹配整個字符串。
      // 實際應用
      const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*=\s*([^;]*).*$)|^.*$/, "$1");

      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
      switch (to.params.type) {
        case 'log':
          conformanceStore.setConformanceLogCreateCheckId(to.params.fileId);
          break;
        case 'filter':
          conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
          break;
      }
      await conformanceStore.getConformanceReport();
      to.meta.file = await conformanceStore.conformanceTempReportData?.file; // 將 file data 存到 route 給 Navbar, StatusBar 使用
    }
    next();
  }
}
</script>
