<template>
    <div class="relative w-full h-full map">
        <div class="absolute top-0 right-0 z-10 w-full p-3">
            <GmapAutocomplete
                :placeholder="placeholder"
                @place_changed="setPlace"
            />
        </div>
        <GmapMap
            ref="map"
            :center="mapCenter"
            :options="{
                mapTypeControl: false,
                scaleControl: false,
                rotateControl: false,
                fullscreenControl: false,
                disableDefaultUI: true,
            }"
            :zoom="15"
            class="overflow-hidden rounded-xl"
            style="width: 100%; height: 100%"
            @click="updateCenter"
        >
            <!-- <GmapMarker
                :position="{
                    lat: _location.geo.lat,
                    lng: _location.geo.lng,
                }"
                @click="geolocation"
            ></GmapMarker> -->
        </GmapMap>

        <button
            class="absolute bottom-0 right-0 p-2 -translate-x-2 border-[#2F2F3550] -translate-y-5 bg-white border rounded-md shadow"
            @click="getCurrentLocation"
        >
            <svg
                class="icon icon-tabler icon-tabler-current-location"
                fill="none"
                height="20"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
                viewBox="0 0 24 24"
                width="20"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path d="M0 0h24v24H0z" fill="none" stroke="none" />
                <circle cx="12" cy="12" r="3" />
                <circle cx="12" cy="12" r="8" />
                <line x1="12" x2="12" y1="2" y2="4" />
                <line x1="12" x2="12" y1="20" y2="22" />
                <line x1="20" x2="22" y1="12" y2="12" />
                <line x1="2" x2="4" y1="12" y2="12" />
            </svg>
        </button>
    </div>
</template>

<script>
import {
    Autocomplete as GmapAutocomplete,
    Map as GmapMap,
    Marker as GmapMarker,
} from "@fawmi/vue-google-maps";
import { currentLocation } from "@/composables/location";
export default {
    props: {
        placeholder: {
            type: String,
            default: "Search for a place",
        },
        location: {
            type: Object,
            default: {
                geo: {
                    lat: 0,
                    lng: 0,
                },
                address: "",
            },
        },
    },
    data() {
        return {
            mapCenter: {
                latitude: 0,
                longitude: 0,
            },
            _location: {
                geo: {
                    lat: 0,
                    lng: 0,
                },
                address: "",
            },
        };
    },
    methods: {
        async geolocation() {
            navigator.geolocation.getCurrentPosition((position) => {
                this._location.geo = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                };
                currentLocation(
                    this._location.geo.lat,
                    this._location.geo.lng
                ).then((res) => (this._location.address = res.address));

                // this.mapCenter = {
                //     latitude: this._location.geo.lat,
                //     longitude: this._location.geo.lng,
                // }; // this.getPlace();
            });
        },
        async setPlace(place) {
            if (place.geometry?.location) {
                this._location.geo = {
                    lat: place.geometry.location.lat(),
                    lng: place.geometry.location.lng(),
                };
                currentLocation(
                    this._location.geo.lat,
                    this._location.geo.lng
                ).then((res) => (this._location.address = res.address));

                // this.mapCenter = {
                //     latitude: this._location.geo.lat,
                //     longitude: this._location.geo.lng,
                // };
            }
        },
        async updateCenter(place) {
            this._location.geo.lat = place.latLng.lat();
            this._location.geo.lng = place.latLng.lng();
        },
        async initMap() {
            this.getCurrentLocation();
        },
        async getCurrentLocation() {
            const vm = this;
            // if (this.$refs.map)
            this.$refs?.map?.$mapPromise?.then((map) => {
                vm.geolocation();
            });
        },
        async getPlace() {
            const place = await this.$refs.autocomplete.getPlace();
        },
    },

    mounted() {
        this.geolocation();
    },
    components: {
        GmapMap,
        GmapMarker,
        GmapAutocomplete,
    },
    watch: {
        _location: {
            handler: function (val) {
                this.$emit("update:location", val);
            },
            deep: true,
        },
    },
};
</script>

<style></style>
