<script setup>
    import Swal from 'sweetalert2';
    import { useCompanyStore } from '../stores/company';
    import { useAuthStore } from '../stores/auth';
    import { useI18n } from 'vue-i18n';

    const props = defineProps({
        location: {
            type: Object,
            required: true
        }
    })

    defineEmits(['set-location'])
    
    const companyStore = useCompanyStore();
    const authStore = useAuthStore();
    const { t } = useI18n();

    const handleDeleteLocation = async() => {
        Swal.fire({
            title: t('directory.titleDel'),
            text: t('directory.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('directory.loadingDel') + '..',// add html attribute if you want or remove
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });

                const resp = await companyStore.deleteLocationCompany(props.location._id)

                Swal.close();
                
                if(resp != null) {
                    Swal.fire({
                        title: t('directory.msgTitleDel'),
                        text: t('directory.msgDel'),
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: t('errors.msgTitleNotDel'),
                        text: t('directory.msgNotDel'),
                        icon: "error"
                    });
                }
            }

        });

    }
</script>

<template>
    <div class="card-fixed card-location">
        <div>
            <p><span>{{ t('directory.name') }}:</span> {{location.branch_name}}</p>
            <p><span>{{ t('directory.address') }}:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
            <p><span>{{ t('labels.phone') }}:</span> {{location.phone}}</p>
            <p><span>{{ t('directory.typeTruckNeed') }}:</span> {{location.truck_type?.map((e) => e).join(', ')}}</p>
            <p><span>{{ t('global.segments') }}:</span> {{location.categories?.map((e) => e.name).join(', ')}}</p>
            <p v-if="location.description"><span>{{ t('directory.additionalInfoLocation') }}:</span></p>
            <div v-if="location.description" class="box-note mb-4">
                {{ location.description }}
            </div>
        </div>
        <div class="card-footer" v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'">
            <button 
                class="btn btn-dark radius-sm"
                @click="handleDeleteLocation"
            >
                <i class="fa-solid fa-trash" /> <span class="clear-xsm">{{ t('buttons.delete') }}</span>
            </button>
            <button 
                class="btn-primary-sm radius-sm"
                @click="$emit('set-location')"
                data-toggle="modal" data-target="#locationFormModal"
            >
                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">{{ t('buttons.edit') }}</span>
            </button>
        </div>
    </div>
</template>

<style scoped>
    .card-location {
        flex-direction: column;
    }

    .card-footer {
        display: flex;
        justify-content: end;
        gap: 1rem;
    }

    .box-note {
        padding: 12px 16px;
        background-color: aqua;
        border-radius: 13px;
    }

    p {
        font-size: 1rem;
        font-weight: normal;
    }

    p span {
        font-weight: bold;
    }
</style>