<script setup>
import { ref, shallowRef, onMounted, computed } from "vue";
import Connection from "@/pages/settings/Partials/Connection.vue";
import Warehouses from "@/pages/settings/Partials/Warehouses.vue";
import WCOrderStatusSettings from "@/pages/settings/Partials/WCOrderStatusSettings.vue";
import OrderAutoShipment from "@/pages/settings/Partials/OrderAutoShipment.vue";
import Status from "@/pages/settings/Partials/Status.vue";
import CargoIntegrations from "@/pages/settings/Partials/CargoIntegrations.vue";
import Shipment from "@/pages/settings/Partials/Shipment.vue";
import Package from "@/pages/settings/Partials/Package.vue";
import HttpLogs from "@/pages/settings/Partials/HttpLogs.vue";
import Marketplace from "@/pages/settings/Partials/Marketplace.vue";
import Gate from "@/pages/settings/Partials/Gate.vue";
import NavSectionTitle from "@/components/Settings/NavSectionTitle.vue";
import NavElement from "@/components/Settings/NavElement.vue";
import { useSettingsStore } from "@/stores/SettingsStore";
import Loading from "@/components/Loading.vue";

const { accountDetails } = useSettingsStore();

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

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

const isDisabled = computed(() => {
  if (!accountDetails.plan) {
    return true;
  }
  return [2, 3].includes(accountDetails.plan?.base.id);
});

const isMarketplace = computed(() => {
  return window.gcargo.marketplace_active;
});

const navMenu = ref([
  {
    sectionTitle: "general_settings",
    sections: [
      {
        title: "connection",
        component: shallowRef(Connection),
        active: true,
      },
      {
        title: "default",
        component: shallowRef(Shipment),
      },
      {
        title: "package_settings",
        component: shallowRef(Package),
      },
      {
        title: "warehouses",
        component: shallowRef(Warehouses),
      },
      {
        title: "order_settings",
        component: shallowRef(WCOrderStatusSettings),
      },
      {
        title: "auto_shipment",
        component: shallowRef(OrderAutoShipment),
        isBusiness: true,
        disabled: isDisabled,
      },
      {
        title: "gate",
        component: shallowRef(Gate),
      },
      {
        title: "marketplace",
        component: shallowRef(Marketplace),
        hidden: !isMarketplace.value,
      },
    ],
  },
  {
    sectionTitle: "integration_settings",
    sections: [
      {
        title: "cargo_integrations",
        component: shallowRef(CargoIntegrations),
      },
    ],
  },
  {
    sectionTitle: "other",
    sections: [
      {
        title: "http_logs",
        component: shallowRef(HttpLogs),
      },
      {
        title: "status",
        component: shallowRef(Status),
      },
    ],
  },
  {
    sectionTitle: "other_products",
    sections: [
      {
        title: "pos_entegrator",
        externalLink: "https://posentegrator.com",
      },
      {
        title: "fatura_entegrator",
        externalLink: "https://faturaentegrator.com/",
      },
    ],
  },
]);

const tabToActive = (tab) => {
  navMenu.value.forEach((section) => {
    section.sections.forEach((element) => {
      if (!element.externalLink) {
        element.active = element.title === tab;
        if (element.title === tab) {
          rightContent.value = element.component;
        }
      }
    });
  });
};
</script>
<template>
  <Loading />
  <div class="w-full flex pt-2">
    <template v-if="apiKey">
      <div class="w-1/5 flex flex-col bg-[#FAFAFA] rounded-l-lg space-y-4 py-4">
        <div class="flex flex-col items-start pt-4 pl-8">
          <img class="w-60" :src="`${assetsUrl}/images/logo.svg`" />
        </div>
        <div v-for="menuItem in navMenu" :key="menuItem.sectionTitle">
          <NavSectionTitle>
            {{ $t(menuItem.sectionTitle) }}
          </NavSectionTitle>

          <template v-for="(section, index) in menuItem.sections" :key="index">
            <NavElement
              v-if="!section.externalLink"
              :id="section.title"
              :icon="section.title"
              :active="section.active"
              :new-badge="section.newBadge"
              :is-business="section.isBusiness"
              :disabled="section.disabled"
              :hidden="section.hidden"
              @click="section.disabled ? false : tabToActive(section.title)"
            >
              {{ $t(section.title) }}
            </NavElement>

            <a
              v-else
              :href="section.externalLink"
              target="_blank"
              class="block"
            >
              <NavElement
                :id="section.title"
                :icon="section.title"
                :active="false"
              >
                {{ $t(section.title) }}
              </NavElement>
            </a>
          </template>

          <a
            v-if="menuItem.sectionTitle === 'other'"
            href="https://yardim.gurmehub.com/docs/kargo-entegrator/?utm_source=wp_plugin&utm_medium=referal&utm_campaign=documents"
            target="_blank"
          >
            <NavElement icon="documents" :active="false">
              {{ $t("documents") }}
            </NavElement>
          </a>
        </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>
