/// <reference types="react" />
import { PopupOptions, Marker, GeolocateOptions, NavigationOptions, RequireAtLeastOne, PaddingOptions, LngLatBoundsLike, FitBoundsOptions, FlyToOptions, Map, MapMouseEvent, MapLibreEvent } from 'maplibre-gl';

interface Popup {
    html?: string;
    domContent?: Node;
    option?: PopupOptions;
    lngLat: [number, number];
    zoom?: number;
    priority?: number;
    onClick?: (e: MouseEvent) => void;
    onMouseOver?: (e: MouseEvent) => void;
    onMouseout?: (e: MouseEvent) => void;
}
interface Point {
    id: string;
    lngLat: [number, number];
    img?: string;
    num?: number;
    html?: string;
    data?: any;
    hidden?: boolean;
    priority?: number;
    required?: boolean;
    style?: {
        strokeColor?: string;
        strokeSize?: string;
        strokeShadow?: string;
    };
    onClick?: (e: MouseEvent, marker: Marker) => void;
    onMouseOver?: (e: MouseEvent) => void;
    onMouseout?: (e: MouseEvent) => void;
}
interface Circle {
    id: string;
    radius: number;
    lngLat: [number, number];
    point?: number;
    hidden?: boolean;
    priority?: number;
}
interface Rectangle {
    id: string;
    coordinates: [
        [
            number,
            number
        ],
        [
            number,
            number
        ]
    ];
    hidden?: boolean;
    priority?: number;
}
interface Line {
    coordinates: number[][];
    color?: string;
    outlineColor?: string;
    opacity?: number;
    priority?: number;
}
interface MapOption {
    style: string;
    zoom: number;
    center: [number, number];
    cursorIcon?: string;
    dragRotateDisable?: boolean;
    touchZoomRotateDisable?: boolean;
    logoDisable?: boolean;
}
interface MapControls {
    fullScreen?: boolean;
    geolocation?: {
        enabled: boolean;
        options: GeolocateOptions;
    };
    navigation?: {
        enabled: boolean;
        options: NavigationOptions;
    };
}
interface EaseTo {
    padding: number | RequireAtLeastOne<PaddingOptions>;
    duration?: number;
}
interface Bound {
    coordinates: LngLatBoundsLike;
    option?: FitBoundsOptions;
    eventData?: any;
}
interface FlyTo {
    options: FlyToOptions;
    eventData?: any;
}

interface MaplibreProps {
    option: MapOption;
    controls?: MapControls;
    points?: Point[];
    circles?: Circle[];
    rectangles?: Rectangle[];
    lines?: Line[];
    popups?: Popup[];
    children?: React.ReactNode;
    poiHoverEnabled?: boolean;
    defaultCursorIcon?: string;
    onRenderingComplete?: (map: Map) => void;
    onPointsRenderingComplete?: (map: Map) => void;
    onLinesRenderingComplete?: (map: Map) => void;
    onCirclesRenderingComplete?: (map: Map) => void;
    onPopupsRenderingComplete?: (map: Map) => void;
    onMapClick?: (ev: MapMouseEvent, map: Map) => void;
    onMapDoubleClick?: (ev: MapMouseEvent, map: Map) => void;
    onceMapClick?: (ev: MapMouseEvent, map: Map) => void;
    onceMapDoubleClick?: (ev: MapMouseEvent, map: Map) => void;
    onceMapContextMenu?: (ev: MapMouseEvent, map: Map) => void;
    onMapDragStart?: (ev: MapLibreEvent<MouseEvent | TouchEvent | undefined>, map: Map) => void;
    onMapDragEnd?: (ev: MapLibreEvent<MouseEvent | TouchEvent | undefined>, map: Map) => void;
    onMapLoad?: (ev: MapLibreEvent) => void;
    onMapMoveEnd?: (ev: MapLibreEvent, map: Map) => void;
    mapStatus?: "paint" | "lock";
    style?: React.CSSProperties;
    className?: string;
    easeTo?: EaseTo;
    bound?: Bound;
    flyTo?: FlyTo;
}

declare const Maplibre: ({ option, controls, points, circles, rectangles, lines, popups, children, poiHoverEnabled, defaultCursorIcon, onRenderingComplete, onPointsRenderingComplete, onLinesRenderingComplete, onCirclesRenderingComplete, onPopupsRenderingComplete, onMapClick, onceMapContextMenu, onMapDoubleClick, onceMapClick, onceMapDoubleClick, onMapDragStart, onMapDragEnd, onMapLoad, onMapMoveEnd, mapStatus, style, className, easeTo, bound, flyTo }: MaplibreProps) => JSX.Element;

export { Maplibre as default };