<script lang="ts" setup>
import type { BreadcrumbProps } from './types';

import { ChevronDown } from '@easyflow-core/icons';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '../../ui';
import { EasyFlowIcon } from '../icon';

interface Props extends BreadcrumbProps {}

defineOptions({ name: 'Breadcrumb' });
withDefaults(defineProps<Props>(), {
  showIcon: false,
});

const emit = defineEmits<{ select: [string] }>();

function handleClick(path?: string) {
  if (!path) {
    return;
  }
  emit('select', path);
}
</script>
<template>
  <Breadcrumb>
    <BreadcrumbList class="easyflow-breadcrumb flex-nowrap">
      <TransitionGroup name="breadcrumb-transition">
        <template
          v-for="(item, index) in breadcrumbs"
          :key="`${item.path}-${item.title}-${index}`"
        >
          <BreadcrumbItem>
            <div v-if="item.items?.length ?? 0 > 0">
              <DropdownMenu>
                <DropdownMenuTrigger class="easyflow-breadcrumb__link">
                  <EasyFlowIcon
                    v-if="showIcon"
                    :icon="item.icon"
                    class="size-4"
                  />
                  <span class="max-w-[180px] truncate">{{ item.title }}</span>
                  <ChevronDown class="size-3.5" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <template
                    v-for="menuItem in item.items"
                    :key="`sub-${menuItem.path}`"
                  >
                    <DropdownMenuItem @click.stop="handleClick(menuItem.path)">
                      {{ menuItem.title }}
                    </DropdownMenuItem>
                  </template>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
            <BreadcrumbLink
              v-else-if="index !== breadcrumbs.length - 1"
              class="easyflow-breadcrumb__link"
              href="javascript:void 0"
              @click.stop="handleClick(item.path)"
            >
              <div class="flex items-center">
                <EasyFlowIcon
                  v-if="showIcon"
                  :class="{ 'size-5': item.isHome }"
                  :icon="item.icon"
                  class="mr-1 size-4"
                />
                <span class="max-w-[180px] truncate">{{ item.title }}</span>
              </div>
            </BreadcrumbLink>
            <BreadcrumbPage v-else class="easyflow-breadcrumb__current">
              <div class="flex items-center">
                <EasyFlowIcon
                  v-if="showIcon"
                  :class="{ 'size-5': item.isHome }"
                  :icon="item.icon"
                  class="mr-1 size-4"
                />
                <span class="max-w-[220px] truncate">{{ item.title }}</span>
              </div>
            </BreadcrumbPage>
            <BreadcrumbSeparator
              v-if="index < breadcrumbs.length - 1 && !item.isHome"
              class="easyflow-breadcrumb__separator"
            />
          </BreadcrumbItem>
        </template>
      </TransitionGroup>
    </BreadcrumbList>
  </Breadcrumb>
</template>

<style scoped>
.easyflow-breadcrumb {
  gap: 4px;
  font-size: 13px;
  color: hsl(var(--breadcrumb-muted));
}

.easyflow-breadcrumb__link {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 4px 8px;
  color: hsl(var(--breadcrumb-muted));
  border-radius: 999px;
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    transform 0.16s ease;
}

.easyflow-breadcrumb__link:hover {
  color: hsl(var(--nav-item-active-foreground));
  background: hsl(var(--nav-item-hover) / 70%);
  transform: translateY(-0.5px);
}

.easyflow-breadcrumb__current {
  position: relative;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 4px 8px 6px;
  font-weight: 600;
  color: hsl(var(--breadcrumb-current));
  letter-spacing: 0.01em;
  isolation: isolate;
}

.easyflow-breadcrumb__current::before {
  position: absolute;
  inset: -8px -10px -2px;
  z-index: -1;
  content: '';
  background: linear-gradient(
    180deg,
    hsl(var(--nav-item-active) / 36%) 0%,
    hsl(var(--nav-item-active) / 18%) 42%,
    hsl(var(--glass-tint) / 8%) 82%,
    transparent 100%
  );
  border-radius: 14px 14px 10px 10px;
  box-shadow:
    inset 1px 0 0 hsl(var(--nav-border) / 54%),
    inset -1px 0 0 hsl(var(--nav-border) / 54%),
    inset 0 1px 0 hsl(var(--nav-sheen) / 68%),
    0 10px 22px -22px hsl(var(--primary) / 20%);
}

.easyflow-breadcrumb__current::after {
  position: absolute;
  right: -6px;
  bottom: 0;
  left: -6px;
  z-index: -1;
  height: 1px;
  content: '';
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--nav-item-active) / 20%) 22%,
    hsl(var(--nav-item-active) / 26%) 50%,
    hsl(var(--nav-item-active) / 20%) 78%,
    transparent
  );
  opacity: 0.72;
}

.easyflow-breadcrumb__separator {
  color: hsl(var(--breadcrumb-muted) / 72%);
}

.easyflow-breadcrumb__separator :deep(svg) {
  width: 12px;
  height: 12px;
}
</style>
