<script setup>
    import Swal from 'sweetalert2';
    import { getDateMonthDay } from '../helpers/date_formats';
    import { useCompanyStore } from '../stores/company';
    import { useAuthStore } from '../stores/auth';

    const props = defineProps({
        user: {
            type: Object,
            required: true
        },
        readonly: {
            type: Boolean,
            required: false,
            default: true
        }
        
    })

    defineEmits(['set-user'])

    const companyStore = useCompanyStore();
    const authStore = useAuthStore();

    const handleDelete = async() => {
        Swal.fire({
            title: 'Eliminación de usuario!',
            text: '¿Estás seguro de eliminar este usuario?',
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: 'Eliminar',
            cancelButtonText: 'Cancelar',
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: 'Por favor espere!',
                    html: 'Elimininando usuario...',// add html attribute if you want or remove
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });
                const resp = await companyStore.deleteUserCompany(props.user._id)

                Swal.close()

                if(resp === 'success') {
                    Swal.fire({
                        title: "Usuario eliminado!",
                        text: "El usuario ha sido eliminado exitosamente.",
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: "No eliminado!",
                        text: "El usuario no se pudo eliminar, intente más tarde.",
                        icon: "error"
                    });
                }
            }

        });
    }
</script>

<template>
    <div class="card-fixed flex-column">
        <div class="row">
            <div class="col-lg-6 col-sm-12">
                <p><span>Nombre de usuario:</span>  {{user.first_name}} {{user.last_name}}</p>
                <p v-if="user.employee_id"><span class="font-weight-bold mr-1">Número de registro:</span> {{user.employee_id}}</p>
                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
                <p><span>Teléfono 1: </span>{{user.phone}}</p>
                <!-- <p><span>Teléfono 2: </span>{{user.phone2}}</p> -->
                <p><span>Email: </span>{{user.email}}</p>
            </div>
            <div class="col-lg-6 col-sm-12" v-if="readonly">
                <p><span>Segmento: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
                <p><span>Locaciones de carga por municipio: </span>{{user._user_city}}</p>
                <p><span>Locaciones de carga por estado: </span>{{user._user_state}}</p>
                <p v-if="user.company.truck_type"><span>Tipos de transporte que utiliza: </span> {{user._truck_type}}</p>
                <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
                <p ><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
            </div>
            <div class="col-lg-6 col-sm-12" v-else>
                <p><span>Segmento: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
                <p><span>Locaciones de carga por municipio: </span>{{user.user_city?.join(', ')}}</p>
                <p><span>Locaciones de carga por estado: </span>{{user.user_state?.join(', ')}}</p>
                <p v-if="user.truck_type"><span>Tipos de transporte que utiliza: </span> {{user.truck_type?.join(', ')}}</p>
                <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
                <p ><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
            </div>
        </div>
        <div class="btn-row" v-if="readonly === false && (authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager')">
            <button
                class="btn-primary-sm radius-sm"
                data-toggle="modal" 
                data-target="#userModal"
                @click="$emit('set-user')"
                ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
                <button
                class="btn btn-dark radius-sm"
                @click="handleDelete"
            ><i class="fa-solid fa-trash"></i> Eliminar</button>
        </div>
    </div>
</template>

<style scoped>
     p {
        font-size: 1rem;
        font-weight: 400;
        color: #323032;
    }
    
    p span {
        font-weight: 700;
    }

    @media (max-width: 768px) {

        p {
            font-size: 0.9rem;
            font-weight: 400;
            color: #323032;
        }
        p span {
            font-weight: 700;
        }
    }
</style>