<template>
  <div class="q-pa-sm">
    <q-breadcrumbs
      v-if="displayBreadcrumbs != null"
      class="q-mb-xs text-secondary flex items-center"
      :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="flex items-center q-pl-xs"
        :class="$q.screen.lt.sm ? '' : 'q-pt-md'"
      >
        <span v-if="title" class="text-h6 text-primary text-weight-regular">
          {{ title }}
        </span>
        <div v-else style="width: 280px">
          <q-skeleton type="text" height="40px" />
        </div>
        <q-icon
          v-if="showFilterIcon"
          name="mdi-filter-outline"
          :color="filterOpen ? 'background' : 'primary'"
          size="sm"
          class="q-ml-sm cursor-pointer"
          :class="filterOpen ? 'bg-primary' : ''"
          :style="
            filterOpen
              ? 'border-radius: 8px; padding: 2px'
              : 'border-radius: 8px; padding: 2px; border: 1.5px solid var(--q-primary)'
          "
          @click="$emit('show-filter')"
        />
      </div>
      <div
        class="flex items-center q-pr-sm"
        :class="$q.screen.lt.sm ? '' : 'q-pt-md'"
      >
        <div class="flex items-center no-wrap" style="gap: 12px">
          <div
            class="flex items-center no-wrap q-gutter-x-md q-px-sm q-ml-md"
            style="flex-shrink: 0"
          >
            <q-img src="icons/user-icon.jpg" class="avatar-circle" />

            <div
              v-if="$q.screen.gt.xs"
              class="column q-gutter-y-none"
              style="white-space: nowrap"
            >
              <span class="text-body2 text-center">{{ user?.name }}</span>
            </div>
          </div>

          <template v-if="$q.screen.gt.sm && lastLoginFormatted">
            <q-separator
              vertical
              style="height: 36px; width: 2px; flex-shrink: 0"
              color="dark"
            />

            <div
              class="column"
              style="line-height: 1.2; white-space: nowrap; flex-shrink: 0"
            >
              <span class="text-caption text-grey-6 text-primary text-center"
                >Ultimo acesso</span
              >
              <span class="text-caption text-primary text-center">{{
                lastLoginFormatted
              }}</span>
            </div>
          </template>

          <div
            class="flex items-center no-wrap"
            style="gap: 2px; flex-shrink: 0"
          >
            <q-btn flat round dense icon="mdi-bell-badge" color="secondary" />
            <q-btn flat round dense icon="mdi-account" color="secondary" />
            <q-btn flat round dense icon="mdi-cog-outline" color="secondary" />
          </div>
        </div>
        <slot name="after" />
      </div>
    </div>
    <q-separator class="q-my-sm" />
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { userStore } from "src/stores/user";

const { title, breadcrumbs, filterOpen, showFilterIcon } = defineProps({
  title: {
    type: String,
    default: null,
  },
  breadcrumbs: {
    type: Object,
    default: null,
  },
  filterOpen: {
    type: Boolean,
    default: false,
  },
  showFilterIcon: {
    type: Boolean,
    default: true,
  },
});

defineEmits(["show-filter"]);

const store = userStore();
const user = computed(() => store.user);

const lastLoginFormatted = computed(() => {
  const raw = store.user?.last_login_at;
  if (!raw) return null;
  const d = new Date(raw.replace(" ", "T") + "Z");
  return new Intl.DateTimeFormat("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    timeZone: "America/Sao_Paulo",
  }).format(d);
});

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

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>

<style scoped>
.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
</style>
