import { JSX } from 'react';

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

declare interface AnnotationSettingsDataType {
    text: string;
    maxWidth?: number;
    xCoordinate?: number | string;
    yCoordinate?: number | string;
    xOffset?: number;
    yOffset?: number;
    align?: 'center' | 'left' | 'right';
    color?: string;
    fontWeight?: 'regular' | 'bold' | 'medium';
    showConnector?: boolean | number;
    connectorRadius?: number;
    classNames?: {
        connector?: string;
        text?: string;
    };
    styles?: {
        connector?: React.CSSProperties;
        text?: React.CSSProperties;
    };
}

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 CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';

declare interface CustomHighlightAreaSettingsDataType {
    coordinates: (number | string)[];
    closePath?: boolean;
    style?: React.CSSProperties;
    className?: string;
    color?: string;
    strokeWidth?: number;
}

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

declare interface HighlightAreaSettingsDataType {
    coordinates: [number | string | null, number | string | null];
    style?: React.CSSProperties;
    className?: string;
    color?: string;
    strokeWidth?: number;
}

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

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

declare interface MultiLineAltChartDataType {
    label: number | string;
    y: number | null;
    color?: string | number;
    date: string | number;
    data?: object;
}

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: MultiLineAltChartDataType[];
    /** 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 lines */
    colors?: string | string[];
    /** Domain of colors for the graph */
    colorDomain?: (string | number)[];
    /** Toggle the visibility of labels of the lines when highlighted or mouse hovered */
    showLabels?: boolean;
    /** Title for the color legend */
    colorLegendTitle?: 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;
    /** Left margin of the graph */
    leftMargin?: number;
    /** Right margin of the graph */
    rightMargin?: number;
    /** Top margin of the graph */
    topMargin?: number;
    /** Bottom margin of the graph */
    bottomMargin?: number;
    /** Maximum value for the chart */
    maxValue?: number;
    /** Minimum value for the chart */
    minValue?: number;
    /** Reference values for comparison */
    refValues?: ReferenceDataType[];
    /** Maximum value of the date for the chart */
    maxDate?: string | number;
    /** Minimum value of the date for the chart */
    minDate?: string | number;
    /** No. of ticks on the x-axis or use the value `showAvailableOnly` to show only year which are present in data  */
    noOfXTicks?: number | 'showAvailableOnly';
    /** No. of ticks on the y-axis  */
    noOfYTicks?: number;
    /** Toggle visibility of dots on the line */
    showDots?: boolean;
    /** Stroke width of the line */
    strokeWidth?: number;
    /** Toggle the initial animation of the line. If the type is number then it uses the number as the time in seconds for animation. */
    animate?: boolean | AnimateDataType;
    /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */
    dateFormat?: string;
    /** Title for the Y-axis */
    yAxisTitle?: string;
    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
    showColorScale?: boolean;
    /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */
    showNAColor?: boolean;
    /** Toggle visibility of year labels on hover. */
    showDateOnHover?: boolean;
    /** Defines how “NA” values should be displayed/labelled in the graph */
    naLabel?: string;
    /** Toggle interaction of Voronoi cells */
    useVoronoiInteraction?: boolean;
    /** Toggle visibility of Voronoi tesselation. Should be used for debugging only */
    showVoronoiTesselation?: boolean;
    /** Data points to highlight. Use the label value from data to highlight the data point */
    highlightedLines?: (string | number)[];
    /** Defines if the labels should be shown for highlighted lines. */
    showHighlightedLinesLabels?: boolean;
    /** Defines the opacity of the non-highlighted data */
    dimmedOpacity?: number;
    /** Annotations on the chart */
    annotations?: AnnotationSettingsDataType[];
    /** Highlighted area(square) on the chart  */
    highlightAreaSettings?: HighlightAreaSettingsDataType[];
    /** Highlighted area(custom shape) on the chart  */
    customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
    /** Curve type for the line */
    curveType?: CurveTypes;
    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
    numberDisplayOptions?: NumberFormatOptions;
    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
    customLayers?: CustomLayerDataType[];
    /** Enable graph download option as png */
    graphDownload?: boolean;
    /** Enable data download option as a csv */
    dataDownload?: 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);
    /** Callback for mouse over event */
    onSeriesMouseOver?: (_d: any) => void;
    /** Language setting  */
    language?: Languages;
    /** Color theme */
    theme?: 'light' | 'dark';
    /** Unique ID for the graph */
    graphID?: string;
}

declare interface ReferenceDataType {
    value: number | null;
    text: string;
    color?: string;
    styles?: {
        line?: React.CSSProperties;
        text?: React.CSSProperties;
    };
    classNames?: {
        line?: string;
        text?: 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 { }