<template>
<div class="mt-2" v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
  <p class="h2">Time Range</p>
  <div class=" text-sm leading-normal">
    <!-- Activity duration -->
    <TimeRangeDuration
    v-if="selectedRuleType === 'Activity duration'" :time="timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <!-- Processing time -->
     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmPtEteAll" :select="isSubmitTimeCfmPtEteAll" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmPtEteStart" :select="isSubmitTimeCfmPtEteStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmPtEteEnd" :select="isSubmitTimeCfmPtEteEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :time="timeCfmPtPStart" :select="isSubmitTimeCfmPtPStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :time="timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :time="timeCfmPtPSE" :select="isSubmitTimeCfmPtPSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <!-- Waiting time -->
     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmWtEteAll" :select="isSubmitTimeCfmWtEteAll" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmWtEteStart" :select="isSubmitTimeCfmWtEteStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmWtEteEnd" :select="isSubmitTimeCfmWtEteEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :time="timeCfmWtPStart" :select="isSubmitTimeCfmWtPStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :time="timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :time="timeCfmWtPSE" :select="isSubmitTimeCfmWtPSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <!-- Cycle time -->
     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmCtEteAll" :select="isSubmitTimeCfmCtEteAll" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmCtEteStart" :select="isSubmitTimeCfmCtEteStart" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmCtEteEnd" :select="isSubmitTimeCfmCtEteEnd" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
  </div>
</div>
</template>
<script>
import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
import { storeToRefs } from 'pinia';
import ConformanceStore from '@/stores/conformance.js';

export default {
  setup() {
    const conformanceStore = ConformanceStore();
    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole, cfmWtEteWhole, cfmCtEteWhole } = storeToRefs(conformanceStore);

    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole, cfmWtEteWhole, cfmCtEteWhole }
  },
  props: ['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart', 'isSubmitTimeCfmPtEteEnd', 'isSubmitTimeCfmPtEteSE', 'isSubmitTimeCfmPtPStart', 'isSubmitTimeCfmPtPEnd', 'isSubmitTimeCfmPtPSE', 'isSubmitTimeCfmWtEteAll', 'isSubmitTimeCfmWtEteStart', 'isSubmitTimeCfmWtEteEnd', 'isSubmitTimeCfmWtEteSE', 'isSubmitTimeCfmWtPStart', 'isSubmitTimeCfmWtPEnd', 'isSubmitTimeCfmWtPSE', 'isSubmitTimeCfmCtEteAll', 'isSubmitTimeCfmCtEteStart', 'isSubmitTimeCfmCtEteEnd', 'isSubmitTimeCfmCtEteSE'],
  data() {
    return {
      timeDuration: null, // Activity duration
      timeCfmPtEteAll: null, // Processing time
      timeCfmPtEteAllDefault: null,
      timeCfmPtEteStart: null,
      timeCfmPtEteEnd: null,
      timeCfmPtEteSE: null,
      timeCfmPtPStart: null,
      timeCfmPtPEnd: null,
      timeCfmPtPSE: null,
      timeCfmWtEteAll: null, // Waiting time
      timeCfmWtEteAllDefault: null,
      timeCfmWtEteStart: null,
      timeCfmWtEteEnd: null,
      timeCfmWtEteSE: null,
      timeCfmWtPStart: null,
      timeCfmWtPEnd: null,
      timeCfmWtPSE: null,
      timeCfmCtEteAll: null, // Cycle time
      timeCfmCtEteAllDefault: null,
      timeCfmCtEteStart: null,
      timeCfmCtEteEnd: null,
      timeCfmCtEteSE: null,
      selectCfmPtEteSEStart: null,
      selectCfmPtEteSEEnd: null,
      selectCfmPtPSEStart: null,
      selectCfmPtPSEEnd: null,
      selectCfmWtEteSEStart: null,
      selectCfmWtEteSEEnd: null,
      selectCfmWtPSEStart: null,
      selectCfmWtPSEEnd: null,
      selectCfmCtEteSEStart: null,
      selectCfmCtEteSEEnd: null,
    }
  },
  components: {
    TimeRangeDuration,
  },
  methods: {
    /**
     * get min total seconds
     * @param {Number} e
     */
    minTotalSeconds(e) {
      this.$emit('min-total-seconds', e);
    },
    /**
     * get min total seconds
     * @param {Number} e
     */
    maxTotalSeconds(e) {
      this.$emit('max-total-seconds', e);
    },
    /**
     * get Time Range(duration)
     * @param {array} data API data
     * @param {string} category act | single | double
     * @param {string} task select Radio task or start
     * @param {string} taskTwo end
     * @returns {object} {min:12, max:345}
     */
     getDurationTime(data, category, task, taskTwo) {
      let result = {min:0, max:0};
      switch (category) {
        case 'act':
          data.forEach(i => {
            if(i.label === task) result = i.duration;
          });
          break;
        case 'single':
          data.forEach(i => {
            if(i.task === task) result = i.time;
          });
          break;
        case 'double':
          data.forEach(i => {
            if(i.start === task && i.end === taskTwo) result = i.time;
          });
          break;
        case 'all':
          result = data;
          break
        default:
          break;
      };
      return result;
    },
    /**
     * All reset
     */
     reset() {
      this.timeDuration = null; // Activity duration
      this.timeCfmPtEteAll = this.timeCfmPtEteAllDefault; // Processing time
      this.timeCfmPtEteStart = null;
      this.timeCfmPtEteEnd = null;
      this.timeCfmPtEteSE = null;
      this.timeCfmPtPStart = null;
      this.timeCfmPtPEnd = null;
      this.timeCfmPtPSE = null;
      this.timeCfmWtEteAll = this.timeCfmWtEteAllDefault; // Waiting time
      this.timeCfmWtEteStart = null;
      this.timeCfmWtEteEnd = null;
      this.timeCfmWtEteSE = null;
      this.timeCfmWtPStart = null;
      this.timeCfmWtPEnd = null;
      this.timeCfmWtPSE = null;
      this.timeCfmCtEteAll = this.timeCfmCtEteAllDefault; // Cycle time
      this.timeCfmCtEteStart = null;
      this.timeCfmCtEteEnd = null;
      this.timeCfmCtEteSE = null;
      this.selectCfmPtEteSEStart = null;
      this.selectCfmPtEteSEEnd = null;
      this.selectCfmPtPSEStart = null;
      this.selectCfmPtPSEEnd = null;
      this.selectCfmWtEteSEStart = null;
      this.selectCfmWtEteSEEnd = null;
      this.selectCfmWtPSEStart = null;
      this.selectCfmWtPSEEnd = null;
      this.selectCfmCtEteSEStart = null;
      this.selectCfmCtEteSEEnd = null;
    },
  },
  created() {
    this.$emitter.on('actRadioData', (data) => {
      switch (data.category) {
        // Activity duration
        case 'cfmDur':
          this.timeDuration = this.getDurationTime(this.conformanceAllTasks, 'act', data.task);
          break;
        // Processing time
        case 'cfmPtEteStart':
          this.timeCfmPtEteStart = this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
          break;
        case 'cfmPtEteEnd':
          this.timeCfmPtEteEnd = this.getDurationTime(this.cfmPtEteEnd, 'single', data.task);
          break;
        case 'cfmPtEteSEStart':
          this.selectCfmPtEteSEStart = data.task;
          if(this.selectCfmPtEteSEEnd) this.timeCfmPtEteSE = this.getDurationTime(this.cfmPtEteSE, 'double', data.task, this.selectCfmPtEteSEEnd);
          break;
        case 'cfmPtEteSEEnd':
          this.selectCfmPtEteSEEnd = data.task;
          if(this.selectCfmPtEteSEStart) this.timeCfmPtEteSE = this.getDurationTime(this.cfmPtEteSE, 'double', this.selectCfmPtEteSEStart, data.task);
          break;
        case 'cfmPtPStart':
          this.timeCfmPtPStart = this.getDurationTime(this.cfmPtPStart, 'single', data.task);
          break;
        case 'cfmPtPEnd':
          this.timeCfmPtPEnd = this.getDurationTime(this.cfmPtPEnd, 'single', data.task);
          break;
        case 'cfmPtPSEStart':
          this.selectCfmPtPSEStart = data.task;
          if(this.selectCfmPtPSEEnd) this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', data.task, this.selectCfmPtPSEEnd);
          break;
        case 'cfmPtPSEEnd':
          this.selectCfmPtPSEEnd = data.task;
          if(this.selectCfmPtPSEStart) this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', this.selectCfmPtPSEStart, data.task);
          break;
        // Waiting time
        case 'cfmWtEteStart':
          this.timeCfmWtEteStart = this.getDurationTime(this.cfmWtEteStart, 'single', data.task);
          break;
        case 'cfmWtEteEnd':
          this.timeCfmWtEteEnd = this.getDurationTime(this.cfmWtEteEnd, 'single', data.task);
          break;
        case 'cfmWtEteSEStart':
          this.selectCfmWtEteSEStart = data.task;
          if(this.selectCfmWtEteSEEnd) this.timeCfmWtEteSE = this.getDurationTime(this.cfmWtEteSE, 'double', data.task, this.selectCfmWtEteSEEnd);
          break;
        case 'cfmWtEteSEEnd':
          this.selectCfmWtEteSEEnd = data.task;
          if(this.selectCfmWtEteSEStart) this.timeCfmWtEteSE = this.getDurationTime(this.cfmWtEteSE, 'double', this.selectCfmWtEteSEStart, data.task);
          break;
        case 'cfmWtPStart':
          this.timeCfmWtPStart = this.getDurationTime(this.cfmWtPStart, 'single', data.task);
          break;
        case 'cfmWtPEnd':
          this.timeCfmWtPEnd = this.getDurationTime(this.cfmWtPEnd, 'single', data.task);
          break;
        case 'cfmWtPSEStart':
          this.selectCfmWtPSEStart = data.task;
          if(this.selectCfmWtPSEEnd) this.timeCfmWtPSE = this.getDurationTime(this.cfmWtPSE, 'double', data.task, this.selectCfmWtPSEEnd);
          break;
        case 'cfmWtPSEEnd':
          this.selectCfmWtPSEEnd = data.task;
          if(this.selectCfmWtPSEStart) this.timeCfmWtPSE = this.getDurationTime(this.cfmWtPSE, 'double', this.selectCfmWtPSEStart, data.task);
          break;
        // Cycle time
        case 'cfmCtEteStart':
          this.timeCfmCtEteStart = this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
          break;
        case 'cfmCtEteEnd':
          this.timeCfmCtEteEnd = this.getDurationTime(this.cfmCtEteEnd, 'single', data.task);
          break;
        case 'cfmCtEteSEStart':
          this.selectCfmCtEteSEStart = data.task;
          if(this.selectCfmCtEteSEEnd) this.timeCfmCtEteSE = this.getDurationTime(this.cfmCtEteSE, 'double', data.task, this.selectCfmCtEteSEEnd);
          break;
        case 'cfmCtEteSEEnd':
          this.selectCfmCtEteSEEnd = data.task;
          if(this.selectCfmCtEteSEStart) this.timeCfmCtEteSE = this.getDurationTime(this.cfmCtEteSE, 'double', this.selectCfmCtEteSEStart, data.task);
          break;
        default:
          break;
      };
    });
    this.$emitter.on('reset', (data) => {
      this.reset();
    });
    this.$emitter.on('isRadioChange', (data) => {
      if(data) {
        this.reset();
        switch (this.selectedRuleType) {
          case 'Processing time':
            this.timeCfmPtEteAll = this.getDurationTime(this.cfmPtEteWhole, 'all');
            this.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmPtEteAll));
            break;
          case 'Waiting time':
            this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
            this.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmWtEteAll));
            break;
          case 'Cycle time':
            this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
            this.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmCtEteAll));
            break;
          default:
            break;
        };
      }
    });
    this.$emitter.on('isRadioProcessScopeChange', (data) => {
      if(data) {
        this.reset();
      };
    });
    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
      if(data) {
        if(this.selectedActSeqMore === 'All') {
          switch (this.selectedRuleType) {
            case 'Processing time':
              this.timeCfmPtEteAll = this.getDurationTime(this.cfmPtEteWhole, 'all');
              this.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmPtEteAll));
              break;
            case 'Waiting time':
              this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
              this.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmWtEteAll));
              break;
            case 'Cycle time':
              this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
              this.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmCtEteAll));
              break;
            default:
              break;
          };
        }else this.reset();
      };
    });
    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
      if(data) {
        this.reset();
      };
    });
  },
}
</script>
