<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";
import SuperUserDashboardDepartmentModulesNavigation
  from "@/views/dashboards/superUserDashboard/department/modules/SuperUserDashboardDepartmentModulesNavigation.vue";
import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
import ConfigurationInput from "@/components/displays/superuser/configuration/ConfigurationInput.vue";

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

const departmentVariables = ref([]);

const getDepartmentVariables = async () => {
  await SessionUser.request(
      SessionUser.objects.department_variables.meta.endpoint,
      'GET',
      {
        filters: 'department_id:' + departmentId.value,
      }
  )
      .then((response) => {
        departmentVariables.value = response.data.data;
        console.log(departmentVariables.value);
      })
      .catch((error) => {
        console.log(error);
      });
}

const getVariableValue = (variable) => {
  if (departmentVariables.value.length === 0) {
    return null;
  }
  // Find the variable in the department variables
  let tmp = departmentVariables.value.find((item) => item.variable === variable);
  // If the variable is found, return the value
  if (tmp) {
    return tmp;
  }
  // If the variable is not found, return null
  return null;
}

const getBooleanValue = (variable) => {
  if (departmentVariables.value.length === 0) {
    return false;
  }
  // Find the variable in the department variables
  if (getVariableValue(variable)) {
    // If the variable is found, return the value
    return getVariableValue(variable).value === 'true';
  }
}

getDepartmentVariables();

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="Moduler">
        </PageTitle>
      </template>
      <div>
        {{ departmentVariables }}
        <SuperUserDashboardDepartmentModulesNavigation />
        <!-- Department Stripe Location -->
        <ConfigurationCategory
          module="Afdelingsopsætning"
          title="Moduler"
          icon="fas fa-cogs"
          subtitle="Bookingsystem"
        >
          <template #default>
            <!-- Bookingsystem (Not time based) -->
            <ConfigurationSwitch
              title="Bookingsystem (ikke tidsbaseret)"
              description="Aktiver bookingsystem"
              v-bind:value="getBooleanValue('bookingsystem_enabled')"
              :on-switch="(value) => {
                SessionUser.objects.department_variables.add(
                    departmentId,
                    'bookingsystem_enabled',
                    value ? 'true' : 'false'
                ).then(() => {
                  getDepartmentVariables();
                });
              }"
              ></ConfigurationSwitch>
            <!-- Bookingsystem (tidsbaseret) -->
            <ConfigurationSwitch
              title="Bookingsystem (tidsbaseret)"
              description="Aktiver bookingsystem"
              v-bind:value="getBooleanValue('bookingsystem_time_based_enabled')"
              :on-switch="(value) => {
                SessionUser.objects.department_variables.add(
                    departmentId,
                    'bookingsystem_time_based_enabled',
                    value ? 'true' : 'false'
                ).then(() => {
                  getDepartmentVariables();
                });
              }"
              ></ConfigurationSwitch>
            <!-- Calendar password -->
            <ConfigurationInput
              title="Booking system (tidsbaseret) kodeord"
              description="Kodeord til booking system (tidsbaseret)"
              v-bind:value="getVariableValue('bookingsystem_time_based_password')"
              :on-save="(value) => {
                SessionUser.objects.department_variables.add(
                    departmentId,
                    'bookingsystem_time_based_password',
                    value
                ).then(() => {
                  getDepartmentVariables();
                });
              }"
              ></ConfigurationInput>
          </template>
        </ConfigurationCategory>
      </div>
    </DepartmentSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>