<template>

  <div class="py-3 px-2">

    <ul class="nav nav-pills flex-column mb-auto ps-0" data-test="step-sidebar">

      <li v-for="(step, n) in sidebarItems" :class="{ active: selectedId === step.id, disabled: selectedId !== step.id }"
          :data-test="'step-sidebar-' + step.id">
        <strong v-if="selectedId !== step.id && value.includes(step.id)" class="nav-link text-success">
          <itf-icon :name="step['sidebar-icon'] || 'check_circle'"></itf-icon>
          {{step['sidebar-title']}}
        </strong>
        <a href="" v-else @click.prevent="" class="nav-link">
          <itf-icon :name="step['sidebar-icon'] || 'circle'"></itf-icon>
          {{step['sidebar-title']}}
        </a>
      </li>
    </ul>

  </div>

</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';

export default @Component({
  name: 'itfWizardSidebar',
  components: {
    itfIcon
  },
})
class itfWizardSidebar extends Vue {
  @Prop(Array) steps;
  @Prop(Array) value;
  @Prop() selectedId;

  get sidebarItems() {
    return this.steps.map((step) => {
      return {
        ...step.componentOptions.propsData,
        ...step.data.attrs,
      };
    }).filter((step) => typeof step.sidebar !== 'undefined' && step.sidebar !== false);
  }
}
</script>
