import { __assign } from 'tslib';
import { withThemeableProps } from '../../useThemeable.js';
import { classNamesFunction } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { getStyles } from './Breadcrumb.styles.js';
import { Link } from '../Link/Link.js';
import { Icon } from '../Icon/Icon.js';

var getClassNames = classNamesFunction();
var BreadcrumbBase = Vue.extend({
  name: "BreadcrumbBase",
  props: __assign(__assign({}, withThemeableProps()), { items: { type: Array, default: function() {
    return [];
  } } }),
  computed: {
    classNames: function() {
      var _a = this, className = _a.className, theme = _a.theme;
      return getClassNames(getStyles, {
        theme: theme,
        className: className
      });
    }
  },
  methods: {
    onBreadcrumbClicked: function(event, item) {
      if (item.onClick) {
        item.onClick(event, item);
      }
    }
  },
  render: function(h) {
    var _this = this;
    var _a = this, classNames = _a.classNames, items = _a.items;
    return h("div", { class: classNames.root, attrs: { role: "navigation" } }, [
      h("ol", { class: classNames.list }, items.map(function(item, index) {
        return h("li", {
          key: index,
          class: classNames.listItem
        }, [
          item.onClick || item.href ? h(Link, {
            class: classNames.itemLink,
            attrs: { href: item.href },
            on: {
              click: function(ev) {
                return _this.onBreadcrumbClicked(ev, item);
              }
            }
          }, item.text) : h("span", {
            class: classNames.item,
            on: {
              click: function(ev) {
                return _this.onBreadcrumbClicked(ev, item);
              }
            }
          }, item.text),
          index !== items.length - 1 && h(Icon, {
            key: "icon-".concat(index),
            class: classNames.chevron,
            attrs: {
              iconName: "ChevronRight"
            }
          })
        ]);
      }))
    ]);
  }
});

export { BreadcrumbBase };
