<template>
  <div>
    <!-- <q-breadcrumbs
      v-if="displayBreadcrumbs != null"
      class="q-mb-xs"
      active-color="violet-normal"
      :class="$q.screen.lt.sm ? '' : 'q-pl-lg'"
    >
      <q-breadcrumbs-el
        v-for="crumb in displayBreadcrumbs"
        :key="crumb.name || crumb.label"
        :label="crumb.title"
        :to="crumb.name ? { name: crumb.name, params: crumb.params } : null"
      />
    </q-breadcrumbs> -->
    <!-- <div
      v-else
      style="max-width: 180px"
      :class="$q.screen.lt.sm ? '' : 'q-pl-lg'"
    >
      <q-skeleton type="text" />
    </div> -->

    <div class="flex items-center justify-between">
      <div class="row items-center no-wrap" :class="$q.screen.lt.sm ? '' : 'q-pt-md'">
        <q-btn
          v-if="showBack"
          flat
          round
          dense
          icon="mdi-arrow-left"
          color="violet-normal"
          class="q-mr-xs"
          @click="router.back()"
        />
        <div class="column q-pl-xs">
          <span v-if="displayTitle" class="text-h4 text-violet-normal q-mb-xs">
            {{ displayTitle }}
          </span>
          <div v-else style="width: 280px">
            <q-skeleton type="text" height="40px" />
          </div>
          <!-- <span v-if="displayDescription != null" class="text-body2">
            {{ displayDescription }}
          </span> -->
          <!-- <div v-else style="width: 380px">
            <q-skeleton type="text" height="20px" />
          </div> -->
        </div>
      </div>
      <div>
        <slot name="after" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const { title } = defineProps({
  title: {
    type: Object,
    default: null,
  },
  description: {
    type: Object,
    default: null,
  },
  breadcrumbs: {
    type: Object,
    default: null,
  },
});

const route  = useRoute();
const router = useRouter();
const { t }  = useI18n();

const showBack = computed(() => (route.meta?.breadcrumbs?.length ?? 0) > 1);

const displayTitle = computed(() => {
  if (title) {
    if (title.translate) {
      return t(title.value);
    } else {
      return title.value;
    }
  } else if (route.meta?.title) {
    if (route.meta?.title.translate) {
      return t(route.meta?.title.value);
    } else {
      return route.meta?.title.value;
    }
  }
  return null;
});

// const displayDescription = computed(() => {
//   if (description) {
//     if (description.translate) {
//       return t(description.value);
//     } else {
//       return description.value;
//     }
//   } else if (route.meta?.description) {
//     if (route.meta?.description.translate) {
//       return t(route.meta?.description.value);
//     } else {
//       return route.meta?.description.value;
//     }
//   }
//   return null;
// });

// const displayBreadcrumbs = computed(() => {
//   if (!breadcrumbs && breadcrumbs?.length <= 0) {
//     return null;
//   } else if (breadcrumbs && breadcrumbs?.length > 0) {
//     return (breadcrumbs || []).map((b) => {
//       if (b.translate) {
//         return t(b.title);
//       } else {
//         return b.title;
//       }
//     });
//   }
//   if (!route.meta?.breadcrumbs && route.meta?.breadcrumbs?.length <= 0) {
//     return null;
//   } else if (route.meta?.breadcrumbs && route.meta?.breadcrumbs?.length > 0) {
//     return (route.meta?.breadcrumbs || []).map((b) => {
//       if (b.translate) {
//         return {
//           ...b,
//           title: t(b.title),
//         };
//       } else {
//         return {
//           ...b,
//           title: b.title,
//         };
//       }
//     });
//   }
//   return null;
// });
</script>
