<template>
  <section class="animate-fadein w-full h-full" >

    <!-- Have activity -->
    <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>

    <!-- Activity sequence  -->
    <div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'"
      class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="cfmSeqStartData"
        :category="'cfmSeqStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" class="w-1/2" />
      <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="cfmSeqEndData"
        :category="'cfmSeqEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
    </div>

    <!-- actSeqDrag -->
    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'
      && selectedMode === 'Directly follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqDirectly"
      :isSubmit="isSubmit" :category="'cfmSeqDirectly'"></ActSeqDrag>
    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'
      && selectedMode === 'Eventually follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqEventually"
      :isSubmit="isSubmit" :category="'cfmSeqEventually'"></ActSeqDrag>

    <!-- Activity duration -->
    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'"
      :select="isSubmitDurationData?.[0]" :data="conformanceTask" :category="'cfmDur'" :isSubmit="isSubmit"/>

      <!-- Processing time -->
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
      && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmPtEteStart?.[0].task"
      :data="cfmPtEteStartData" :category="'cfmPtEteStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
      && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmPtEteEnd?.[0].task" :data="cfmPtEteEndData"
      :category="'cfmPtEteEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
      && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'Start'" :select="isSubmitCfmPtEteSE?.[0].task" :data="cfmPtEteSEStartData"
      :category="'cfmPtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" class="w-1/2" />
      <ActRadio :title="'End'" :select="isSubmitCfmPtEteSE?.[1].task" :data="cfmPtEteSEEndData"
      :category="'cfmPtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
    </div>
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
      && selectedActSeqFromTo === 'From'" :title="'From'" :select="isSubmitCfmPtPStart?.[0].task" :data="cfmPtPStartData"
      :category="'cfmPtPStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
      && selectedActSeqFromTo === 'To'" :title="'To'" :select="isSubmitCfmPtPEnd?.[0].task" :data="cfmPtPEndData"
      :category="'cfmPtPEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
      && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'From'" :select="isSubmitCfmPtPSE?.[0].task" :data="cfmPtPSEStartData"
        class="w-1/2" :category="'cfmPtPSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
      <ActRadio :title="'To'" :select="isSubmitCfmPtPSE?.[1].task" :data="cfmPtPSEEndData" class="w-1/2"
      :category="'cfmPtPSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
    </div>

    <!-- Waiting time -->
    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
      && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmWtEteStart?.[0].task"
      :data="cfmWtEteStartData" :category="'cfmWtEteStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
      && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmWtEteEnd?.[0].task"
      :data="cfmWtEteEndData" :category="'cfmWtEteEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
      && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'Start'" :select="isSubmitCfmWtEteSE?.[0].task" :data="cfmWtEteSEStartData" class="w-1/2"
        :category="'cfmWtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
      <ActRadio :title="'End'" :select="isSubmitCfmWtEteSE?.[1].task" :data="cfmWtEteSEEndData" class="w-1/2"
      :category="'cfmWtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
    </div>
    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
      && selectedActSeqFromTo === 'From'" :title="'From'" :select="isSubmitCfmWtPStart?.[0].task" :data="cfmWtPStartData"
      :category="'cfmWtPStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
      && selectedActSeqFromTo === 'To'" :title="'To'" :select="isSubmitCfmWtPEnd?.[0].task"
      :data="cfmWtPEndData" :category="'cfmWtPEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
      && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'From'" :select="isSubmitCfmWtPSE?.[0].task" :data="cfmWtPSEStartData"
      class="w-1/2" :category="'cfmWtPSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
      <ActRadio :title="'To'" :select="isSubmitCfmWtPSE?.[1].task" :data="cfmWtPSEEndData"
      class="w-1/2" :category="'cfmWtPSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
    </div>

    <!-- Cycle time -->
    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
      && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmCtEteStart?.[0].task"
      :data="cfmCtEteStartData" :category="'cfmCtEteStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
      && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmCtEteEnd?.[0].task" :data="cfmCtEteEndData"
      :category="'cfmCtEteEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"
      class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'Start'" :select="isSubmitCfmCtEteSE?.[0].task" :data="cfmCtEteSEStartData" class="w-1/2"
      :category="'cfmCtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
      <ActRadio :title="'End'" :select="isSubmitCfmCtEteSE?.[1].task" :data="cfmCtEteSEEndData" class="w-1/2"
      :category="'cfmCtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
    </div>
  </section>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useLoadingStore } from '@/stores/loading';
import { useConformanceStore } from '@/stores/conformance';
import emitter from '@/utils/emitter';
import ActList from './ActList.vue';
import ActRadio from './ActRadio.vue';
import ActSeqDrag from './ActSeqDrag.vue';

const loadingStore = useLoadingStore();
const conformanceStore = useConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore,
  selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE,
  cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd,
  cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, 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',
  'isSubmitShowDataSeq', 'isSubmitShowDataPtEte', 'isSubmitShowDataPtP', 'isSubmitShowDataWtEte',
  'isSubmitShowDataWtP', 'isSubmitShowDataCt'
]);

const task = ref(null);
const taskStart = ref(null);
const taskEnd = ref(null);

// Activity sequence
const cfmSeqStartData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataSeq.task;
  return isEndSelected.value ? setSeqStartAndEndData(cfmSeqEnd.value, 'sources', task.value) : cfmSeqStart.value.map(i => i.label);
});
const cfmSeqEndData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataSeq.task;
  return isStartSelected.value ? setSeqStartAndEndData(cfmSeqStart.value, 'sinks', task.value) : cfmSeqEnd.value.map(i => i.label);
});
// Processing time
const cfmPtEteStartData = computed(() => {
  return cfmPtEteStart.value.map(i => i.task);
});
const cfmPtEteEndData = computed(() => {
  return cfmPtEteEnd.value.map(i => i.task);
});
const cfmPtEteSEStartData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtEte.task;
  return isEndSelected.value ? setStartAndEndData(cfmPtEteSE.value, 'end', task.value) : setTaskData(cfmPtEteSE.value, 'start');
});
const cfmPtEteSEEndData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtEte.task;
  return isStartSelected.value ? setStartAndEndData(cfmPtEteSE.value, 'start', task.value) : setTaskData(cfmPtEteSE.value, 'end');
});
const cfmPtPStartData = computed(() => {
  return cfmPtPStart.value.map(i => i.task);
});
const cfmPtPEndData = computed(() => {
  return cfmPtPEnd.value.map(i => i.task);
});
const cfmPtPSEStartData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtP.task;
  return isEndSelected.value ? setStartAndEndData(cfmPtPSE.value, 'end', task.value) : setTaskData(cfmPtPSE.value, 'start');
});
const cfmPtPSEEndData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtP.task;
  return isStartSelected.value ? setStartAndEndData(cfmPtPSE.value, 'start', task.value) : setTaskData(cfmPtPSE.value, 'end');
});
// Waiting time
const cfmWtEteStartData = computed(() => {
  return cfmWtEteStart.value.map(i => i.task);
});
const cfmWtEteEndData = computed(() => {
  return cfmWtEteEnd.value.map(i => i.task);
});
const cfmWtEteSEStartData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtEte.task;
  return isEndSelected.value ? setStartAndEndData(cfmWtEteSE.value, 'end', task.value) : setTaskData(cfmWtEteSE.value, 'start');
});
const cfmWtEteSEEndData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtEte.task;
  return isStartSelected.value ? setStartAndEndData(cfmWtEteSE.value, 'start', task.value) : setTaskData(cfmWtEteSE.value, 'end');
});
const cfmWtPStartData = computed(() => {
  return cfmWtPStart.value.map(i => i.task);
});
const cfmWtPEndData = computed(() => {
  return cfmWtPEnd.value.map(i => i.task);
});
const cfmWtPSEStartData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtP.task;
  return isEndSelected.value ? setStartAndEndData(cfmWtPSE.value, 'end', task.value) : setTaskData(cfmWtPSE.value, 'start');
});
const cfmWtPSEEndData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtP.task;
  return isStartSelected.value ? setStartAndEndData(cfmWtPSE.value, 'start', task.value) : setTaskData(cfmWtPSE.value, 'end');
});
// Cycle time
const cfmCtEteStartData = computed(() => {
  return cfmCtEteStart.value.map(i => i.task);
});
const cfmCtEteEndData = computed(() => {
  return cfmCtEteEnd.value.map(i => i.task);
});
const cfmCtEteSEStartData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataCt.task;
  return isEndSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'end', task.value) : setTaskData(cfmCtEteSE.value, 'start');
});
const cfmCtEteSEEndData = computed(() => {
  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataCt.task;
  return isStartSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'start', task.value) : setTaskData(cfmCtEteSE.value, 'end');
});

// Watchers - 解決儲存後的 Rule 檔，無法重新更改規則之問題
watch(() => props.isSubmitShowDataSeq, (newValue) => {
  taskStart.value = newValue.taskStart;
  taskEnd.value = newValue.taskEnd;
});
watch(() => props.isSubmitShowDataPtEte, (newValue) => {
  taskStart.value = newValue.taskStart;
  taskEnd.value = newValue.taskEnd;
});
watch(() => props.isSubmitShowDataPtP, (newValue) => {
  taskStart.value = newValue.taskStart;
  taskEnd.value = newValue.taskEnd;
});
watch(() => props.isSubmitShowDataWtEte, (newValue) => {
  taskStart.value = newValue.taskStart;
  taskEnd.value = newValue.taskEnd;
});
watch(() => props.isSubmitShowDataWtP, (newValue) => {
  taskStart.value = newValue.taskStart;
  taskEnd.value = newValue.taskEnd;
});
watch(() => props.isSubmitShowDataCt, (newValue) => {
  taskStart.value = newValue.taskStart;
  taskEnd.value = newValue.taskEnd;
});

/**
 * 設定 start and end 的 Radio Data
 * @param {object} data cfmSeqStart | cfmSeqEnd | cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
 * 傳入以上任一後端接到的 Activities 列表 Data。
 * @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
 * @returns {array}
 */
function setTaskData(data, category) {
  let newData = data.map(i => i[category]);
  newData = [...new Set(newData)]; // Set 是一種集合型別，只會儲存獨特的值。
  return newData;
}
/**
 * 重新設定連動的 start and end 的 Radio Data
 * @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
 * 傳入以上任一後端接到的 Activities 列表 Data。
 * @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
 * @param {string} task 已選擇的 Activity task
 * @returns {array}
 */
function setStartAndEndData(data, category, taskVal) {
  let oppositeCategory = '';
  if (category === 'start') {
      oppositeCategory = 'end';
  } else {
      oppositeCategory = 'start';
  };
  let newData = data.filter(i => i[category] === taskVal).map(i => i[oppositeCategory]);
  newData = [...new Set(newData)];
  return newData;
}
/**
 * 重新設定 Activity sequence 連動的 start and end 的 Radio Data
 * @param {object} data cfmSeqStart | cfmSeqEnd，傳入以上任一後端接到的 Activities 列表 Data。
 * @param {string} category 'sources' | 'sinks'，傳入 'sources' 或 'sinks'。
 * @param {string} task 已選擇的 Activity task
 * @returns {array}
 */
function setSeqStartAndEndData(data, category, taskVal) {
  let newData = data.filter(i => i.label === taskVal).map(i => i[category]);
  newData = [...new Set(...newData)];
  return newData;
}
/**
 * select start list's task
 * @param {event} e 觸發 input 的詳細事件
 */
function selectStart(e) {
  taskStart.value = e;
  if(isStartSelected.value === null || isStartSelected.value === true){
    isStartSelected.value = true;
    isEndSelected.value = false;
    task.value = e;
    taskEnd.value = null;
    emitter.emit('sratrAndEndToStart', {
      start: true,
      end: false,
    });
  };
}
/**
 * select End list's task
 * @param {event} e 觸發 input 的詳細事件
 */
function selectEnd(e) {
  taskEnd.value = e;
  if(isEndSelected.value === null || isEndSelected.value === true){
    isEndSelected.value = true;
    isStartSelected.value = false;
    task.value = e;
    taskStart.value = null;
    emitter.emit('sratrAndEndToStart', {
      start: false,
      end: true,
    });
  }
}
/**
 * reset all data.
 */
function reset() {
  task.value = null;
  isStartSelected.value = null;
  isEndSelected.value = null;
  taskStart.value = null;
  taskEnd.value = null;
}
/**
 * Radio 切換時，Start & End Data 連動改變
 * @param {boolean} data true | false，傳入 true 或 false
 */
function setResetData(data) {
  if(data) {
    if(props.isSubmit) {
      switch (selectedRuleType.value) {
        case 'Activity sequence':
          task.value = props.isSubmitShowDataSeq.task;
          isStartSelected.value = props.isSubmitShowDataSeq.isStartSelected;
          isEndSelected.value = props.isSubmitShowDataSeq.isEndSelected;
          break;
        case 'Processing time':
          switch (selectedProcessScope.value) {
            case 'End to end':
              task.value = props.isSubmitShowDataPtEte.task;
              isStartSelected.value = props.isSubmitShowDataPtEte.isStartSelected;
              isEndSelected.value = props.isSubmitShowDataPtEte.isEndSelected;
              break;
            case 'Partial':
              task.value = props.isSubmitShowDataPtP.task;
              isStartSelected.value = props.isSubmitShowDataPtP.isStartSelected;
              isEndSelected.value = props.isSubmitShowDataPtP.isEndSelected;
              break;
            default:
              break;
          }
          break;
        case 'Waiting time':
          switch (selectedProcessScope.value) {
              case 'End to end':
                task.value = props.isSubmitShowDataWtEte.task;
                isStartSelected.value = props.isSubmitShowDataWtEte.isStartSelected;
                isEndSelected.value = props.isSubmitShowDataWtEte.isEndSelected;
                break;
              case 'Partial':
                task.value = props.isSubmitShowDataWtP.task;
                isStartSelected.value = props.isSubmitShowDataWtP.isStartSelected;
                isEndSelected.value = props.isSubmitShowDataWtP.isEndSelected;
                break;
              default:
                break;
            }
            break;
        case 'Cycle time':
          task.value = props.isSubmitShowDataCt.task;
          isStartSelected.value = props.isSubmitShowDataCt.isStartSelected;
          isEndSelected.value = props.isSubmitShowDataCt.isEndSelected;
          break;
        default:
          break;
      }
    } else {
      reset();
    }
  }
}

// created() logic
emitter.on('isRadioChange', (data) => {
  setResetData(data);
});
emitter.on('isRadioSeqChange', (data) => {
  setResetData(data);
});
emitter.on('isRadioProcessScopeChange', (data) => {
  if(data) {
    setResetData(data);
  };
});
emitter.on('isRadioActSeqMoreChange', (data) => {
  if(data) {
    setResetData(data);
  };
});
emitter.on('isRadioActSeqFromToChange', (data) => {
  if(data) {
    setResetData(data);
  };
});
emitter.on('reset', data => {
  reset();
});
</script>
