import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'MenuPageItem',
  props: {
    item: { type: Object, required: true },
    selected: { type: Boolean, default: false },
    depth: { type: Number, default: 0 },
    variant: { type: String, required: true },
  },
  emits: ['select', 'edit', 'delete', 'open'],
  setup(props, { emit }) {
    const showGrip = computed(() => props.variant === 'menu');

    const displayPath = (path?: string) => {
      if (!path) return '-';
      return path.startsWith('/') ? path : '/' + path;
    };

    return {
      showGrip,
      displayPath,
      emitSelect: () => emit('select', props.item.__key),
      emitEdit: () => emit('edit', props.item.__key),
      emitDelete: () => emit('delete', props.item.__key),
      emitOpen: () => emit('open', props.item.__key),
    };
  },
});