<template>
  <div class="q-pa-md flex flex-center">
    <!-- Outer Container for positioning -->
    <div class="relative-position flex flex-center">
      <!-- 1. Outer Knob (e.g., Value A) -->
      <q-knob
        v-model="delayHours"
        :min="0"
        :max="24"
        size="55px"
        color="accent"
        track-color="primary"
        class="absolute"
        :thickness="0.2"
      />

      <!-- 2. Middle Knob (e.g., Value B) -->
      <q-knob
        v-model="delayMinutes"
        :min="0"
        :max="60"
        size="40px"
        color="accent"
        track-color="primary"
        class="absolute"
        :thickness="0.2"
      />

      <!-- 3. Inner Knob (e.g., Value C) -->
      <q-knob
        v-model="delaySeconds"
        :min="0"
        :max="60"
        size="25px"
        color="accent"
        track-color="secondary"
        class="absolute"
        :thickness="0.2"
      />
    </div>
  </div>
  {{ hhMmSs }}
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useSimulationStore } from 'stores/simulation';

const simulationStore = useSimulationStore();

const props = defineProps({
  loc_id: { type: String, required: true },
  delay: { type: Number, required: true },
});

const delayHours = computed({
  get: () => Math.floor(props.delay / 3600),
  set: (val) => {
    const hrSeconds: number = val * 3600;
    const minSeconds: number = delayMinutes.value * 60;
    const secSeconds: number = delaySeconds.value;
    const totalSeconds: number = hrSeconds + minSeconds + secSeconds;
    simulationStore.updateLocationMark(props.loc_id, 'delay', totalSeconds);
  },
});

const delayMinutes = computed({
  get: () => Math.floor((props.delay % 3600) / 60),
  set: (val) => {
    const hrSeconds: number = delayHours.value * 3600;
    const minSeconds: number = val * 60;
    const secSeconds: number = delaySeconds.value;
    const totalSeconds: number = hrSeconds + minSeconds + secSeconds;
    simulationStore.updateLocationMark(props.loc_id, 'delay', totalSeconds);
  },
});

const delaySeconds = computed({
  get: () => Math.floor(props.delay % 60),
  set: (val) => {
    const hrSeconds: number = delayHours.value * 3600;
    const minSeconds: number = delayMinutes.value * 60;
    const secSeconds: number = val;
    const totalSeconds: number = hrSeconds + minSeconds + secSeconds;
    simulationStore.updateLocationMark(props.loc_id, 'delay', totalSeconds);
  },
});

/*
const secondsToHhMmSs = (seconds: number) => {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds
    .toString()
    .padStart(2, '0')}`;
};

 */

const hhMmSs = computed(() => {
  if (delayHours.value > 0)
    return `${delayHours.value.toString().padStart(2, '0')}:${delayMinutes.value.toString().padStart(2, '0')}:${delaySeconds.value.toString().padStart(2, '0')}`;
  if (delayMinutes.value > 0)
    return `${delayMinutes.value.toString().padStart(2, '0')}:${delaySeconds.value.toString().padStart(2, '0')}`;
  else return `${delaySeconds.value.toString().padStart(2, '0')}`;
});
</script>

<style lang="sass"></style>
