<script setup>
import Swal from 'sweetalert2';
import { getDateMonthDay } from '../helpers/date_formats';

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

    defineEmits(['set-user'])

    const handleDelete = () => {
        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()
                    },
                });
                let resp = 'success';

                setTimeout(() => {
                    Swal.close()
                    if(resp !== null) {
                        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"
                        });
                    }
                }, 5000)
                // const resp = await companyStore.deleteBudgetCompany(props.budget._id);
            }

        });
    }
</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.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>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">
                <p><span>Segmento: </span>{{user._categories}}</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_types}}</p>
                <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
                <p><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
                <p ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
            </div>
        </div>
        <div class="btn-row" v-if="readonly === false">
            <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>