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

<script>

import BasicButton from "@/components/UI/BasicButton.vue";
import TabContainer from "@/components/UI/TabContainer.vue";
import {markRaw} from "vue";
import Properties from "@/components/layout/config/Properties.vue";
import Box from "@/components/UI/Box.vue";
import StagedChanges from "@/components/layout/config/StagedChanges.vue";
import BulkOperations from "@/components/layout/config/BulkOperations.vue";
import Rates from "@/components/layout/config/Rates.vue";
import Nodes from "@/components/layout/config/Nodes.vue";
import Materials from "@/components/layout/config/Materials.vue";
import ErrorLog from "@/pages/ErrorLog.vue";
import {mapStores} from "pinia";
import {useActiveUserStore} from "@/store/activeuser.js";
import Apps from "@/components/layout/config/Apps.vue";
import Users from "@/components/layout/config/Users.vue";

export default {
  name: "Config",
  components: {StagedChanges, Box, TabContainer, BasicButton},
  data() {
    return {
      currentTab: null,
      propertiesTab: {
        title: 'Properties',
        component: markRaw(Properties),
        props: {isSelected: false},
      },
      appsTab: {
        title: 'Apps',
        component: markRaw(Apps),
        props: {isSelected: false},
      },
      usersTab: {
        title: 'Users',
        component: markRaw(Users),
        props: {isSelected: false},
      },
      systemLogTab: {
        title: 'System log',
        component: markRaw(ErrorLog),
        props: {isSelected: false},
      },
      materialsTab: {
        title: 'Materials',
        component: markRaw(Materials),
        props: {isSelected: false},
      },
      nodesTab: {
        title: 'Nodes',
        component: markRaw(Nodes),
        props: {isSelected: false},
      },
      ratesTab: {
        title: 'Rates',
        component: markRaw(Rates),
        props: {isSelected: false},
      },
      bulkOperationsTab: {
        title: 'Bulk operations',
        component: markRaw(BulkOperations),
        props: {isSelected: false},
      }
    }
  },
  computed: {
    ...mapStores(useActiveUserStore),
    tabsConfig() {
      const tabs = [];

      if (this.activeUserStore.isSuper) {
        tabs.push(this.propertiesTab);
        tabs.push(this.systemLogTab);
      }

      if (this.activeUserStore.isService) {
        tabs.push(this.appsTab);
      }

      if (this.activeUserStore.isRightManagement) {
        tabs.push(this.usersTab);
      }

      if (this.activeUserStore.isSuper || this.activeUserStore.isMaterial) {
        tabs.push(this.materialsTab);
      }

      if (this.activeUserStore.isSuper || this.activeUserStore.isMaterial || this.activeUserStore.isPackaging || this.activeUserStore.isFreight) {
        tabs.push(this.nodesTab);
      }

      if (this.activeUserStore.allowRates)
        tabs.push(this.ratesTab);

      if (this.activeUserStore.isSuper || this.activeUserStore.isMaterial || this.activeUserStore.isPackaging || this.activeUserStore.isFreight) {
        tabs.push(this.bulkOperationsTab);
      }


      return tabs;

    }
  },
  created() {

  },
  methods: {
    handleTabChange(eventData) {
      const {_, tab} = eventData;
      this.tabsConfig.forEach(t => t.props.isSelected = t.title === tab.title);
    }
  }
}
</script>


<style scoped>

.box-container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
}

</style>