<script setup>
    import { onMounted, ref } from 'vue';
    import { useLoadsStore } from '../stores/loads';
    import { useRoute } from 'vue-router';
    import Spiner from '../components/ui/Spiner.vue';
    import CardLoad from '../components/CardLoad.vue';
    import useDirectionsRender from '../composables/useDirectionRender';
    import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map';
    import CardEmpty from '../components/CardEmpty.vue';

    const isLoading = ref(true);
    const loadStore = useLoadsStore();
    const { geocodeAddress } = useDirectionsRender()
    const route = useRoute();
    const load = ref(null);
    const zoom = ref(6);
    const heightMap = ref(768);
    const vehicleLastLocation = ref(null);
    const originCoords = ref(null);
    const destinationCoords = ref(null);
    const isLoadActive = ref(false);
    const windowWidth = ref(window.innerWidth);

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

    const initData = async() => {
        isLoading.value = true;
        const filter = "?shipment_code[$in]=" + route.params['code'];
        const resp = await loadStore.getLoad(filter);
        if(resp.total > 0) {
            load.value = resp.data[0];
            originCoords.value = await geocodeAddress(load.value.origin_formatted_address);
            destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
            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;
            }

        }
        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>
    <h2 class="title text-center">Seguimiento de carga</h2>
    <Spiner v-if="isLoading"/>
    <div v-else>
        <div v-if="load">
            <CardLoad :load="load" :read-only="true"/>
            <GoogleMap
                    api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
                    :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">
                            <!-- <img src="/images/freeTruck.png" width="25" height="25" /> -->
                            <i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
                        </div>
                    </CustomMarker>
                    <!-- <Polyline :options="{
                        path: polyline,
                        // geodesic: true,
                        strokeColor: '#FF0000',
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    }" /> -->
                </GoogleMap>
        </div>
        <CardEmpty v-else text="No hay información disponible"/>
    </div>
</template>

<style scoped>

</style>