<template>
    <v-combobox
            :items="involvements"
            v-model="user.email"
            @update:search-input="emailSelected($event)"
            label="email address"
            item-text="user.email"
            item-value="email"
    ></v-combobox>
</template>

<script>
    import PhoneNumber from '@/components/phone-number';

    export default {
        props: {
            corporate: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            user: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },

        computed: {
            /**
             * Only Active involvements
             *
             * @returns {*}
             */
            involvements() {
                return this.corporate.involvements.filter(involvement => involvement.user && involvement.user.id)
            }
        },

        methods: {
            emailSelected(event) {
                if (typeof event === 'object') {
                    this.$set(this.user, 'title', event.user.title);
                    this.$set(this.user, 'first_name', event.user.first_name);
                    this.$set(this.user, 'last_name', event.user.last_name);
                    this.$set(this.user, 'email', event.user.email);
                    this.$set(this.user, 'id', event.user_id);
                    this.$set(this.user, 'existed', true);
                } else {
                    this.$set(this.user, 'email', event);
                }
            }
        },

        components: {PhoneNumber},

        watch: {
            user: {
                handler(val){
                    console.log(val);
                    // do stuff
                },
                deep: true
            }
        }
    }
</script>

<style scoped>

</style>