import React from "react";
import { MapContainer, TileLayer, CircleMarker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
export type MapPoint = {
    name?: string;
    label?: string;
    lat: number;
    lng: number;
    status: string;
    onClick?: () => void;
};
const tone = (s: string) =>
    s === "Visited"
        ? "#18b89a"
        : s === "Order"
          ? "#f59e0b"
          : s === "Failed Visit"
            ? "#f43f5e"
            : s === "Not Order"
              ? "#94a3b8"
              : "#3b82f6";
export default function Map({
    points = [],
    center,
    zoom,
    scrollWheelZoom = false,
}: {
    points?: MapPoint[];
    center: [number, number];
    zoom: number;
    scrollWheelZoom?: boolean;
}) {
    return (
        <MapContainer
            center={center}
            zoom={zoom}
            scrollWheelZoom={scrollWheelZoom}
            className="isolate h-full w-full"
        >
            <TileLayer
                attribution="&copy; OpenStreetMap contributors"
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            {points.map((p, i) => (
                <CircleMarker
                    key={`${p.lat}-${p.lng}-${i}`}
                    center={[p.lat, p.lng]}
                    radius={8}
                    pathOptions={{
                        color: tone(p.status),
                        fillColor: tone(p.status),
                        fillOpacity: 0.9,
                    }}
                    eventHandlers={
                        p.onClick ? { click: () => p.onClick?.() } : undefined
                    }
                >
                    <Popup>
                        <b>{p.label || p.name || "Customer"}</b>
                        <br />
                        {p.status}
                        <br />
                        <span className="text-xs">
                            {p.lat.toFixed(6)}, {p.lng.toFixed(6)}
                        </span>
                    </Popup>
                </CircleMarker>
            ))}
        </MapContainer>
    );
}