<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 {
  departmentAdvanced,
  setDepartment
} from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
import {useRouter} from 'vue-router'
import {ref, watch} from 'vue';
import DepartmentCreatebrandForm
  from "@/views/dashboards/superUserDashboard/department/profile/DepartmentCreatebrandForm.vue";
import DepartmentEditbrandForm
  from "@/views/dashboards/superUserDashboard/department/profile/DepartmentEditbrandForm.vue";


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

// Set the products
const default_branding = {
  name: null,
  address: null,
  phone: null,
  email: null,
  website: null,
  cvr: null,
  logo: null,
  favicon: null,
}

const branding = ref({...default_branding});

const getDepartmentBranding = async () => {
  const brandingId = departmentAdvanced.value.getBranding();
  if (!brandingId) {
    console.log('No branding', departmentAdvanced);
    return;
  }
  SessionUser.objects.Branding.get.single(parseInt(brandingId)).then((response) => {
    console.log(response);
    branding.value = {
      ...default_branding,
      ...response,
    };
  });
}

const loadAvailableBrands = async () => {
  SessionUser.objects.Branding.get.all().then((response) => {
    console.log(response);
  });
}

getDepartmentBranding();
loadAvailableBrands();

watch(() => departmentAdvanced.value.getBranding(), () => {
  getDepartmentBranding();
});
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <DepartmentSubPageWrapper>
      <template #title>
        <PageTitle title="Department" subtitle="Department pricing" />
      </template>
      <div>
        {{branding }}
        <!-- The form to create a new branding -->
        <template v-if="!departmentAdvanced.hasBranding()">
          <DepartmentCreatebrandForm v-bind:department="departmentAdvanced" />
        </template>
        <!-- The branding modification display -->
        <template v-else>
          <!--<DepartmentEditbrandForm v-bind:department="departmentAdvanced" v-bind:brand="branding" /> -->
        </template>
        <code>{{ branding }}</code>
      </div>
    </DepartmentSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>