<script setup>
    import Swal from 'sweetalert2';
    import { getDateMonthDay } from '../helpers/date_formats';
    import { useCompanyStore } from '../stores/company';
    import { useAuthStore } from '../stores/auth';
    import { useI18n } from 'vue-i18n';
    
    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 { t } = useI18n()

    const handleDelete = async() => {
        Swal.fire({
            title: t('users.titleDel'),
            text: t('users.textDel'),
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: t('buttons.delete'),
            cancelButtonText: t('buttons.cancel'),
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: t('messages.loading'),
                    html: t('users.loadingDel') + '...',// 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: t('users.msgTitleDel'),
                        text: t('users.msgDel'),
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: t('users.msgTitleNotDel'),
                        text: t('users.msgNotDel'),
                        icon: "error"
                    });
                }
            }

        });
    }
</script>

<template>
    <div class="card-fixed flex-column">
        <div class="row">
            <div class="col-lg-6 col-sm-12">
                <p><span>{{ t('labels.names') }}:</span>  {{user.first_name}} {{user.last_name}}</p>
                <p v-if="user.employee_id"><span class="font-weight-bold mr-1">{{ t('labels.registryNumber') }}:</span> {{user.employee_id}}</p>
                <p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p>
                <p><span>{{ t('labels.phone1') }}: </span>{{user.phone}}</p>
                <!-- <p><span>Teléfono 2: </span>{{user.phone2}}</p> -->
                <p><span>{{ t('labels.email') }}: </span>{{user.email}}</p>
            </div>
            <div class="col-lg-6 col-sm-12" v-if="readonly">
                <p><span>{{ t('global.segments') }}: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
                <p><span>{{ t('labels.locationLoadCity') }}: </span>{{user._user_city}}</p>
                <p><span>{{ t('labels.locationLoadState') }}: </span>{{user._user_state}}</p>
                <p v-if="user.company.truck_type"><span>{{ t('labels.truckUsed') }}: </span> {{user._truck_type}}</p>
                <p ><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
                <p ><span>{{ t('labels.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
                <p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p>
            </div>
            <div class="col-lg-6 col-sm-12" v-else>
                <p><span>{{ t('global.segments') }}: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
                <p><span>{{ t('labels.locationLoadCity') }}: </span>{{user.user_city?.join(', ')}}</p>
                <p><span>{{ t('labels.locationLoadState') }}: </span>{{user.user_state?.join(', ')}}</p>
                <p v-if="user.truck_type"><span>{{ t('labels.truckUsed') }}: </span> {{user.truck_type?.join(', ')}}</p>
                <p ><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
                <p ><span>{{ t('labels.memberSince') }}: </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> {{ t('buttons.edit') }}</button>
                <button
                class="btn btn-dark radius-sm"
                @click="handleDelete"
            ><i class="fa-solid fa-trash"></i> {{ t('buttons.delete') }}</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>