<template>
  <div class="px-4 text-sm">
    <!-- Have activity -->
    <ResultCheck
      v-if="selectedRuleType === 'Have activity'"
      :data="state.containstTasksData"
      :select="isSubmitTask"
    ></ResultCheck>
    <!-- Activity sequence  -->
    <ResultDot
      v-if="
        selectedRuleType === 'Activity sequence' &&
        selectedActivitySequence === 'Start & End'
      "
      :timeResultData="selectCfmSeqSE"
      :select="isSubmitStartAndEnd"
    ></ResultDot>
    <ResultArrow
      v-if="
        selectedRuleType === 'Activity sequence' &&
        selectedActivitySequence === 'Sequence' &&
        selectedMode === 'Directly follows'
      "
      :data="state.selectCfmSeqDirectly"
      :select="isSubmitCfmSeqDirectly"
    ></ResultArrow>
    <ResultArrow
      v-if="
        selectedRuleType === 'Activity sequence' &&
        selectedActivitySequence === 'Sequence' &&
        selectedMode === 'Eventually follows'
      "
      :data="state.selectCfmSeqEventually"
      :select="isSubmitCfmSeqEventually"
    ></ResultArrow>
    <!-- Activity duration -->
    <ResultCheck
      v-if="selectedRuleType === 'Activity duration'"
      :title="'Activities include'"
      :data="state.durationData"
      :select="isSubmitDurationData"
    ></ResultCheck>
    <!-- Processing time -->
    <ResultDot
      v-if="
        selectedRuleType === 'Processing time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'Start'
      "
      :timeResultData="state.selectCfmPtEteStart"
      :select="isSubmitCfmPtEteStart"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Processing time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'End'
      "
      :timeResultData="state.selectCfmPtEteEnd"
      :select="isSubmitCfmPtEteEnd"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Processing time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'Start & End'
      "
      :timeResultData="selectCfmPtEteSE"
      :select="isSubmitCfmPtEteSE"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Processing time' &&
        selectedProcessScope === 'Partial' &&
        selectedActSeqFromTo === 'From'
      "
      :timeResultData="state.selectCfmPtPStart"
      :select="isSubmitCfmPtPStart"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Processing time' &&
        selectedProcessScope === 'Partial' &&
        selectedActSeqFromTo === 'To'
      "
      :timeResultData="state.selectCfmPtPEnd"
      :select="isSubmitCfmPtPEnd"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Processing time' &&
        selectedProcessScope === 'Partial' &&
        selectedActSeqFromTo === 'From & To'
      "
      :timeResultData="selectCfmPtPSE"
      :select="isSubmitCfmPtPSE"
    ></ResultDot>
    <!-- Waiting time -->
    <ResultDot
      v-if="
        selectedRuleType === 'Waiting time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'Start'
      "
      :timeResultData="state.selectCfmWtEteStart"
      :select="isSubmitCfmWtEteStart"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Waiting time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'End'
      "
      :timeResultData="state.selectCfmWtEteEnd"
      :select="isSubmitCfmWtEteEnd"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Waiting time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'Start & End'
      "
      :timeResultData="selectCfmWtEteSE"
      :select="isSubmitCfmWtEteSE"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Waiting time' &&
        selectedProcessScope === 'Partial' &&
        selectedActSeqFromTo === 'From'
      "
      :timeResultData="state.selectCfmWtPStart"
      :select="isSubmitCfmWtPStart"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Waiting time' &&
        selectedProcessScope === 'Partial' &&
        selectedActSeqFromTo === 'To'
      "
      :timeResultData="state.selectCfmWtPEnd"
      :select="isSubmitCfmWtPEnd"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Waiting time' &&
        selectedProcessScope === 'Partial' &&
        selectedActSeqFromTo === 'From & To'
      "
      :timeResultData="selectCfmWtPSE"
      :select="isSubmitCfmWtPSE"
    ></ResultDot>
    <!-- Cycle time -->
    <ResultDot
      v-if="
        selectedRuleType === 'Cycle time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'Start'
      "
      :timeResultData="state.selectCfmCtEteStart"
      :select="isSubmitCfmCtEteStart"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Cycle time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'End'
      "
      :timeResultData="state.selectCfmCtEteEnd"
      :select="isSubmitCfmCtEteEnd"
    ></ResultDot>
    <ResultDot
      v-if="
        selectedRuleType === 'Cycle time' &&
        selectedProcessScope === 'End to end' &&
        selectedActSeqMore === 'Start & End'
      "
      :timeResultData="selectCfmCtEteSE"
      :select="isSubmitCfmCtEteSE"
    ></ResultDot>
  </div>
</template>
<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult
 *   Conformance result list with selectable items and
 *   scrollable display of check results.
 */

import { reactive, computed, onBeforeUnmount } from "vue";
import { storeToRefs } from "pinia";
import { useConformanceStore } from "@/stores/conformance";
import emitter from "@/utils/emitter";
import ResultCheck from "@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue";
import ResultArrow from "@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue";
import ResultDot from "@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue";
import { cloneDeep } from "lodash-es";

const conformanceStore = useConformanceStore();
const {
  selectedRuleType,
  selectedActivitySequence,
  selectedMode,
  selectedProcessScope,
  selectedActSeqMore,
  selectedActSeqFromTo,
  isStartSelected,
  isEndSelected,
} = storeToRefs(conformanceStore);

const props = defineProps([
  "isSubmit",
  "isSubmitTask",
  "isSubmitStartAndEnd",
  "isSubmitCfmSeqDirectly",
  "isSubmitCfmSeqEventually",
  "isSubmitDurationData",
  "isSubmitCfmPtEteStart",
  "isSubmitCfmPtEteEnd",
  "isSubmitCfmPtEteSE",
  "isSubmitCfmPtPStart",
  "isSubmitCfmPtPEnd",
  "isSubmitCfmPtPSE",
  "isSubmitCfmWtEteStart",
  "isSubmitCfmWtEteEnd",
  "isSubmitCfmWtEteSE",
  "isSubmitCfmWtPStart",
  "isSubmitCfmWtPEnd",
  "isSubmitCfmWtPSE",
  "isSubmitCfmCtEteStart",
  "isSubmitCfmCtEteEnd",
  "isSubmitCfmCtEteSE",
]);

const state = reactive({
  containstTasksData: null,
  startEndData: null,
  selectCfmSeqStart: null,
  selectCfmSeqEnd: null,
  selectCfmSeqDirectly: [],
  selectCfmSeqEventually: [],
  durationData: null,
  selectCfmPtEteStart: null, // Processing time
  selectCfmPtEteEnd: null,
  selectCfmPtEteSEStart: null,
  selectCfmPtEteSEEnd: null,
  selectCfmPtPStart: null,
  selectCfmPtPEnd: null,
  selectCfmPtPSEStart: null,
  selectCfmPtPSEEnd: null,
  selectCfmWtEteStart: null, // Waiting time
  selectCfmWtEteEnd: null,
  selectCfmWtEteSEStart: null,
  selectCfmWtEteSEEnd: null,
  selectCfmWtPStart: null,
  selectCfmWtPEnd: null,
  selectCfmWtPSEStart: null,
  selectCfmWtPSEEnd: null,
  selectCfmCtEteStart: null, // Cycle time
  selectCfmCtEteEnd: null,
  selectCfmCtEteSEStart: null,
  selectCfmCtEteSEEnd: null,
  startAndEndIsReset: false,
});

const selectCfmSeqSE = computed(() => {
  const data = [];
  if (state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
  if (state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
  data.sort((a, b) => {
    const order = { Start: 1, End: 2 };
    return order[a.category] - order[b.category];
  });
  return data;
});

const selectCfmPtEteSE = computed(() => {
  const data = [];
  if (state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
  if (state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
  data.sort((a, b) => {
    const order = { Start: 1, End: 2 };
    return order[a.category] - order[b.category];
  });
  return data;
});

const selectCfmPtPSE = computed(() => {
  const data = [];
  if (state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
  if (state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
  data.sort((a, b) => {
    const order = { From: 1, To: 2 };
    return order[a.category] - order[b.category];
  });
  return data;
});

const selectCfmWtEteSE = computed(() => {
  const data = [];
  if (state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
  if (state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
  data.sort((a, b) => {
    const order = { Start: 1, End: 2 };
    return order[a.category] - order[b.category];
  });
  return data;
});

const selectCfmWtPSE = computed(() => {
  const data = [];
  if (state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
  if (state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
  data.sort((a, b) => {
    const order = { From: 1, To: 2 };
    return order[a.category] - order[b.category];
  });
  return data;
});

const selectCfmCtEteSE = computed(() => {
  const data = [];
  if (state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
  if (state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
  data.sort((a, b) => {
    const order = { Start: 1, End: 2 };
    return order[a.category] - order[b.category];
  });
  return data;
});

/**
 * All reset
 */
function reset() {
  state.containstTasksData = null;
  state.startEndData = null;
  state.selectCfmSeqStart = null;
  state.selectCfmSeqEnd = null;
  state.selectCfmSeqDirectly = [];
  state.selectCfmSeqEventually = [];
  state.durationData = null;
  state.selectCfmPtEteStart = null;
  state.selectCfmPtEteEnd = null;
  state.selectCfmPtEteSEStart = null;
  state.selectCfmPtEteSEEnd = null;
  state.selectCfmPtPStart = null;
  state.selectCfmPtPEnd = null;
  state.selectCfmPtPSEStart = null;
  state.selectCfmPtPSEEnd = null;
  state.selectCfmWtEteStart = null; // Waiting time
  state.selectCfmWtEteEnd = null;
  state.selectCfmWtEteSEStart = null;
  state.selectCfmWtEteSEEnd = null;
  state.selectCfmWtPStart = null;
  state.selectCfmWtPEnd = null;
  state.selectCfmWtPSEStart = null;
  state.selectCfmWtPSEEnd = null;
  state.selectCfmCtEteStart = null; // Cycle time
  state.selectCfmCtEteEnd = null;
  state.selectCfmCtEteSEStart = null;
  state.selectCfmCtEteSEEnd = null;
  state.startAndEndIsReset = true;
}

// created() logic
emitter.on("actListData", (data) => {
  state.containstTasksData = data;
});
emitter.on("actRadioData", (newData) => {
  const data = cloneDeep(newData);

  const categoryMapping = {
    cfmSeqStart: ["Start", "selectCfmSeqStart", "selectCfmSeqEnd"],
    cfmSeqEnd: ["End", "selectCfmSeqEnd", "selectCfmSeqStart"],
    cfmPtEteStart: ["Start", "selectCfmPtEteStart"],
    cfmPtEteEnd: ["End", "selectCfmPtEteEnd"],
    cfmPtEteSEStart: ["Start", "selectCfmPtEteSEStart", "selectCfmPtEteSEEnd"],
    cfmPtEteSEEnd: ["End", "selectCfmPtEteSEEnd", "selectCfmPtEteSEStart"],
    cfmPtPStart: ["From", "selectCfmPtPStart"],
    cfmPtPEnd: ["To", "selectCfmPtPEnd"],
    cfmPtPSEStart: ["From", "selectCfmPtPSEStart", "selectCfmPtPSEEnd"],
    cfmPtPSEEnd: ["To", "selectCfmPtPSEEnd", "selectCfmPtPSEStart"],
    cfmWtEteStart: ["Start", "selectCfmWtEteStart"],
    cfmWtEteEnd: ["End", "selectCfmWtEteEnd"],
    cfmWtEteSEStart: ["Start", "selectCfmWtEteSEStart", "selectCfmWtEteSEEnd"],
    cfmWtEteSEEnd: ["End", "selectCfmWtEteSEEnd", "selectCfmWtEteSEStart"],
    cfmWtPStart: ["From", "selectCfmWtPStart"],
    cfmWtPEnd: ["To", "selectCfmWtPEnd"],
    cfmWtPSEStart: ["From", "selectCfmWtPSEStart", "selectCfmWtPSEEnd"],
    cfmWtPSEEnd: ["To", "selectCfmWtPSEEnd", "selectCfmWtPSEStart"],
    cfmCtEteStart: ["Start", "selectCfmCtEteStart"],
    cfmCtEteEnd: ["End", "selectCfmCtEteEnd"],
    cfmCtEteSEStart: ["Start", "selectCfmCtEteSEStart", "selectCfmCtEteSEEnd"],
    cfmCtEteSEEnd: ["End", "selectCfmCtEteSEEnd", "selectCfmCtEteSEStart"],
  };

  const updateSelection = (key, mainSelector, secondarySelector) => {
    if (state[mainSelector]) {
      if (data.task !== state[mainSelector]) state[secondarySelector] = null;
    }
    data.category = categoryMapping[key][0];
    state[mainSelector] = data;
  };

  if (categoryMapping[data.category]) {
    const [category, mainSelector, secondarySelector] =
      categoryMapping[data.category];
    if (secondarySelector) {
      updateSelection(data.category, mainSelector, secondarySelector);
    } else {
      data.category = category;
      state[mainSelector] = [data];
    }
  } else if (selectedRuleType.value === "Activity duration") {
    state.durationData = [data.task];
  }
});
emitter.on("getListSequence", (data) => {
  switch (data.category) {
    case "cfmSeqDirectly":
      state.selectCfmSeqDirectly = data.task;
      break;
    case "cfmSeqEventually":
      state.selectCfmSeqEventually = data.task;
      break;
    default:
      break;
  }
});
emitter.on("reset", (data) => {
  reset();
});
// Clear data when switching radio buttons
emitter.on("isRadioChange", (data) => {
  if (data) reset();
});
emitter.on("isRadioProcessScopeChange", (data) => {
  if (data) reset();
});
emitter.on("isRadioActSeqMoreChange", (data) => {
  if (data) reset();
});
emitter.on("isRadioActSeqFromToChange", (data) => {
  if (data) reset();
});

onBeforeUnmount(() => {
  emitter.off("actListData");
  emitter.off("actRadioData");
  emitter.off("getListSequence");
  emitter.off("reset");
  emitter.off("isRadioChange");
  emitter.off("isRadioProcessScopeChange");
  emitter.off("isRadioActSeqMoreChange");
  emitter.off("isRadioActSeqFromToChange");
});
</script>
<style scoped>
:deep(.disc) {
  font-variation-settings:
    "FILL" 1,
    "wght" 100,
    "GRAD" 0,
    "opsz" 20;
}
</style>
