<script setup>
    import { onMounted, reactive, ref } from 'vue';
    import { useAuthStore } from '../stores/auth';
    import Spiner from './ui/Spiner.vue';
    import CustomInput from './ui/CustomInput.vue';

    const auth = useAuthStore();

    const loading = ref(false)
    const user = reactive({
        // name: '',
        // lastName: '',
        // phone1: '',
        // phone2: '',
        name: auth.user?.first_name,  
        lastName: auth.user?.last_name,  
        phone1: auth.user?.phone,
        phone2: auth.user?.phone2,  
    })

    onMounted(() => {
      user.name = auth.user?.first_name  
      user.lastName = auth.user?.last_name  
      user.phone1 = auth.user?.phone
      user.phone2 = auth.user?.phone2  
    })

    const handleSave = () => {

    }
</script>

<template>
    <div class="modal fade" id="editProfileModal" tabindex="-1" role="dialog" aria-labelledby="editProfileModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="title mt-2 mb-3">Editar perfil</h2>
                    <button 
                        type="button" 
                        class="close bg-white" 
                        data-dismiss="modal" 
                        aria-label="Close"
                    >
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body form-content">
                    <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef">
                        <CustomInput
                            label="Nombres(s):"
                            type="text"
                            name="name"
                            :filled="false"
                            v-model:field="user.name"
                        />
                        <CustomInput
                            label="Apellidos(s):"
                            type="text"
                            name="lastname"
                            :filled="false"
                            v-model:field="user.lastName"
                        />
                        <CustomInput
                            label="Teléfono 1: *"
                            type="number"
                            name="phone1"
                            :step="1"
                            :filled="false"
                            v-model:field="user.phone1"
                        />
                        <CustomInput
                            label="Teléfono 2:"
                            type="number"
                            name="phone2"
                            :step="1"
                            :filled="false"
                            v-model:field="user.phone2"
                        />
                        <div class="mt-4 text-center">
                            <Spiner v-if="loading"/>
                            <button 
                                v-else
                                class="btn btn-dark" type="submit">Guardar</button>
                        </div> 
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .form-content {
        margin: 24px 12px;
    }
</style>