<script setup lang="ts">
import { computed } from 'vue';
import {
  Item,
  ItemAction,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from '@/components/core/item';
import { UiButton } from '@/components/UiButton';
import { UiIcon } from '@/components/UiIcon';
import type { UiItemEmits, UiItemProps } from './types';

defineOptions({
  name: 'UiItem',
});

const props = withDefaults(defineProps<UiItemProps>(), {
  variant: 'default',
  size: 'default',
  asChild: false,
  withListSemantics: false,
});
const emit = defineEmits<UiItemEmits>();

const itemDescription = computed(() => props.description ?? props.desc);
const defaultActionSize = computed(() =>
  props.size === 'minimal' ? 'icon-xs' : 'icon-sm',
);
const defaultActionClass = computed(() =>
  props.variant === 'hover-action'
    ? undefined
    : 'hover:bg-transparent active:bg-transparent',
);

function onDefaultActionClick(event: MouseEvent) {
  emit('action', event);
}
</script>

<template>
  <Item
    :variant="props.variant"
    :size="props.size"
    :as-child="props.asChild"
    :with-list-semantics="props.withListSemantics"
  >
    <slot>
      <ItemMedia v-if="$slots.icon" variant="icon">
        <slot name="icon" />
      </ItemMedia>

      <ItemContent v-if="props.title || itemDescription || $slots.content">
        <ItemTitle v-if="props.title">
          {{ props.title }}
        </ItemTitle>
        <ItemDescription v-if="props.size !== 'minimal' && itemDescription">
          {{ itemDescription }}
        </ItemDescription>
        <slot name="content" />
      </ItemContent>

      <ItemAction
        v-if="$slots.action || props.title || itemDescription || $slots.content"
      >
        <slot name="action">
          <UiButton
            variant="ghost"
            :size="defaultActionSize"
            aria-label="More actions"
            :class="defaultActionClass"
            @click="onDefaultActionClick"
          >
            <UiIcon name="more-vertical" />
          </UiButton>
        </slot>
      </ItemAction>
    </slot>
  </Item>
</template>
