<script setup lang="ts">
import { defineProps } from 'vue';
import { groupItemsByUser } from '../store/shoppingList';

defineProps({
  items: Array,
});
</script>

<template>
  <v-list v-if="items.length" lines="theee" select-strategy="multiple">
    <div v-for="(items, user) of groupItemsByUser(items)">
      <v-list-subheader>{{ user }}</v-list-subheader>
      <div v-for="item in items">
        <v-list-item @click="item.isBought = !item.isBought">
          <v-list-item-title>{{ item.name }}</v-list-item-title>
          <v-list-item-subtitle>{{ item.price / 100 }} €</v-list-item-subtitle>
        </v-list-item>
      </div>
    </div>
  </v-list>
  <p v-else>There are no items in this list.</p>
</template>
