<script setup>

import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import {SessionUser} from "@/components/session/token/SessionUser.vue";
import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
import {ref, watch} from "vue";
import {useRouter} from "vue-router";
import DepartmentBookingCertificateOverview
  from "@/views/dashboards/departmentDashboard/modules/bookings/displays/DepartmentBookingCertificateOverview.vue";

const bookingId = ref(null);
const defaultBooking = {
  id: null,
  customer_number: null,
  wash_type: null,
  contact_email: null,
  reference_number: null,
  regNrTraekker: null,
  regNrTrailer: null,
  washCertificateEmail: null,
  date: null,
  department: null,
  pickup_bool: null,
  notes: null,
  washCertificateStatus: null,
  washCertificateUrl: null,
  wash_certificate_pdf: null,
  status: null,
  data: [],
}

const functions = {
  async load() {
    await getBooking();
  },
  getId() {
    return this.id;
  },
  isWashCertificatePending() {
    return this.washCertificateStatus === "pending" && this.wash_certificate_pdf === null;
  },
  isWashCertificateCompleted() {
    return this.washCertificateStatus === "completed" || this.wash_certificate_pdf !== null;
  },
  isWashCompleted() {
    return this.status === "completed";
  },
  isWashCancelled() {
    return this.status === "cancelled";
  },
  isLoaded() {
    return this.getId() !== null;
  },
  hasNotes() {
    return this.notes !== null && this.notes !== '';
  },
  hasData() {
    return this.data.length > 0;
  },
}
const booking = ref({
  ...defaultBooking,
  ...functions,
});

const getBookingId = () => {
  return bookingId.value;
}

const getBooking = async () => {
  if (!getBookingId()) {
    return;
  }
  await SessionUser.objects.bookings.get.single(getBookingId()).then((response) => {
    booking.value = {
      ...defaultBooking,
      ...response,
      ...functions,
    };
  });
}

// Get the booking id from the url
const router = useRouter();
bookingId.value = router.currentRoute.value.params.bookingId;

watch(bookingId, () => {
  getBooking();
})

getBooking();
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
    <DepartmentDashboardPageWrapper
        title="Bookinger"
        subtitle="Udfyld booking"
    >
      <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
        <DepartmentBookingCertificateOverview v-bind:booking="booking" />
      </NotFoundFallBackPageWrapper>
    </DepartmentDashboardPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>