<template>
  <div class="edit-calculation-container">
    <div class="header-container">
      <h2 class="page-header">DevPage</h2>
      <div>
        <box class="box-container">
          <tab-container ref="refTab" :tabs="tabsConfig" class="tab-container" @tab-changed="handleTabChange">
          </tab-container>
        </box>
      </div>
    </div>
  </div>
</template>

<script>
import Box from "@/components/UI/Box.vue";
import TabContainer from "@/components/UI/TabContainer.vue";
import {markRaw} from "vue";
import CalculationDumpList from "@/components/layout/dev/CalculationDumpList.vue";
import DevUserControl from "@/components/layout/dev/DevUserControl.vue";
import logger from "@/logger.js";

export default {
  name: "DevPage",
  components: {TabContainer, Box},
  mounted() {
    if(history.state.show === 'dumps') {
      this.$refs.refTab.setActiveTab(1);
    }
  },
  data() {
    return {
      currentTab: null,
      tabsConfig: [
        {
          title: 'User control',
          component: markRaw(DevUserControl),
          props: {isSelected: false},
        },
        {
          title: 'Calculation dump',
          component: markRaw(CalculationDumpList),
          props: {isSelected: false},
        }
      ]
    }
  },
  methods: {
    handleTabChange(eventData) {


      const { index, tab } = eventData;
      logger.log(`Tab ${index} activated:`, tab.title);

      this.tabsConfig.forEach(t =>  t.props.isSelected = t.title === tab.title);

    }
  }
}
</script>


<style scoped>

</style>