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 Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';

declare interface NumberFormatOptions {
    locale?: string;
    precision?: number;
    prefix?: string;
    suffix?: string;
    padZeros?: PadZerosTypes;
}

declare type PadZerosTypes = 'all' | 'decimal' | 'none';

declare interface Props {
    /** Array of data objects */
    data: UnitChartDataType[];
    /** Title of the graph */
    graphTitle?: string | React.ReactNode;
    /** Description of the graph */
    graphDescription?: string | React.ReactNode;
    /** Note with h2 tag just above the graph. Can be used to highlight text */
    note?: string;
    /** Footnote for the graph */
    footNote?: string | React.ReactNode;
    /** Source data for the graph */
    sources?: SourcesDataType[];
    /** Accessibility label */
    ariaLabel?: string;
    /** Colors of the highlighted circles */
    colors?: 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;
    /** Size of the visualization */
    size?: number;
    /** No. of grid icons in a single row */
    gridSize?: number;
    /** Defines the `d` attribute values for the SVG paths used as grid icons. Each path should be designed for a 24px × 24px viewBox. The order of paths determines the rendering order. If no paths are provided, a circle icon is used as the default. */
    gridIcon?: {
        width?: number;
        height?: number;
        d: string[];
    };
    /** Spacing between 2 grid icons */
    unitPadding?: number;
    /** Total no. of grid icon that are rendered in the chart */
    totalNoOfDots?: number;
    /** Toggle visibility of stroke for the unfilled grid icons. */
    showStrokeForWhiteDots?: boolean;
    /** Toggles if the graph animates in when loaded.  */
    animate?: boolean | AnimateDataType;
    /** Toggle visibility of color scale */
    showColorScale?: boolean;
    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
    numberDisplayOptions?: NumberFormatOptions;
    /** Defines how “NA” values should be displayed/labelled in the graph */
    naLabel?: string;
    /** Enable graph download option as png */
    graphDownload?: boolean;
    /** Enable data download option as a csv */
    dataDownload?: boolean;
    /** 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;
}

export declare function UnitChart(props: Props): JSX.Element | null;

declare interface UnitChartDataType {
    label: number | string;
    value: number;
    data?: object;
}

export { }