<template>
  <div id="timeranges_s_e_container" class="flex justify-between items-center">
    <Durationjs
      :max="minVuemax"
      :min="minVuemin"
      :size="'min'"
      :updateMax="updateMax"
      @total-seconds="minTotalSeconds"
      :value="durationMin"
    >
    </Durationjs>
    <span>~</span>
    <Durationjs
      :max="maxVuemax"
      :min="maxVuemin"
      :size="'max'"
      :updateMin="updateMin"
      @total-seconds="maxTotalSeconds"
      :value="durationMax"
    >
    </Durationjs>
  </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/TimeRangeDuration
 *   Time range duration picker with min/max duration inputs
 *   for conformance time-based rules.
 */

import { ref, watch } from "vue";
import Durationjs from "@/components/DurationInput.vue";
import { cloneDeep } from "lodash-es";

const props = defineProps(["time", "select"]);
const emit = defineEmits(["min-total-seconds", "max-total-seconds"]);

const timeData = ref({ min: 0, max: 0 });
const timeRangeMin = ref(0);
const timeRangeMax = ref(0);
const minVuemin = ref(0);
const minVuemax = ref(0);
const maxVuemin = ref(0);
const maxVuemax = ref(0);
const updateMax = ref(null);
const updateMin = ref(null);
const durationMin = ref(null);
const durationMax = ref(null);

/** Deep-copies timeData min/max values to the Vue component boundaries. */
function setTimeValue() {
  // Deep copy the original timeData values
  minVuemin.value = cloneDeep(timeData.value.min);
  minVuemax.value = cloneDeep(timeData.value.max);
  maxVuemin.value = cloneDeep(timeData.value.min);
  maxVuemax.value = cloneDeep(timeData.value.max);
}

/**
 * Handles the minimum duration total seconds update.
 * @param {number} e - The total seconds from the min duration component.
 */
function minTotalSeconds(e) {
  timeRangeMin.value = e;
  updateMin.value = e;
  emit("min-total-seconds", e);
}

/**
 * Handles the maximum duration total seconds update.
 * @param {number} e - The total seconds from the max duration component.
 */
function maxTotalSeconds(e) {
  timeRangeMax.value = e;
  updateMax.value = e;
  emit("max-total-seconds", e);
}

watch(
  () => props.time,
  (newValue, oldValue) => {
    durationMax.value = null;
    durationMin.value = null;
    if (newValue === null) {
      timeData.value = { min: 0, max: 0 };
    } else if (newValue !== null) {
      timeData.value = { min: newValue.min, max: newValue.max };
      emit("min-total-seconds", newValue.min);
      emit("max-total-seconds", newValue.max);
    }
    setTimeValue();
  },
  { deep: true, immediate: true },
);

// created
if (props.select) {
  if (Object.keys(props.select.base).length !== 0) {
    timeData.value = props.select.base;
    setTimeValue();
  }
  if (Object.keys(props.select.rule).length !== 0) {
    durationMin.value = props.select.rule.min;
    durationMax.value = props.select.rule.max;
  }
}
</script>
