<script setup>
    import { onMounted, ref, watch } from 'vue';
    import {useCompanyStore} from '../stores/company';
    import {useAuthStore} from '../stores/auth';
    import Spiner from '../components/ui/Spiner.vue';
    import {getTypeCompany} from '../helpers/type_company'
    import {getDateMonthDay} from '../helpers/date_formats'
    import EditCompanyModal from '../components/ui/EditCompanyModal.vue';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

    const auth = useAuthStore()
    const company = useCompanyStore();
    const { user } = storeToRefs(auth);
    const { t } = useI18n()

    onMounted(() => {
        if(user.value) {
            getInitialData()
        }
    });

    watch(user, () => {
        if(user.value) {
            getInitialData();
        }
    })

    const getInitialData = async() => {
        await auth.authenticationPromise;
        // await authenticationPromise;
        await company.getCompanyData();
        console.log(company.company)

    }


</script>

<template>
    <EditCompanyModal v-if="company.loading === false"/>
    <div>
        <h2 class="title my-5">{{ t('company.title') }}</h2>
        <div class="card-info">
            <Spiner v-if="company.loading"/>
            <div v-else class="view">
                <div class="header-info">
                    <h2>{{ company.company?.company_name }}</h2>
                    <button
                        v-if="auth.user?.job_role === 'owner'"
                        class="btn-primary-sm"
                        data-toggle="modal" data-target="#editcompanymodal"
                    ><i class="fa-solid fa-pen-to-square"></i> {{ t('company.edit') }}</button>
                </div>
                <div class="divider mb-4"></div>
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <!-- <div class="item-company">
                            <span class="font-weight-bold">RFC: </span>
                            {{company.company?.rfc}}
                        </div> -->
                        <div class="item-company">
                            <span class="font-weight-bold">{{ t('labels.typeCompany') }}: </span>
                            {{getTypeCompany(company.company?.company_type)}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">{{ t('labels.codeId') }}: </span>
                            {{company.company?.company_code}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">{{ t('labels.dateMembership') }}: </span>
                            {{getDateMonthDay(company.company?.createAt)}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">{{ t('labels.segmentsCompany') }}: </span>
                            {{company.company?.categories.map((e) => e.name).join(', ')}}
                        </div>
                        <!-- <div class="item-company">
                            <span class="font-weight-bold">Afiliación: </span>
                            {{ company.company?.membership }}
                        </div> -->
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="item-company">
                            <span class="font-weight-bold">{{ t('labels.locationLoadState') }}: </span>
                            {{company.company?.company_state.map((e) => e).join(', ')}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">{{ t('labels.locationLoadCity') }}: </span>
                            {{company.company?.company_city.map((e) => e).join(', ')}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">{{ t('labels.truckUsed') }}: </span>
                            {{company.company?.truck_type.map((e) => e).join(', ')}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">{{ t('labels.infoCompany') }}: </span>
                            {{ company.company?.company_description }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .header-info {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .header-info h2 {
        font-size: 1.6rem;
        font-weight: 700;
    }
    .view {
        width: 100%;
    }

    .item-company {
        margin-bottom: 1rem;
        font-size: 1.2rem;
        color: #323030;
        /* font-weight: bold; */
    }

    .item-company span {
        font-weight: bold;
    }
</style>