<script setup>
    import { RouterLink } from 'vue-router';
    import { getDateMonthDay } from '../../../helpers/date_formats';
    import { useI18n } from 'vue-i18n';
    import Swal from 'sweetalert2';
    import { onMounted, ref } from 'vue';
    import { useAuthStore } from '../../../stores/auth';
    import { usePrivacyStore } from '../../../stores/privacy';

    const props = defineProps({
        company: {
            type: Object,
            required: true,
        }
    });
    
    const authStore = useAuthStore();
    const privacyStore = usePrivacyStore();
    const existInPrivateList = ref(false);

    onMounted(() => {
        const id = props.company._id;
        existInPrivateList.value = privacyStore.privateListRef.includes(id);
    })

    const handleAddPrivateList = async() => {
        Swal.fire({
            title: 'Lista privadad',
            text: '¿Estas seguro de añadir a este transportista de la lista privada?',
            icon: 'info',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: t('buttons.yes'),
            cancelButtonText: t('buttons.no'),
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: t('messages.loading'),
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });
                const response = await privacyStore.addCompanyToPrivateList(props.company._id);
                Swal.close();
                if(response === 'success') {
                    existInPrivateList.value = true;
                    Swal.fire({
                        title: 'Transportista añadido',
                        text: 'Se ha añadido este transportista a la lista privada',
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: response,
                        icon: "error"
                    });
                }
            }

        });

    }

    const { t } = useI18n()
</script>

<template>
    <div class="card-fixed flex-column">
        <h2>{{ company.company_name }}</h2>
        <div class="divider"></div>
        <div class="row mt-4">
            <div class="col-lg-6 col-sm-12">
                <p><span>{{ t('labels.codeId') }}:</span> {{ company.company_code }}</p>
                <p><span>{{ t('labels.dateMembership') }}: </span>{{getDateMonthDay(company.createdAt)}}</p>
                <p><span>{{ t('company.segment') }}:</span> {{ company._categories }}</p>
            </div>
            <div class="col-lg-6 col-sm-12">
                <p><span>{{ t('labels.locationLoadState') }}: </span>{{company._company_state}}</p>
                <p><span>{{ t('labels.locationLoadCity') }}: </span>{{company._company_city}}</p>
                <p><span>{{ t('labels.truckUsed') }}: </span>{{company._truck_types}}</p>
                <p><span>{{ t('labels.infoCompany') }}: </span>{{company.company_description}}</p>
            </div>
        </div>
        <div 
            class="d-flex justify-content-end gap-2"
            v-if="authStore.user?.permissions === 'role_shipper'">
            <button
                v-if="!existInPrivateList"
                class="btn-primary-sm bg-dark radius-sm"
                @click="handleAddPrivateList"
            >
                Añadir a lista privada
            </button>
            <RouterLink 
                class="btn-primary-sm radius-sm"
                :to="{name: 'public-users', params: {id: company._id}}"
            >{{ t('buttons.profile') }}</RouterLink>
        </div>
    </div>
</template>

<style scoped>

    h2{
        font-size: 1.5rem;
        font-weight: 800;
        color: #323030;
    }

    p {
        font-size: 1rem;
        font-weight: 400;
        color: #323032;
    }

    p span {
        font-weight: 700;
    }

    @media (max-width: 768px) {
        h2{
            font-size: 1.1rem;
            font-weight: 600;
            color: #323030;
        }


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