"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as L from "leaflet";
import classNames from "classnames";
import ChevronUpIcon from "jt-design-system/es/icons/chevron-up";
import ChevronDownIcon from "jt-design-system/es/icons/chevron-down";
import ChevronRightIcon from "jt-design-system/es/icons/chevron-right";
import useMediaQuery from "./hooks/use-media-query";
import { List, MarkerPin } from "./icons";
import css from "./editable-map.module.css";
const DESKTOP_QUERY = "(min-width: 993px)";
const FOCUS_ZOOM = 17;
const POPUP_DELAY = 300;
export default function MarkerList({ markers, setMarkers, isSorted, setIsSorted, isEditing, opened, setOpened, mapRef, }) {
    const isDesktop = useMediaQuery(DESKTOP_QUERY);
    React.useEffect(() => {
        setOpened(isDesktop);
    }, [isDesktop, setOpened]);
    const sortedMarkers = isSorted
        ? markers
        : [...markers].sort((a, b) => a.title.localeCompare(b.title, undefined, {
            numeric: true,
            sensitivity: "base",
        }));
    const focusMarker = (marker) => {
        const map = mapRef.current;
        if (!map) {
            return;
        }
        map.setView(marker.position, FOCUS_ZOOM);
        setTimeout(() => {
            map.eachLayer((layer) => {
                if (layer instanceof L.Marker &&
                    layer._customId === marker.id) {
                    layer.openPopup();
                }
            });
        }, POPUP_DELAY);
        if (!isDesktop) {
            setOpened(false);
        }
    };
    const moveMarker = (id, offset) => {
        if (!isSorted) {
            setIsSorted(true);
        }
        setMarkers((current) => {
            const from = current.findIndex((marker) => marker.id === id);
            const to = from + offset;
            if (from < 0 || to < 0 || to >= current.length) {
                return current;
            }
            const next = [...current];
            [next[from], next[to]] = [next[to], next[from]];
            return next;
        });
    };
    return (_jsxs("div", { className: css.list, children: [opened && (_jsx("div", { className: css.listInner, children: sortedMarkers.map((marker) => (_jsxs(React.Fragment, { children: [marker.groupTitle && (_jsx("span", { className: css.groupTitle, children: marker.groupTitle })), _jsxs("div", { className: css.listItem, children: [_jsxs("button", { type: "button", className: classNames(css.listButton, {
                                        [css.listButtonImportant]: marker.important,
                                    }), onClick: () => focusMarker(marker), children: [_jsx(MarkerPin, { className: css.listIcon }), marker.title] }), isEditing && (_jsxs("div", { className: css.movements, children: [_jsx("button", { type: "button", title: "Monter", onClick: () => moveMarker(marker.id, -1), children: _jsx(ChevronUpIcon, { className: css.moveIcon }) }), _jsx("button", { type: "button", title: "Descendre", onClick: () => moveMarker(marker.id, 1), children: _jsx(ChevronDownIcon, { className: css.moveIcon }) })] }))] })] }, marker.id))) })), _jsx("button", { type: "button", className: css.listToggle, title: opened ? "Masquer la liste" : "Afficher la liste", onClick: () => setOpened(!opened), children: opened ? _jsx(ChevronRightIcon, {}) : _jsx(List, {}) })] }));
}
