<script lang="ts" setup>
import type { BreadcrumbStyleType } from '@easyflow/types';

import type { IBreadcrumb } from '@easyflow-core/shadcn-ui';

import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { $t } from '@easyflow/locales';

import { EasyFlowBreadcrumbView } from '@easyflow-core/shadcn-ui';

interface Props {
  hideWhenOnlyOne?: boolean;
  showHome?: boolean;
  showIcon?: boolean;
  type?: BreadcrumbStyleType;
}

const props = withDefaults(defineProps<Props>(), {
  showHome: false,
  showIcon: false,
  type: 'normal',
});

const route = useRoute();
const router = useRouter();

function resolveNavTitle(navTitleQuery: unknown): string {
  const rawValue = Array.isArray(navTitleQuery)
    ? navTitleQuery[0]
    : navTitleQuery;
  if (typeof rawValue !== 'string' || !rawValue.trim()) {
    return '';
  }
  try {
    return decodeURIComponent(rawValue);
  } catch {
    return rawValue;
  }
}

const breadcrumbs = computed((): IBreadcrumb[] => {
  const matched = route.matched;
  const navTitle = resolveNavTitle(route.query.navTitle);

  if (navTitle) {
    const currentRoute = matched[matched.length - 1];
    return [
      {
        icon: currentRoute?.meta?.icon,
        path: currentRoute?.path || route.path,
        title: navTitle,
      },
    ];
  }

  const resultBreadcrumb: IBreadcrumb[] = [];

  for (const match of matched) {
    const { meta, path } = match;
    const { hideChildrenInMenu, hideInBreadcrumb, icon, name, title } =
      meta || {};
    if (hideInBreadcrumb || hideChildrenInMenu || !path) {
      continue;
    }

    resultBreadcrumb.push({
      icon,
      path: path || route.path,
      title: title ? $t((title || name) as string) : '',
    });
  }
  if (props.showHome) {
    resultBreadcrumb.unshift({
      icon: 'mdi:home-outline',
      isHome: true,
      path: '/',
    });
  }
  if (props.hideWhenOnlyOne && resultBreadcrumb.length === 1) {
    return [];
  }

  return resultBreadcrumb.slice(-2);
});

function handleSelect(path: string) {
  router.push(path);
}
</script>
<template>
  <EasyFlowBreadcrumbView
    :breadcrumbs="breadcrumbs"
    :show-icon="showIcon"
    :style-type="type"
    class="min-w-0"
    @select="handleSelect"
  />
</template>
