<script setup>
    import { onMounted, ref } from 'vue';
    import Spiner from '../components/ui/Spiner.vue';
    import CardUser from '../components/CardUser.vue';
    import { useCompanyStore } from '../stores/company';
    import CreateUserModal from '../components/CreateUserModal.vue';

    const companyStore = useCompanyStore();

    onMounted(() => {
        getInitData();
    });

    const currentUser = ref(null);
    const openModal = ref(false);

    const getInitData = async() => {
        console.log('callll')
        loading.value = true;
        await companyStore.getUsersCompany();
        loading.value = false;
    }

    const loading = ref(false);

    const handleSetCurrentUser = (user) => {
        openModal.value = true;
        currentUser.value = user;
    }

    const handleResetCurrentUser = () => {
        openModal.value = false;
        currentUser.value = null;
    }

</script>

<template>
    <CreateUserModal
        v-if="openModal === true"
        :user="currentUser"
        @reset-user="handleResetCurrentUser"
    />
    <div>
        <h2 class="title mb-4">Usuarios</h2>
        <div class="btn-row mb-4">
            <button
                class="btn-primary-sm"
                data-toggle="modal" 
                data-target="#userModal"
                @click="handleSetCurrentUser(null)"
            >
                <i class="fa-solid fa-plus"></i> Agregar usuario
            </button>
        </div>
        <Spiner v-if="loading"/>
        <div v-else>
            <CardUser
                v-for="user in companyStore.users"
                :user="user"
                :readonly="false"
                @set-user="handleSetCurrentUser(user)"
            />
        </div>
    </div>
</template>

<style scoped>

</style>