<script setup>
import PageTitle from "@/components/global/PageTitle.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import DepartmentSubPageWrapper from "@/views/dashboards/superUserDashboard/department/DepartmentSubPageWrapper.vue";
import { setDepartment, department, departmentId, getDepartmentPrice, editDepartmentPrice } from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import SuperUserDashboardDepartmentStripeNavigation
  from "@/views/dashboards/superUserDashboard/department/stripe/SuperUserDashboardDepartmentStripeNavigation.vue";
import ConfigurationCategory from "@/components/displays/superuser/configuration/ConfigurationCategory.vue";
import ConfigurationInputNumber from "@/components/displays/superuser/configuration/ConfigurationInputNumber.vue";
import ConfigurationSelect from "@/components/displays/superuser/configuration/ConfigurationSelect.vue";

// Get the department from the route
const router = useRouter()
setDepartment(router.currentRoute.value.params.departmentId);

const stripeLocations = ref([]);

const getStripeLocation = async () => {
  await SessionUser.superUser.modules.stripe.functions.terminals.locations.list().then((response) => {
    // Create the options temporary array
    let tmp = [];
    // Loop through the locations
    response.data.data.data.forEach(location => {
      // Create the location label string. If the location has an address, add it to the label
      let tmp_location_label = location.display_name;
      if (location.address) {
        tmp_location_label += " - " + location.address.line1 + ", " + location.address.postal_code + " " + location.address.city;
      }
      // Push the location to the options array
      tmp.push({ value: location.id, label: tmp_location_label });
    });
    // Set the stripeLocations dynamic value
    stripeLocations.value = tmp;
    // Return the options array
    return tmp;
  });
}

getStripeLocation();

const departmentStripeLocation = ref(null);

const getDepartmentStripeLocation = async () => {
  await SessionUser.superUser.modules.stripe.departments.terminals.location.get(departmentId.value).then((response) => {
    departmentStripeLocation.value = response.data.data.id;
  });
}

getDepartmentStripeLocation();

const setDepartmentStripeLocation = async (locationId) => {
  await SessionUser.superUser.modules.stripe.departments.terminals.location.set(departmentId.value, locationId).then((response) => {
    departmentStripeLocation.value = response.data.data.location;
  });
}
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <DepartmentSubPageWrapper>
      <template #title>
        <PageTitle title="Department" subtitle="Stripe opsætning">
        </PageTitle>
      </template>
      <div>
        <SuperUserDashboardDepartmentStripeNavigation />
        <!-- Department Stripe Location -->
        <ConfigurationCategory
          module="Stripe"
          title="Afdelingsopsætning"
          icon="fas fa-cogs"
          subtitle="Stripe placering"
        >
          <template #default>
            <!-- Location -->
            <ConfigurationSelect
              label="Stripe placering"
              description="Vælg den placering i Stripe, som denne afdeling er tilknyttet"
              :options="stripeLocations"
              :on-select="setDepartmentStripeLocation"
              :icon="'fas fa-map-marker-alt'"
              :value="departmentStripeLocation"
              ></ConfigurationSelect>
          </template>
        </ConfigurationCategory>
      </div>
    </DepartmentSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>