<template>
  <section
    id="sectionSearchLocation"
    class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
    aria-labelledby="searchLocationHeading"
  >
    <h2 id="searchLocationHeading" class="mb-2 font-bold">
      Location for Searches
    </h2>

    <!-- Read-only map display when search area is set -->
    <div v-if="searchBox" class="mb-4 aspect-video">
      <l-map
        ref="map"
        :center="mapCenter"
        :zoom="mapZoom"
        class="!z-40 rounded-md"
      >
        <l-tile-layer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          layer-type="base"
          name="OpenStreetMap"
        />
        <l-rectangle
          :bounds="mapBounds"
          :weight="2"
          color="#3b82f6"
          fill-color="#3b82f6"
          :fill-opacity="0.2"
        />
      </l-map>
    </div>

    <button
      class="w-full text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
      @click="navigateToSearchArea"
    >
      {{ searchBox ? "Change Search Area..." : "Set Search Area..." }}
    </button>
  </section>
</template>

<script lang="ts">
import "leaflet/dist/leaflet.css";
import { Component, Vue, Prop } from "vue-facing-decorator";
import { LMap, LRectangle, LTileLayer } from "@vue-leaflet/vue-leaflet";
import { Router } from "vue-router";
import { BoundingBox } from "../db/tables/settings";

@Component({
  name: "LocationSearchSection",
  components: {
    LMap,
    LRectangle,
    LTileLayer,
  },
})
export default class LocationSearchSection extends Vue {
  $router!: Router;

  @Prop({ required: false }) searchBox?: {
    name: string;
    bbox: BoundingBox;
  } | null;

  /**
   * Navigate to search area management page
   */
  navigateToSearchArea() {
    this.$router.push({ name: "search-area" });
  }

  /**
   * Computed property for map center coordinates
   */
  get mapCenter(): [number, number] {
    if (!this.searchBox?.bbox) {
      return [0, 0];
    }
    const bbox = this.searchBox.bbox;
    const centerLat = (bbox.maxLat + bbox.minLat) / 2;
    const centerLong = (bbox.eastLong + bbox.westLong) / 2;
    return [centerLat, centerLong];
  }

  /**
   * Computed property for map zoom level
   */
  get mapZoom(): number {
    if (!this.searchBox?.bbox) {
      return 2;
    }
    // Calculate appropriate zoom based on bounding box size
    const bbox = this.searchBox.bbox;
    const latDiff = bbox.maxLat - bbox.minLat;
    const longDiff = bbox.eastLong - bbox.westLong;
    const maxDiff = Math.max(latDiff, longDiff);

    // Simple zoom calculation - adjust as needed
    if (maxDiff > 10) return 4;
    if (maxDiff > 5) return 6;
    if (maxDiff > 1) return 8;
    if (maxDiff > 0.1) return 10;
    return 12;
  }

  /**
   * Computed property for map bounds
   */
  get mapBounds(): [[number, number], [number, number]] {
    if (!this.searchBox?.bbox) {
      return [
        [0, 0],
        [0, 0],
      ];
    }
    const bbox = this.searchBox.bbox;
    return [
      [bbox.minLat, bbox.westLong],
      [bbox.maxLat, bbox.eastLong],
    ];
  }
}
</script>
