---
import '@/styles/globals.css';
import Layout from '../layouts/Layout.astro';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

import { CalendarIcon } from '@radix-ui/react-icons';

import '../styles/locked-page.css';
import LocationButton from '@/components/LockedContent';
---

<Layout>
  <main class="flex flex-col gap-3 my-4 items-center">
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Ayşe</CardTitle>
      </CardHeader>
      <CardContent>
        <p>
          Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen
          lazım 😘
        </p>
      </CardContent>
      <CardFooter className="gap-2">
        <CalendarIcon />
        <p>5 saat önce</p>
      </CardFooter>
    </Card>

    <div id="map" class="w-full h-[450px]"></div>

    <LocationButton client:load />
  </main>

  <Button className="w-full">Paylaş</Button>
</Layout>

<script>
  import distance from '../utils/distance';

  let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
  async function initMap(): Promise<void> {
    const { Map } = (await google.maps.importLibrary(
      'maps'
    )) as google.maps.MapsLibrary;

    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
      'marker'
    )) as google.maps.MarkerLibrary;

    map = new Map(document.getElementById('map') as HTMLElement, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
      mapId: 'DEMO_MAP_ID',
      mapTypeControl: false,
    });

    const currentLocationIcon = document.createElement('img');
    currentLocationIcon.src = '/blue-dot.png';

    const currentLocationMarkerView = new AdvancedMarkerElement({
      map,
      position: { lat: 37.434, lng: -122.082 },
      content: currentLocationIcon,
      title: 'Current Location',
    });

    infoWindow = new google.maps.InfoWindow();

    const locationButton = document.createElement('button');
    const locationInfo = document.createElement('button');

    locationButton.textContent = 'Konumuma Git';
    locationInfo.textContent = 'Mesafe hesaplanıyor...';

    locationButton.classList.add('custom-map-control-button');
    locationInfo.classList.add('custom-map-control-button');

    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(locationInfo);

    setInterval(
      () =>
        navigator.geolocation.getCurrentPosition(
          (position: GeolocationPosition) => {
            const pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            };

            const mapPos = map.getCenter();

            const totalDistanceInKM = distance(
              pos.lat,
              pos.lng,
              mapPos?.lat(),
              mapPos?.lng()
            ).toFixed(0);

            currentLocationMarkerView.position = pos;

            locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
          },
          () => {
            handleLocationError(true, infoWindow, map.getCenter()!);
          }
        ),
      3000
    );

    locationButton.addEventListener('click', () => {
      // Try HTML5 geolocation.
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position: GeolocationPosition) => {
            const pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            };

            map.setCenter(pos);
            map.setZoom(12);
          },
          () => {
            handleLocationError(true, infoWindow, map.getCenter()!);
          }
        );
      } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter()!);
      }
    });
  }

  function handleLocationError(
    browserHasGeolocation: boolean,
    infoWindow: google.maps.InfoWindow,
    pos: google.maps.LatLng
  ) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(
      browserHasGeolocation
        ? 'Error: Konumunuz tespit edilemedi.'
        : 'Error: Tarayıcınız konum tespitini desteklemiyor.'
    );
    infoWindow.open(map);
  }

  initMap();
</script>