<template>
  <li class="list-group-item" :class="classes" @click="onClick()">
    <slot :item="localItem"></slot>
  </li>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const props = defineProps({
  item: [Object, String],
  disabled: {
    type: Boolean,
    default: false,
  },
  clickable: {
    type: Boolean,
    default: false,
  },
  clickDelay: {
    type: Number,
    default: 300,
  },
});
const emit = defineEmits(['click']);

const isActive = ref(false);
const localItem = computed<any>(() => props.item || ({} as any));

const classes = computed(() => {
  let result = '';
  if (props.clickable && !props.disabled) {
    result += 'clickable ';
  }
  if (isActive.value) {
    result += 'active ';
  }
  if (props.disabled) {
    result += 'disabled ';
  }
  return result.trim();
});

const onClick = () => {
  if (props.clickable && !props.disabled) {
    isActive.value = true;
    setTimeout(() => {
      emit('click', props.item);
      isActive.value = false;
    }, props.clickDelay);
  }
};
</script>

<style lang="scss">
.list-group-item {
  &.clickable {
    cursor: pointer;
  }
}
</style>
