<template>
  <Sidebar :visible="sidebarView" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" >
    <template #header>
      <p class="h1">Visualization Setting</p>
    </template>
    <div>
      <!-- View -->
      <div class="my-4 border-b border-neutral-200">
        <p class="h2">View</p>
        <ul class="space-y-3 mb-4">
          <!-- 選擇 bpmn / processmap button -->
          <li class="btn-toggle-content">
            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="switchMapType('processMap')">
              Process map
            </span>
            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="switchMapType('bpmn')">
              BPMN Model
            </span>
          </li>
          <!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
          <li class="btn-toggle-content">
            <span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show  ':''" @click="switchCurveStyles('unbundled-bezier')">
              Curved
            </span>
            <span class="btn-toggle-item" :class="curveStyle === 'taxi'?'btn-toggle-show':''" @click="switchCurveStyles('taxi')">
              Elbow
            </span>
          </li>
          <!-- 直向 TB | 橫向 LR -->
          <li class="btn-toggle-content">
            <span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show  ':''" @click="switchRank('LR')">
              Horizontal
            </span>
            <span class="btn-toggle-item" :class="rank === 'TB'?'btn-toggle-show':''" @click="switchRank('TB')">
              Vertical
            </span>
          </li>
        </ul>
      </div>
      <!-- Data Layer -->
      <div>
        <p class="h2">Data Layer</p>
        <ul class="space-y-2">
          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
            <div class="flex items-center w-1/2">
              <!-- <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/>
              <label for="freq" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary">
              </label>
              <span class="inline-block ml-2">Frequency</span> -->
              <RadioButton v-model="dataLayerType" inputId="freq" name="dataLayer" value="freq" class="mr-2"/>
              <label>Frequency</label>
            </div>
            <div class="w-1/2">
              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
                <option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
              </select>
            </div>
          </li>
          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
            <div class="flex items-center w-1/2">
              <!-- <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" />
              <label for="duration" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"></label>
              <span class="inline-block ml-2">Duration</span> -->
              <RadioButton v-model="dataLayerType" inputId="duration" name="dataLayer" value="duration" class="mr-2"/>
              <label>Duration</label>
            </div>
            <div class="w-1/2">
              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">
                <option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
              </select>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </Sidebar>
</template>

<script>
export default {
  props: {
    sidebarView: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      selectFrequency: [
        { value:"total", label:"Total", disabled:false, },
        { value:"rel_freq", label:"Relative", disabled:false, },
        { value:"average", label:"Average", disabled:false, },
        { value:"median", label:"Median", disabled:false, },
        { value:"max", label:"Max", disabled:false, },
        { value:"min", label:"Min", disabled:false, },
        { value:"cases", label:"Number of cases", disabled:false, },
      ],
      selectDuration:[
        { value:"total", label:"Total", disabled:false, },
        { value:"rel_duration", label:"Relative", disabled:false, },
        { value:"average", label:"Average", disabled:false, },
        { value:"median", label:"Median", disabled:false, },
        { value:"max", label:"Max", disabled:false, },
        { value:"min", label:"Min", disabled:false, },
      ],
      curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
      mapType: 'processMap', // processMap | bpmn
      dataLayerType: 'freq', // freq | duration
      dataLayerOption: 'total',
      selectedFreq: '',
      selectedDuration: '',
      rank: 'LR', // 直向 TB | 橫向 LR
    }
  },
  methods: {
    /**
     * switch map type
     * @param {string} type processMap | bpmn
     */
     switchMapType(type) {
       this.mapType = type;
       this.$emit('switch-map-type', this.mapType);
    },
    /**
     * switch curve style
     * @param {string} style 直角 unbundled-bezier | taxi
     */
    switchCurveStyles(style) {
      this.curveStyle = style;
      this.$emit('switch-curve-styles', this.curveStyle);
    },
    /**
     * switch rank
     * @param {string} rank 直向 TB | 橫向 LR
     */
    switchRank(rank) {
      this.rank = rank;
      this.$emit('switch-rank', this.rank);
    },
    /**
     * switch Data Layoer Type or Option.
     * @param {string} e
     * @param {string} type freq | duration
     */
    switchDataLayerType(e, type){
      let value = e.target.type === 'select-one'? e.target.value: 'total';

      switch (type) {
        case 'freq':
          this.dataLayerType = type;
          this.dataLayerOption = value;
          this.selectedFreq = value;
          break;

        case 'duration':
          this.dataLayerType = type;
          this.dataLayerOption = value;
          this.selectedDuration = value;
          break;
      };

      this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
    },
  }

}
</script>
