import { createComponent, useRouterLinkProps, useRouterLink, computed, h, QIcon, hMergeSlot, useAlignProps, useAlign, getNormalizedVNodes, hSlot } from './__federation_expose_Modules-a9c6a6fc.js';

const QBreadcrumbsEl = createComponent({
  name: 'QBreadcrumbsEl',

  props: {
    ...useRouterLinkProps,

    label: String,
    icon: String,

    tag: {
      type: String,
      default: 'span'
    }
  },

  emits: [ 'click' ],

  setup (props, { slots }) {
    const { linkTag, linkAttrs, linkClass, navigateOnClick } = useRouterLink();

    const data = computed(() => {
      return {
        class: 'q-breadcrumbs__el q-link '
          + 'flex inline items-center relative-position '
          + (props.disable !== true ? 'q-link--focusable' + linkClass.value : 'q-breadcrumbs__el--disable'),
        ...linkAttrs.value,
        onClick: navigateOnClick
      }
    });

    const iconClass = computed(() =>
      'q-breadcrumbs__el-icon'
      + (props.label !== void 0 ? ' q-breadcrumbs__el-icon--with-label' : '')
    );

    return () => {
      const child = [];

      props.icon !== void 0 && child.push(
        h(QIcon, {
          class: iconClass.value,
          name: props.icon
        })
      );

      props.label !== void 0 && child.push(props.label);

      return h(
        linkTag.value,
        { ...data.value },
        hMergeSlot(slots.default, child)
      )
    }
  }
});

const disabledValues = [ '', true ];

const QBreadcrumbs = createComponent({
  name: 'QBreadcrumbs',

  props: {
    ...useAlignProps,

    separator: {
      type: String,
      default: '/'
    },
    separatorColor: String,

    activeColor: {
      type: String,
      default: 'primary'
    },

    gutter: {
      type: String,
      validator: v => [ 'none', 'xs', 'sm', 'md', 'lg', 'xl' ].includes(v),
      default: 'sm'
    }
  },

  setup (props, { slots }) {
    const alignClass = useAlign(props);

    const classes = computed(() =>
      `flex items-center ${ alignClass.value }${ props.gutter === 'none' ? '' : ` q-gutter-${ props.gutter }` }`
    );

    const sepClass = computed(() => (props.separatorColor ? ` text-${ props.separatorColor }` : ''));
    const activeClass = computed(() => ` text-${ props.activeColor }`);

    return () => {
      const vnodes = getNormalizedVNodes(
        hSlot(slots.default)
      );

      if (vnodes.length === 0) { return }

      let els = 1;

      const
        child = [],
        len = vnodes.filter(c => c.type !== void 0 && c.type.name === 'QBreadcrumbsEl').length,
        separator = slots.separator !== void 0
          ? slots.separator
          : () => props.separator;

      vnodes.forEach(comp => {
        if (comp.type !== void 0 && comp.type.name === 'QBreadcrumbsEl') {
          const middle = els < len;
          const disabled = comp.props !== null && disabledValues.includes(comp.props.disable);
          const cls = (middle === true ? '' : ' q-breadcrumbs--last')
            + (disabled !== true && middle === true ? activeClass.value : '');

          els++;

          child.push(
            h('div', {
              class: `flex items-center${ cls }`
            }, [ comp ])
          );

          if (middle === true) {
            child.push(
              h('div', {
                class: 'q-breadcrumbs__separator' + sepClass.value
              }, separator())
            );
          }
        }
        else {
          child.push(comp);
        }
      });

      return h('div', {
        class: 'q-breadcrumbs'
      }, [
        h('div', { class: classes.value }, child)
      ])
    }
  }
});

export { QBreadcrumbs, QBreadcrumbsEl };
