<template>
  <a :class="tabClasses" @click="onTabClick" :style="getBlockInlineStyles">
    <div class="d-flex">
      <div class="avatar-xs me-3">
        <span
          class="
            avatar-title
            rounded-circle
            font-size-16
            notification-avatar-2
            bg-primary bg-soft
            text-primary
          "
          >
          <!-- <i :class="tabIconClasses"></i> -->
          <Icon :icon="detail.icon" />
      </span>
      </div>
      <div class="flex-grow-1">
        <h6 class="mb-1">{{ detail.label }}</h6>
        <div class="font-size-12 text-muted">
          <p class="mb-1">{{ detail.description }}</p>
        </div>
      </div>
    </div>
  </a>
</template>
<script>
import * as _ from 'lodash';
import { Icon } from '@iconify/vue';

export default {
  props: {
    detail: {
      type: Object,
      required: true,
    },
    index: {
      type: Number,
      required: true,
    },
    selectedTabIndex: {
      type: Number,
      required: true,
    },
    isEditMode: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    tabIconClasses() {
      return `bx ${this.detail.icon}`;
    },
    tabClasses() {
      let opacityClass = '';
      if (this.detail.label !== 'Details' && !this.isEditMode) {
        opacityClass = 'opacity-60';
      }
      return `text-reset notification-item d-block ${opacityClass}`;
    },
    getBlockInlineStyles() {
      if (this.index === this.selectedTabIndex) {
        return {
          'background-color':
            CURRENT_USER_DETAILS.is_dark_mode === 'True'
              ? '#32394e'
              : '#f6f6f6',
        };
      }
      return {};
    },
  },
  methods: {
    onTabClick() {
      if (this.isEditMode) {
        this.$emit('selectTabIndex', this.index);
      }
    },
  },
  components: {
    Icon
  },
};
</script>