<script setup lang="ts">
import { useShoppingListStore } from '../store/shoppingList';
import { ref, reactive, defineProps } from 'vue';
import { useRouter } from 'vue-router';

const store = useShoppingListStore();
const router = useRouter();

const props = defineProps({
  item: Object,
});

const isValid = ref(false);
const item = reactive({
  name: props.item.name,
  price: props.item.price / 100,
  user: props.item.user.name,
});

const form = ref(null);

const submit = () => {
  props.item.name = item.name;
  props.item.price = item.price * 100;
  props.item.user = store.users.find(user => user.name === item.user);
  router.push('/shopping-list');
};
</script>

<template>
  <v-form ref="form" v-model="isValid" lazy-validation>
    <v-text-field
      label="Item Name"
      required
      v-model="item.name"
    />
    <v-text-field
      label="Price"
      suffix="€"
      required
      v-model="item.price"
    />
    <v-select
      label="User"
      :items="store.users.map(user => user.name)"
      required
      v-model="item.user"
    />
    <v-btn color="primary" @click="submit()">edit item</v-btn>
  </v-form>
</template>
