<template>
  <Drawer
    :visible="sidebarView"
    :closeIcon="'pi pi-chevron-left'"
    :modal="false"
    position="left"
    :dismissable="false"
  >
    <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">
          <!-- Select bpmn / processmap button -->
          <li class="btn-toggle-content">
            <span
              class="btn-toggle-item"
              :class="mapType === 'processMap' ? 'btn-toggle-show  ' : ''"
              @click="onProcessMapClick()"
            >
              Process Map
            </span>
            <span
              class="btn-toggle-item"
              :class="mapType === 'bpmn' ? 'btn-toggle-show' : ''"
              @click="onBPMNClick()"
            >
              BPMN Model
            </span>
          </li>
          <!-- Select drawing style: 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>
          <!-- Vertical TB | Horizontal 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">
              <RadioButton
                v-model="dataLayerType"
                inputId="freq"
                name="dataLayer"
                value="freq"
                class="mr-2"
                @click.prevent="switchDataLayerType($event, 'freq')"
              />
              <label for="freq">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">
              <RadioButton
                v-model="dataLayerType"
                inputId="duration"
                name="dataLayer"
                value="duration"
                class="mr-2"
                @click.prevent="switchDataLayerType($event, 'duration')"
              />
              <label for="duration">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>
  </Drawer>
</template>

<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
/**
 * @module components/Discover/Map/SidebarView Visualization
 *   settings sidebar for map view type (process/BPMN), curve
 *   style, direction, and data layer selection.
 */

import { ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useMapPathStore } from "@/stores/mapPathStore";

defineProps({
  sidebarView: {
    type: Boolean,
    require: true,
  },
});

const emit = defineEmits([
  "switch-map-type",
  "switch-curve-styles",
  "switch-rank",
  "switch-data-layer-type",
]);

const mapPathStore = useMapPathStore();
const { isBPMNOn } = storeToRefs(mapPathStore);

const selectFrequency = ref([
  { 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 },
]);
const selectDuration = ref([
  { 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 },
]);
const curveStyle = ref("unbundled-bezier"); // unbundled-bezier | taxi
const mapType = ref("processMap"); // processMap | bpmn
const dataLayerType = ref(null); // freq | duration
const dataLayerOption = ref(null);
const selectedFreq = ref("");
const selectedDuration = ref("");
const rank = ref("LR"); // Vertical TB | Horizontal LR

/**
 * Switches the map type and emits the change event.
 * @param {string} type - 'processMap' or 'bpmn'.
 */
function switchMapType(type) {
  mapType.value = type;
  emit("switch-map-type", mapType.value);
}

/**
 * Switches the curve style and emits the change event.
 * @param {string} style - 'unbundled-bezier' (curved) or 'taxi' (elbow).
 */
function switchCurveStyles(style) {
  curveStyle.value = style;
  emit("switch-curve-styles", curveStyle.value);
}

/**
 * Switches the graph layout direction and emits the change event.
 * @param {string} rankValue - 'TB' (vertical) or 'LR' (horizontal).
 */
function switchRank(rankValue) {
  rank.value = rankValue;
  emit("switch-rank", rank.value);
}

/**
 * Switches the data layer type (frequency or duration) and option.
 * @param {Event} e - The change event from the radio or select.
 * @param {string} type - 'freq' or 'duration'.
 */
function switchDataLayerType(e, type) {
  let value = "";

  if (e.target.value !== "freq" && e.target.value !== "duration")
    value = e.target.value;
  switch (type) {
    case "freq":
      value = value || selectedFreq.value || "total";
      dataLayerType.value = type;
      dataLayerOption.value = value;
      selectedFreq.value = value;
      break;
    case "duration":
      value = value || selectedDuration.value || "total";
      dataLayerType.value = type;
      dataLayerOption.value = value;
      selectedDuration.value = value;
      break;
  }
  emit("switch-data-layer-type", dataLayerType.value, dataLayerOption.value);
}

/** Switches to Process Map view. */
function onProcessMapClick() {
  mapPathStore.setIsBPMNOn(false);
  switchMapType("processMap");
}

/** Switches to BPMN Model view. */
function onBPMNClick() {
  mapPathStore.setIsBPMNOn(true);
  switchMapType("bpmn");
}

onMounted(() => {
  dataLayerType.value = "freq";
  dataLayerOption.value = "total";
});
</script>
