<template>
  <div class="notification-view">
    <MessageBlock v-if="notificationListCountRef === 0" message="No new notifications">
    </MessageBlock>

    <ItemList
      v-else
      :fetchUrl="`/api/pending-rewards`"
      itemKey="rewards"
      :itemFields="PENDING_REWARD_FIELDS"
      :imageFields="['child_image_id', 'reward_image_id']"
      @clicked="handleNotificationClick"
      @loading-complete="(count) => (notificationListCountRef = count)"
    >
      <template #item="{ item }">
        <div class="notification-centered">
          <div class="child-info">
            <img v-if="item.child_image_url" :src="item.child_image_url" alt="Child" />
            <span>{{ item.child_name }}</span>
          </div>
          <span class="requested-text">requested</span>
          <div class="reward-info">
            <span>{{ item.reward_name }}</span>
            <img v-if="item.reward_image_url" :src="item.reward_image_url" alt="Reward" />
          </div>
        </div>
      </template>
    </ItemList>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ItemList from '../shared/ItemList.vue'
import MessageBlock from '../shared/MessageBlock.vue'
import type { PendingReward } from '@/common/models'
import { PENDING_REWARD_FIELDS } from '@/common/models'

const router = useRouter()

const notificationListCountRef = ref(-1)

function handleNotificationClick(item: PendingReward) {
  router.push({ name: 'ParentView', params: { id: item.child_id } })
}
</script>

<style scoped>
.notification-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  padding: 0;
  min-height: 0;
}
.notification-centered {
  display: flex;
  justify-content: center;
  margin-inline: auto;
  align-items: center;
}
.child-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--dialog-child-name);
}

.reward-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0rem;
  font-weight: 600;
  color: var(--notification-reward-name);
}

.requested-text {
  margin: 0 0.7rem;
  font-weight: 500;
  color: var(--dialog-message);
  font-size: 1.05rem;
  white-space: nowrap;
}
</style>
