document.addEventListener('DOMContentLoaded', function() {
    function initMap() {
        var mymap = L.map("locationmap").setView([38.891, 139.824], 16);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(mymap);
        return mymap;
    }

    function locGetTimer() {
        var timerInterval = 5000; // デフォルトを5秒に設定
        var mymap = initMap();
        var locmarker = L.marker(mymap.getCenter()).addTo(mymap);
        locmarker.bindPopup("これから捕捉します").openPopup();
        var intervalId = null;
        var isLogging = false;
        var polyline = L.polyline([], {color: 'red'}).addTo(mymap);

        function setLoggingInterval(seconds) {
            timerInterval = seconds * 1000;
            if (isLogging) {
                stopLogging();
                startLogging();
            }
        }

        function startLogging() {
            if (!isLogging) {
                isLogging = true;
                intervalId = window.setInterval(tryGetLOC, timerInterval);
                tryGetLOC();
            }
        }

        function stopLogging() {
            if (isLogging) {
                isLogging = false;
                clearInterval(intervalId);
                intervalId = null;
                locmarker.setPopupContent("ロギングを停止しました").openPopup();
                calculateDistance();
            }
        }

        function tryGetLOC() {
            locmarker.setPopupContent("位置情報取得中...").openPopup();
            navigator.geolocation.getCurrentPosition(
                onSuccess, onError, {
                    enableHighAccuracy: true,
                    timeout: 9000,
                    maximumAge: 0
                }
            );
        }

        function onSuccess(pos) {
            var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
            mymap.flyTo(latlng);
            locmarker.setPopupContent(
                "現在地は " + latlng + "です"
            ).openPopup().setLatLng(latlng);

            polyline.addLatLng(latlng);
            mymap.fitBounds(polyline.getBounds());
        }

        function onError(err) {
            console.log("位置情報の取得に失敗: ", err);
            locmarker.setPopupContent("位置情報の取得に失敗しました").openPopup();
        }

        function calculateDistance() {
            var latlngs = polyline.getLatLngs();
            var totalDistance = 0;
            for (var i = 1; i < latlngs.length; i++) {
                totalDistance += latlngs[i-1].distanceTo(latlngs[i]);
            }
            console.log("総距離: " + totalDistance.toFixed(2) + " メートル");
        }

        mymap.on('click', function(e) {
            L.marker(e.latlng).addTo(mymap)
                .bindPopup("クリック位置: " + e.latlng.toString()).openPopup();
        });

        document.getElementById("start").addEventListener("click", startLogging);
        document.getElementById("stop").addEventListener("click", stopLogging);

        // 取得間隔を変更するための入力フィールドとボタンを追加
        var intervalInput = document.createElement('input');
        intervalInput.type = 'number';
        intervalInput.min = '1';
        intervalInput.max = '10';
        intervalInput.value = '5';
        document.body.insertBefore(intervalInput, document.getElementById("start"));

        var setIntervalButton = document.createElement('button');
        setIntervalButton.textContent = '間隔を設定';
        setIntervalButton.addEventListener('click', function() {
            setLoggingInterval(parseInt(intervalInput.value));
        });
        document.body.insertBefore(setIntervalButton, document.getElementById("start"));
    }

    locGetTimer();
});