<template>
  <AisLink v-if="href || to"
           class="ais-list-group-item relative block hover:!no-underline"
           :class="classes"
           :href="href"
           :to="to"
  >
    <slot name="default" :active="active">{{label}}</slot>
  </AisLink>

  <div v-else class="ais-list-group-item relative block" :class="classes" @click="handleClick">
    <slot name="default" :active="active">{{label}}</slot>
  </div>
</template>

<script setup>
  import { computed, inject } from "vue"
  import AisLink from "@/components/link/AisLink.vue";
  import { getBackgroundVariant } from "@/util/variants-util";
  import { classToArray } from "@/util/class-util";

  const activeClass = inject('activeClass', '')
  const itemClass = inject('itemClass', undefined)

  const props = defineProps({
    label: { type: String, default: () => '' },
    action: { type: Boolean, default: () => false },
    active: { type: Boolean, default: () => false },
    disabled: { type: Boolean, default: () => false },
    href: { type: String, default: () => '' },
    to: { type: String, default: () => '' },
    // activeClass: { type: String, default: () => '' },
    // variant: { type: String, default: () => '' },
  })

  const emit = defineEmits(['click'])

  const activeClasses = computed(() => props.activeClass ? props.activeClass : activeClass.value || '' )
  const classes = computed(() => {
    const classes = []

    if(props.disabled) {
      classes.push('disabled')
      return classes.join(' ')
    }

    if(itemClass && itemClass.value !== undefined)
      classes.push(...classToArray(itemClass.value))

    if(props.active)
      classes.push('active')
      // classes.push(activeClasses.value)

    if(props.action)
      classes.push('cursor-pointer')

    if(!props.active && (props.href || props.to || props.action))
      classes.push('hover:bg-ui-gray-50')

    if(props.variant)
      classes.push(getBackgroundVariant(props.variant))
    else
      classes.push('bg-white')

    return classes.join(' ')
  })

  const handleClick = (e) => {
    if(props.action)
      emit('click', e)
  }

</script>

<script>
export default {
  name: "AisListGroupItem"
}
</script>