<template>
  <button
    type="button"
    class="vm-aside-list-item"
    :class="{
      'is-active': active,
      'has-arrow': active && showArrow,
    }"
    @click="emit('click', $event)"
  >
    <span class="vm-aside-list-item__body">
      <span class="vm-aside-list-item__title">
        <slot />
      </span>
      <span v-if="subtitle || $slots.subtitle" class="vm-aside-list-item__sub">
        <slot name="subtitle">{{ subtitle }}</slot>
      </span>
    </span>
    <span v-if="$slots.ops" class="vm-aside-list-item__ops" @click.stop>
      <slot name="ops" />
    </span>
    <i v-if="active && showArrow" class="ri-arrow-right-s-line vm-aside-list-item__arrow" />
  </button>
</template>

<script setup lang="ts">
defineOptions({ name: 'vm-aside-list-item' })

withDefaults(
  defineProps<{
    active?: boolean
    subtitle?: string
    showArrow?: boolean
  }>(),
  {
    active: false,
    showArrow: true,
  },
)

const emit = defineEmits<{
  click: [e: MouseEvent]
}>()
</script>

<style lang="scss" scoped>
.vm-aside-list-item {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;

  &.has-arrow {
    padding-right: 28px;
  }

  &:hover {
    background: color-mix(in srgb, var(--brand) 8%, transparent);

    .vm-aside-list-item__ops {
      opacity: 1;
    }
  }

  &.is-active {
    background: var(--brand);
    color: #fff;

    .vm-aside-list-item__sub {
      color: color-mix(in srgb, #fff 75%, transparent);
    }

    :deep(.vm-aside__icon-btn),
    :deep(.vm-icon-btn) {
      color: #fff;

      &:hover:not(:disabled) {
        background: color-mix(in srgb, #fff 18%, transparent);
      }

      &.is-danger:hover:not(:disabled) {
        background: color-mix(in srgb, #fff 22%, transparent);
      }
    }
  }
}

.vm-aside-list-item__body {
  flex: 1;
  min-width: 0;
}

.vm-aside-list-item__title {
  display: block;
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vm-aside-list-item__sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-style: normal;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vm-aside-list-item__ops {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.vm-aside-list-item__arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  font-size: 16px;
  transform: translateY(-50%);
}
</style>
