<script setup>
import { ref, shallowRef, onMounted } from "vue";
import Connection from "@/pages/settings/Partials/Connection.vue";
import Status from "@/pages/settings/Partials/Status.vue";
import InvoiceIntegrations from "@/pages/settings/Partials/InvoiceIntegrations.vue";
import WooCommerce from "@/pages/settings/Partials/WooCommerce.vue";
import LineExcludes from "@/pages/settings/Partials/LineExcludes.vue";
import Defaults from "@/pages/settings/Partials/Defaults.vue";
import AutoInvoice from "@/pages/settings/Partials/AutoInvoice.vue";
import Notifications from "@/pages/settings/Partials/Notifications.vue";
import NavSectionTitle from "@/components/Settings/NavSectionTitle.vue";
import NavElement from "@/components/Settings/NavElement.vue";
import Loading from "@/components/Loading.vue";

onMounted(() => {
  window.jQuery("p.submit").hide();
});

const assetsUrl = window.ginvoice.assets_url;
const rightContent = shallowRef(Connection);
const apiKey = window.ginvoice.api_key;

const navMenu = ref([
  {
    sectionTitle: "general",
    sections: [
      {
        title: "connection",
        component: shallowRef(Connection),
        active: true,
      },
    ],
  },
  {
    sectionTitle: "settings",
    sections: [
      {
        title: "invoice_integrations",
        component: shallowRef(InvoiceIntegrations),
      },
      {
        title: "woocommerce",
        component: shallowRef(WooCommerce),
      },
      {
        title: "auto_invoice",
        component: shallowRef(AutoInvoice),
      },
      {
        title: "defaults",
        component: shallowRef(Defaults),
      },
      {
        title: "line_excludes",
        component: shallowRef(LineExcludes),
      },
      {
        title: "notifications",
        component: shallowRef(Notifications),
      },
    ],
  },
  {
    sectionTitle: "other",
    sections: [
      {
        title: "status",
        component: shallowRef(Status),
      },
    ],
  },
]);

const tabToActive = (tab) => {
  navMenu.value.forEach((section) => {
    section.sections.forEach((element) => {
      element.active = element.title === tab;
      if (element.title === tab) {
        rightContent.value = element.component;
      }
    });
  });
};
</script>
<template>
  <Loading />
  <div class="w-full flex p-4">
    <template v-if="apiKey">
      <div class="w-1/5 flex flex-col bg-[#121623] space-y-4 py-4 rounded-l-lg">
        <div class="flex flex-col items-start pt-4 pl-8 mb-4">
          <img class="w-60" :src="`${assetsUrl}/images/logo.svg`" />
        </div>
        <div v-for="menuItem in navMenu" :key="menuItem.sectionTitle">
          <NavSectionTitle>
            {{ $t(menuItem.sectionTitle) }}
          </NavSectionTitle>
          <NavElement
            v-for="(section, index) in menuItem.sections"
            :id="section.title"
            :key="index"
            :icon="section.title"
            :active="section.active"
            :new-badge="section.newBadge"
            :is-business="section.isBusiness"
            :disabled="section.disabled"
            @click="section.disabled ? false : tabToActive(section.title)"
          >
            {{ $t(section.title) }}
          </NavElement>
        </div>
      </div>
    </template>
    <div
      :class="`${apiKey ? 'w-4/5' : 'w-full'}  flex flex-col bg-white rounded-r-lg p-8 relative`"
    >
      <component :is="rightContent" />
    </div>
  </div>
</template>
