<template>
  <div
    v-if="state"
    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
  >
    <slot
      :items="state.items"
      :can-refine="state.canRefine"
      :refine="state.refine"
      :createURL="state.createURL"
    >
      <ul :class="suit('list')">
        <li
          :class="[
            suit('item'),
            !state.items.length && suit('item', 'selected'),
          ]"
        >
          <a
            v-if="Boolean(state.items.length)"
            :href="state.createURL()"
            :class="suit('link')"
            @click.exact.left.prevent="state.refine()"
          >
            <slot name="rootLabel">Home</slot>
          </a>
          <a
            v-else
            :href="state.createURL(null)"
            :class="suit('link')"
            @click.exact.left.prevent="state.refine(null)"
          >
            <slot name="rootLabel">Home</slot>
          </a>
        </li>
        <li
          v-for="(item, index) in state.items"
          :key="item.label"
          :class="[suit('item'), isLastItem(index) && suit('item', 'selected')]"
        >
          <span :class="suit('separator')" aria-hidden="true">
            <slot name="separator">></slot> </span
          ><a
            v-if="!isLastItem(index)"
            :href="state.createURL(item.value)"
            :class="suit('link')"
            @click.exact.left.prevent="state.refine(item.value)"
            >{{ item.label }}</a
          >
          <template v-else>{{ item.label }}</template>
        </li>
      </ul>
    </slot>
  </div>
</template>

<script>
import { connectBreadcrumb } from 'instantsearch.js/es/connectors/index.umd';

import { createPanelConsumerMixin } from '../mixins/panel';
import { createSuitMixin } from '../mixins/suit';
import { createWidgetMixin } from '../mixins/widget';

export default {
  name: 'AisBreadcrumb',
  mixins: [
    createWidgetMixin(
      {
        connector: connectBreadcrumb,
      },
      {
        $$widgetType: 'ais.breadcrumb',
      }
    ),
    createPanelConsumerMixin(),
    createSuitMixin({ name: 'Breadcrumb' }),
  ],
  props: {
    attributes: {
      type: Array,
      required: true,
    },
    separator: {
      type: String,
      default: undefined,
    },
    rootPath: {
      type: String,
      default: undefined,
    },
    transformItems: {
      type: Function,
      default: undefined,
    },
  },
  computed: {
    widgetParams() {
      return {
        attributes: this.attributes,
        separator: this.separator,
        rootPath: this.rootPath,
        transformItems: this.transformItems,
      };
    },
  },
  methods: {
    isLastItem(index) {
      return this.state.items.length - 1 === index;
    },
  },
};
</script>
