import { FeatureCollection } from 'geojson';
import { JSX } from 'react';

declare interface AnimateDataType {
    duration: number;
    once: boolean;
    amount: 'some' | 'all' | number;
}

declare interface AxesClassNameObject {
    gridLines?: string;
    labels?: string;
    title?: string;
    axis?: string;
}

declare interface AxesStyleObject {
    gridLines?: React.CSSProperties;
    labels?: React.CSSProperties;
    title?: React.CSSProperties;
    axis?: React.CSSProperties;
}

declare interface ClassNameObject {
    title?: string;
    footnote?: string;
    source?: string;
    description?: string;
    tooltip?: string;
    xAxis?: AxesClassNameObject;
    yAxis?: AxesClassNameObject;
    legend?: string;
    graphContainer?: string;
    graphObjectValues?: string;
    dataConnectors?: string;
    mouseOverLine?: string;
    regLine?: string;
    dataCards?: string;
    colorLegend?: string;
    modal?: string;
    area?: string;
}

declare type Color = 'azure' | 'blue' | 'green' | 'lime' | 'orange' | 'pink' | 'red' | 'teal' | 'violet' | 'yellow' | 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'background' | 'surface' | 'surface-2xs' | 'surface-xs' | 'surface-sm' | 'surface-md' | 'surface-lg' | 'surface-xl' | 'surface-2xl' | 'surface-3xl' | 'surface-4xl' | 'foreground' | 'sdg-1' | 'sdg-2' | 'sdg-3' | 'sdg-4' | 'sdg-5' | 'sdg-6' | 'sdg-7' | 'sdg-8' | 'sdg-9' | 'sdg-10' | 'sdg-11' | 'sdg-12' | 'sdg-13' | 'sdg-14' | 'sdg-15' | 'sdg-16' | 'sdg-17' | 'male' | 'female' | 'urban' | 'rural' | 'child' | 'adolescent' | 'young-adult' | 'adult' | 'older-adult';

declare interface CustomLayerDataType {
    position: 'before' | 'after';
    layer: React.ReactNode;
}

export declare function DotDensityMap(props: Props): JSX.Element;

declare interface DotDensityMapDataType {
    lat: number;
    long: number;
    radius?: number;
    color?: string | number;
    label?: string | number;
    date?: string | number;
    data?: object;
}

declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';

declare interface MapOverlayDataType {
    mapData: FeatureCollection | string;
    mapBorderWidth?: number;
    mapBorderColor?: string;
}

declare type MapProjectionTypes = 'mercator' | 'equalEarth' | 'naturalEarth' | 'orthographic';

declare interface Props {
    /** Array of data objects */
    data: DotDensityMapDataType[];
    /** Title of the graph */
    graphTitle?: string | React.ReactNode;
    /** Description of the graph */
    graphDescription?: string | React.ReactNode;
    /** Footnote for the graph */
    footNote?: string | React.ReactNode;
    /** Source data for the graph */
    sources?: SourcesDataType[];
    /** Accessibility label */
    ariaLabel?: string;
    /** Color or array of colors for the circle */
    colors?: string | string[];
    /** Domain of colors for the graph */
    colorDomain?: string[];
    /** Title for the color legend */
    colorLegendTitle?: string;
    /** Color for the areas where data is no available */
    mapNoDataColor?: string;
    /** Background color of the graph */
    backgroundColor?: string | boolean;
    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
    styles?: StyleObject;
    /** Custom class names */
    classNames?: ClassNameObject;
    /** Width of the graph */
    width?: number;
    /** Height of the graph */
    height?: number;
    /** Minimum height of the graph */
    minHeight?: number;
    /** Relative height scaling factor. This overwrites the height props */
    relativeHeight?: number;
    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
    padding?: string;
    /** Maximum radius of the circle */
    radius?: number;
    /** Map data as an object in geoJson format or a url for geoJson */
    mapData?: FeatureCollection | string;
    /** Detail if any other map needs to be overlayed over the main map */
    mapOverlay?: MapOverlayDataType;
    /** Defines if the coordinates in the map data should be rewinded or not. Try to change this is the visualization shows countries as holes instead of shapes. */
    rewindCoordinatesInMapData?: boolean;
    /** Scaling factor for the map. Multiplies the scale number to scale. */
    scale?: number;
    /** Center point of the map */
    centerPoint?: [number, number];
    /** Controls the rotation of the map projection, in degrees, applied before rendering. Useful for shifting the antimeridian to focus the map on different regions */
    projectionRotate?: [number, number] | [number, number, number];
    /** Defines the zoom mode for the map */
    zoomInteraction?: ZoomInteractionTypes;
    /** Stroke width of the regions in the map */
    mapBorderWidth?: number;
    /** Stroke color of the regions in the map */
    mapBorderColor?: string;
    /** Toggle if the UN border are shown. */
    showUNBorder?: boolean;
    /** Toggle if the coastal border is shown. Only applicable if default world map is used */
    showCostalBorder?: boolean;
    /** Toggle if the map is a world map */
    isWorldMap?: boolean;
    /** Map projection type */
    mapProjection?: MapProjectionTypes;
    /** Extend of the allowed zoom in the map */
    zoomScaleExtend?: [number, number];
    /** Extend of the allowed panning in the map */
    zoomTranslateExtend?: [[number, number], [number, number]];
    /** Toggle visibility of labels */
    showLabels?: boolean;
    /** Maximum value mapped to the radius chart */
    maxRadiusValue?: number;
    /** Data points to highlight. Use the label value from data to highlight the data point */
    highlightedDataPoints?: (string | number)[];
    /** Defines the opacity of the non-highlighted data */
    dimmedOpacity?: number;
    /** Toggles if the graph animates in when loaded.  */
    animate?: boolean | AnimateDataType;
    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
    showColorScale?: boolean;
    /** Toggle if color scale is collapsed by default. */
    collapseColorScaleByDefault?: boolean;
    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
    customLayers?: CustomLayerDataType[];
    /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
    timeline?: TimelineDataType;
    /** Enable graph download option as png */
    graphDownload?: boolean;
    /** Enable data download option as a csv */
    dataDownload?: boolean;
    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
    resetSelectionOnDoubleClick?: boolean;
    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
    tooltip?: string | ((_d: any) => React.ReactNode);
    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
    detailsOnClick?: string | ((_d: any) => React.ReactNode);
    /** Callback for mouse over event */
    onSeriesMouseOver?: (_d: any) => void;
    /** Callback for mouse click event */
    onSeriesMouseClick?: (_d: any) => void;
    /** Language setting  */
    language?: Languages;
    /** Color theme */
    theme?: 'light' | 'dark';
    /** Unique ID for the graph */
    graphID?: string;
}

declare interface SourcesDataType {
    source: string;
    link?: string;
}

declare interface StyleObject {
    title?: React.CSSProperties;
    footnote?: React.CSSProperties;
    source?: React.CSSProperties;
    description?: React.CSSProperties;
    graphContainer?: React.CSSProperties;
    tooltip?: React.CSSProperties;
    xAxis?: AxesStyleObject;
    yAxis?: AxesStyleObject;
    graphObjectValues?: React.CSSProperties;
    dataConnectors?: React.CSSProperties;
    mouseOverLine?: React.CSSProperties;
    regLine?: React.CSSProperties;
    dataCards?: React.CSSProperties;
    modal?: React.CSSProperties;
    area?: React.CSSProperties;
}

declare interface TimelineDataType {
    autoplay: boolean;
    enabled: boolean;
    showOnlyActiveDate: boolean;
    speed?: number;
    dateFormat?: string;
    color?: Exclude<Color, 'background' | 'surface' | 'surface-2xs' | 'surface-xs' | 'surface-sm' | 'surface-md' | 'surface-lg' | 'surface-xl' | 'surface-2xl' | 'surface-3xl' | 'surface-4xl' | 'foreground'>;
}

declare type ZoomInteractionTypes = 'scroll' | 'ctrlScroll' | 'button' | 'noZoom';

export { }