<script setup>
    import { onMounted, reactive, ref } from 'vue';
    import Spiner from '../ui/Spiner.vue';
    import Cities from './Cities.vue';
    import NotificationBadge from './NotificationBadge.vue';
    import Segments from './Segments.vue';
    import States from './States.vue';
    import TruckTypes from './TruckTypes.vue';
    import Custominput from './custominput.vue';
    import { useCompanyStore } from '../../stores/company';

    const companyStore = useCompanyStore()

    console.log(companyStore.company?.categories);

    const loading = ref(false);
    const msgError = ref('');
    const msgSuccess = ref('');
    const companyCategories = ref([]);
    const companyStates = ref([]);
    const companyCity = ref([]);
    const companyTruckType = ref([]);

    onMounted(() => {
        console.log('EditCompanyModal');
        if(companyStore.company){
			companyCategories.value = companyStore.company.categories.map(m =>{
				return { name: m.name };
			});
		}
        if(companyStore.company){
			companyStates.value = companyStore.company.company_state.map(m =>{
				return { state_name: m };
			});
		}
        if(companyStore.company){
			companyCity.value = companyStore.company.company_city.map(m =>{
				return { city_name: m };
			});
		}
        if(companyStore.company){
			companyTruckType.value = companyStore.company.truck_type.map(m =>{
				return { meta_value: m };
			});
		}
    })
    const company = reactive({
        typeCompany: '',
        // segments: [{
        //     createdAt: "2022-08-25T05:14:35.906Z",
        //     name:"AGRICOLA",
        //     updatedAt: "2022-08-25T05:16:35.603Z",
        //     __v: 0,
        //     _id: "6307053bbf4a7b12a4dca8c9"
        // }],
        segments: companyCategories,
        states: companyStates,
        cities: companyCity,
        truckTypes: companyTruckType,
        description: companyStore.company?.company_description ?? '',
    });

    const handleSave = () => {

    }

</script>

<template>
   <div class="modal fade" id="editcompanymodal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h2 class="title mt-2 mb-3">Editar Empresa</h2>
                <button type="button" class="close bg-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form @submit.prevent="handleSave" class="view-form">
                    <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
                    <div class="mb-4 mt-3">
                        <label class="custom-label">Segmento de la empresa</label>
                        <Segments
                            v-model="company.segments" 
                            :multiple="true"
                        />
                    </div>
                    <div class="mb-4">
                        <label class="custom-label">Ubicaciones de carga por estado</label>
                        <States
                            v-model="company.states"
                            :multiple="true"
                        />
                    </div>
                    <div class="mb-4">
                        <label class="custom-label">Ubicaciones de carga por municipio</label>
                        <Cities 
                            v-model="company.cities"
                            :multiple="true"
                        />
                    </div>
                    <div class="mb-4">
                        <label class="custom-label">Tipo de transportes que utiliza</label>
                        <TruckTypes 
                            v-model="company.truckTypes"
                            :multiple="true"
                        />
                    </div>
                    <Custominput
                        label="Descripción de la empresa:"
                        type="text"
                        name="description"
                        :filled="false"
                        v-model:field="company.description"
                    />

                    <input type="submit" value="Cuardar cambios" class="btn-primary-lg btn-lg-block my-4">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-dark" data-dismiss="modal">Cerrar</button>
            </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    /* .modal-width{
        width: 1500px !important;
    } */

    .view-form {
        padding: 1rem 4rem;
    }
</style>