<script setup lang="ts">
import type { TransactionCategoryTree } from '@/api/transaction'
import AppButton from './common/AppButton.vue'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getSelectedProfile } from '@/api/profile'

const route = useRoute()

const props = defineProps<{
  category: TransactionCategoryTree
  editable: boolean
}>()
defineEmits<{
  edited: [number]
  deleted: [number]
}>()
const expanded = ref(false)
const canExpand = computed(() => props.category.children.length > 0)
</script>
<template>
  <div
    class="category-display-item"
    :class="{
      'category-display-item-bg-1': category.depth % 2 === 0,
      'category-display-item-bg-2': category.depth % 2 === 1,
    }"
  >
    <div class="category-display-item-content">
      <div>
        <h4 class="category-display-item-title">
          <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${category.id}`"
            >{{ category.name }}
          </RouterLink>
        </h4>
        <p class="category-display-item-description">{{ category.description }}</p>
      </div>
      <div
        class="category-display-item-color-indicator"
        :style="{ 'background-color': '#' + category.color }"
      ></div>
    </div>
    <div
      v-if="editable"
      style="text-align: right"
    >
      <AppButton
        icon="chevron-down"
        v-if="canExpand && !expanded"
        @click="expanded = true"
      />
      <AppButton
        icon="chevron-up"
        v-if="canExpand && expanded"
        @click="expanded = false"
      />
      <AppButton
        icon="wrench"
        @click="$emit('edited', category.id)"
      />
      <AppButton
        icon="trash"
        @click="$emit('deleted', category.id)"
      />
    </div>
    <!-- Nested display item for each child: -->
    <div
      style="margin-left: 1rem"
      v-if="canExpand && expanded"
    >
      <CategoryDisplayItem
        v-for="child in category.children"
        :key="child.id"
        :category="child"
        :editable="editable"
        @edited="(c) => $emit('edited', c)"
        @deleted="(c) => $emit('deleted', c)"
      />
    </div>
  </div>
</template>
<style lang="css">
.category-display-item {
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  border-radius: 1rem;
}

.category-display-item-content {
  display: flex;
  justify-content: space-between;
}

.category-display-item-title {
  margin: 0;
}

.category-display-item-description {
  margin-top: 0.25rem;
  margin-bottom: 0;
  font-size: 14px;
}

.category-display-item-color-indicator {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0.25rem solid black;
}

.category-display-item-bg-1 {
  background-color: var(--bg);
}

.category-display-item-bg-2 {
  background-color: var(--bg-lighter);
}
</style>
