import VendorDepotMapController from "@cpcreation/viti-core/controllers/depot_map_controller";

const HOME_COLOR = "#8a6a00";
const DOT_COLOR = "#3a291d";

export default class extends VendorDepotMapController {
    buildMarkerIcon(marker, isSelected) {
        const markerCity = String(marker.city || "").toLowerCase();
        const markerName = String(marker.name || marker.title || "").toLowerCase();
        const isHome = markerCity === "bouzy" || markerName.includes("bandock");
        const size = isHome ? 26 : 18;
        const halo = isHome ? "0 0 0 8px rgba(138, 106, 0, 0.16)" : "0 8px 18px rgba(58, 41, 29, 0.18)";
        const background = isHome ? HOME_COLOR : DOT_COLOR;
        const scale = isSelected ? 1.08 : 1;
        const ring = isSelected && !isHome ? "0 0 0 5px rgba(58, 41, 29, 0.14)" : halo;

        return window.L.divIcon({
            className: "depot-marker",
            html: `
                <span style="
                    align-items:center;
                    background:${background};
                    border:3px solid rgba(255,248,245,0.96);
                    border-radius:9999px;
                    box-shadow:${ring};
                    display:flex;
                    height:${size}px;
                    justify-content:center;
                    transform:scale(${scale});
                    transform-origin:center;
                    transition:transform 150ms ease, box-shadow 150ms ease;
                    width:${size}px;
                "></span>
            `,
            iconAnchor: [size / 2, size / 2],
            popupAnchor: [0, -size / 2],
        });
    }

    buildClusterIcon(cluster) {
        return window.L.divIcon({
            className: "depot-cluster",
            html: `
                <span style="
                    align-items:center;
                    background:${DOT_COLOR};
                    border:3px solid rgba(255,248,245,0.96);
                    border-radius:9999px;
                    box-shadow:0 10px 24px rgba(58, 41, 29, 0.22);
                    color:#fff;
                    display:flex;
                    font-size:13px;
                    font-weight:700;
                    height:36px;
                    justify-content:center;
                    line-height:1;
                    min-width:36px;
                    padding:0 10px;
                ">${cluster.getChildCount()}</span>
            `,
            iconAnchor: [18, 18],
        });
    }

    fitMarkers() {
        if (!this.map) {
            return;
        }

        this.map.setView([46.6, 2.3], 6);
    }
}
