<!-- src/pages/customer/profile/profile/ProfileMap.vue -->
<template>
  <div class="card-glass h-full">
    <div class="card-body p-4 sm:p-6">
      <h2 class="card-title text-2xl mb-4">{{ customer.account_number }}</h2>
      <div class="rounded-lg overflow-hidden min-h-[500px] h-[500px] z-0 relative">
        <l-map ref="map" v-model:zoom="zoom" :center="center">
          <l-tile-layer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
          />
          <l-marker :lat-lng="center">
            <l-popup>
              <div class="text-sm leading-snug">
                <p class="font-semibold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</p>
                <p>{{ customer.customer_address }}<span v-if="customer.customer_apt">, {{ customer.customer_apt }}</span></p>
                <p>{{ customer.customer_town }}, {{ customer.customer_zip }}</p>
              </div>
            </l-popup>
          </l-marker>
        </l-map>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LMarker, LPopup } from "@vue-leaflet/vue-leaflet";

interface Customer {
  account_number: string;
  customer_latitude: string | number;
  customer_longitude: string | number;
  customer_first_name?: string;
  customer_last_name?: string;
  customer_address?: string;
  customer_apt?: string;
  customer_town?: string;
  customer_zip?: string;
}

const props = defineProps<{ customer: Customer }>();

const zoom = ref(14);

const center = computed<[number, number]>(() => [
  parseFloat(props.customer.customer_latitude as string),
  parseFloat(props.customer.customer_longitude as string),
]);
</script>
