<script setup>
import { ref, onMounted, watch, markRaw } from "vue";
import { useRoute } from "vue-router";

import EnergyChart from "./components/EnergyChart/EnergyChart.vue";
import EnergyHistoryTable from "./components/EnergyHistoryTable/EnergyHistoryTable.vue";
import EnergyReport from "./components/EnergyReport/EnergyReport.vue";

const route = useRoute();
const currentComponent = ref(null);

const updateComponent = () => {
  const { main_system_id, sub_system_id } = route.params;

  if (main_system_id === "energy_chart") {
    if (sub_system_id === "chart") {
      currentComponent.value = markRaw(EnergyChart);
    } else {
      currentComponent.value = markRaw(EnergyHistoryTable);
    }
  } else if (main_system_id === "energy_report") {
    currentComponent.value = markRaw(EnergyReport);
  } else {
    currentComponent.value = null; 
  }
};

onMounted(updateComponent);

watch(
  () => route.params,
  () => {
    updateComponent();
  }
);
</script>
<template>
  <component :is="currentComponent" />
</template>
