<script setup>
    import { ref, onMounted } from 'vue';
    import CardEmpty from './CardEmpty.vue';
    import Spiner from './ui/Spiner.vue';
    import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map';
    import useDirectionsRender from '../composables/useDirectionRender';
    import Cardload from './CardLoad.vue';
    import { useLoadsStore } from '../stores/loads';
    import { useNotificationsStore } from '../stores/notifications';
    import { useI18n } from 'vue-i18n';

    const mapKey = import.meta.env.VITE_MAP_KEY;

    const zoom = ref(6);
    const heightMap = ref(768);
    const originCoords = ref(null);
    const polylines = ref([]);
    const destinationCoords = ref(null);
    const isLoading = ref(false);
    const windowWidth = ref(window.innerWidth);
    const load = ref(null);
    const vehicleLastLocation = ref(null);
    const isLoadActive = ref(false);

    const { getDirections, geocodeAddress } = useDirectionsRender()
    const { t } = useI18n();

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


    defineEmits(['reset-proposal'])
    const loadStore = useLoadsStore();
    const notyStore = useNotificationsStore();

    onMounted(() => {
        window.addEventListener('resize', handleResize);
        if(window.innerWidth <= 1024) {
            zoom.value = 4;
            heightMap.value = 420;
        }

        initData()
    });

    const initData = async() => {
        isLoading.value = true;
        const code = props.proposal.load.shipment_code;
        const filter = "?shipment_code[$in]=" + code;
        const resp = await loadStore.getLoad(filter);
        if(resp.total > 0) {
            load.value = resp.data[0];
            try {
                const addressOrigin = load.value?.origin;
                const addressDestination = load.value?.destination;
                if(addressOrigin && addressDestination) {
                    if(addressOrigin.lat && addressOrigin.lng) {
                        originCoords.value = {lat: Number.parseFloat(addressOrigin.lat), lng: Number.parseFloat(addressOrigin.lng)};
                    } else {
                        // console.log('No hay coords origin')
                        let startLocation = addressOrigin.street_address1 + ', ' + addressOrigin.city + ', ' + addressOrigin.state + ', ' + addressOrigin.country + ', ' +addressOrigin.zipcode;
                        originCoords.value = await geocodeAddress(startLocation);
                    }
                    
                    if(addressDestination.lat && addressDestination.lng) {
                        destinationCoords.value = {lat: Number.parseFloat(addressDestination.lat), lng: Number.parseFloat(addressDestination.lng)};
                    } else {
                        // console.log('No hay coords destinatiom')
                        let endLocation = addressDestination.street_address1 + ', ' + addressDestination.city + ', ' + addressDestination.state + ', ' + addressDestination.country + ', ' +addressDestination.zipcode;
                        destinationCoords.value = await geocodeAddress(endLocation);
                    }
    
                    polylines.value = await getDirections(originCoords.value, destinationCoords.value);
    
                }
                
                if(load.value.vehicle) {
                    vehicleLastLocation.value = {
                        lat: parseFloat(load.value.vehicle.last_location_lat),
                        lng: parseFloat(load.value.vehicle.last_location_lng)
                    }
                }
    
                switch (load.value.load_status) {
                    case 'Loading':
                        isLoadActive.value = true;
                        break;
                    case 'Transit':
                        isLoadActive.value = true;
                        break;
                    case 'Downloading':
                        isLoadActive.value = true;
                        break;
                
                    default:
                        isLoadActive.value = false;
                        break;
                }
            } catch (error) {
                notyStore.$patch({
                    text : t('errors.map'),
                    show : true,
                    error: true
                });
            }

        }
        isLoading.value = false;
    }
    
    const handleResize = () => {
        windowWidth.value = window.innerWidth
        if(windowWidth.value <= 1024){
            zoom.value = 4
            heightMap.value = 420;
        } else {
            zoom.value = 6;
            heightMap.value = 768;
        }
    }

</script>

<template>
    <div class="modal fade" id="loadDetailModal" 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">{{ t('loads.loadDetails') }}</h2>
                    <button 
                        id="btnCloseloadDetailModal" 
                        type="button" 
                        class="close bg-white" 
                        data-dismiss="modal" 
                        aria-label="Close"
                        @click="$emit('reset-proposal')"
                    >
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body view-proposals">
                    <Spiner v-if="isLoading"/>
                    <div v-else>
                        <div v-if="load">
                            <Cardload :load="load" :read-only="true"/>
                            <GoogleMap
                                    :api-key="mapKey"
                                    :center="{lat:19.432600, lng:-99.133209}"
                                    :zoom="zoom" 
                                    :min-zoom="2"
                                    :max-zoom="12"
                                    :style="{width: 100 + '%', height: heightMap + 'px'}"
                                    :options="{
                                        zoomControl: true,
                                        mapTypeControl: true,
                                        scaleControl: true,
                                        streetViewControl: true,
                                        rotateControl: true,
                                        fullscreenControl: true
                                    }"
                                > 
                                    <Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
                                    <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
                                    <CustomMarker
                                        v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
                                        :options="{position: vehicleLastLocation}"
                                        :clickable="false"
                                        :draggable="false"
                                        >
                                        <div style="text-align: center">
                                            <i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
                                        </div>
                                    </CustomMarker>
                                    <Polyline 
                                        v-if="polylines"
                                        :options="{
                                            path: polylines,
                                            strokeColor: '#2D90BB',
                                            strokeOpacity: 0.7,
                                            strokeWeight: 5,
                                            clickable: true,
                                            fillColor: '#75ad3e',
                                        }" 
                                    />
                                </GoogleMap>
                        </div>
                        <CardEmpty v-else :text="t('loads.noInfo')"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button 
                        type="button" 
                        class="btn btn-dark" 
                        data-dismiss="modal"
                        @click="$emit('reset-proposal')"
                    >{{ t('buttons.close') }}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .box-form {
        width: 90%;
        align-items: center;
        align-content: center;
        justify-content: center;
        margin: 0 auto;
    }
    .custom-selected-field {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }

    .box-btns {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
</style>