import { transformExtent } from "ol/proj";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import TileWMS from "ol/source/TileWMS";
import Map from "ol/Map";
import View from "ol/View";
import { getCenter } from "ol/extent";

const extent = transformExtent(
    [1.46330151, 45.68460578, 18.73161645, 55.86208711],
    "EPSG:4326",
    "EPSG:3857",
);

const osm = new TileLayer({
    source: new OSM({}),
});

const dwd = new TileLayer({
    extent,
    opacity: 0.5,
    source: new TileWMS({
        attributions: [
            '<a href="https://www.dwd.de/copyright">Deutscher Wetterdienst</a>',
        ],
        url: "https://maps.dwd.de/geoserver/ows?version=1.3.0",
        params: {
            LAYERS: "dwd:Niederschlagsradar",
        },
    }),
});

const map = new Map({
    layers: [osm, dwd],
    target: "map",
    view: new View({
        center: getCenter(extent),
        zoom: 6,
    }),
});

const reset = () => {
    const now = new Date();
    return new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        now.getHours(),
        Math.floor(now.getMinutes() / 5) * 5,
    );
};

let time = reset();

const update = () => {
    dwd.getSource().updateParams({ time: time.toISOString() });
    document.getElementById("time").innerText = time.toString();
};

update();

const animate = () =>
    setInterval(() => {
        time.setMinutes(time.getMinutes() + 5);

        const now = new Date();
        if (time.getTime() > new Date(now).setHours(now.getHours() + 2)) {
            time.setHours(time.getHours() - 2, time.getMinutes() - 5);
        }

        update();
    }, 1000);

let interval = null;

const toggleAnimation = () => {
    if (interval !== null) {
        clearInterval(interval);
        interval = null;
    } else {
        interval = animate();
    }
};

const timeInput = document.getElementById("timeInput");
timeInput.max = new Date(time).setHours(time.getHours() + 2);
timeInput.min = time.getTime();

timeInput.addEventListener("input", (event) => {
    if (interval !== null) {
        clearInterval(interval);
    }

    time = new Date(parseInt(event.target.value));

    update();
});