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 interface CustomLayerDataType {
    position: 'before' | 'after';
    layer: React.ReactNode;
}

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: SankeyDataType[];
    /** 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 source */
    sourceColors?: string[] | string;
    /** Color or array of colors for targets */
    targetColors?: string[] | string;
    /** Domain of colors for the source */
    sourceColorDomain?: (string | number)[];
    /** Domain of colors for the target */
    targetColorDomain?: (string | number)[];
    /** 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;
    /** Toggles the background to fill the container. This only works if the width of the graph is defined. */
    fillContainer?: boolean;
    /** Padding between nodes */
    nodePadding?: number;
    /** Thickness of each node */
    nodeWidth?: number;
    /** Truncate labels by specified length */
    truncateBy?: number;
    /** Title of the source */
    sourceTitle?: string;
    /** Title of the targets */
    targetTitle?: string;
    /** Minimum height of the nodes for which labels and values are visible */
    minLabelHeight?: number;
    /** Toggle visibility of labels or defines what is shown in the label */
    showLabels?: boolean | ((_d: any) => React.ReactNode);
    /** Option to position the labels */
    labelPosition?: 'inside' | 'outside' | 'overlap';
    /** Defines the width of the labels if the `labelPosition` is set to `inside`*/
    labelWidth?: number;
    /** Toggle visibility of values */
    showValues?: boolean;
    /** Source to highlight. Use the label value from data to highlight the data point */
    highlightedSourceDataPoints?: (string | number)[];
    /** Targets to highlight. Use the label value from data to highlight the data point */
    highlightedTargetDataPoints?: (string | number)[];
    /** Links to highlight. Use the label value from data to highlight the data point */
    highlightedLinks?: {
        source: string | number;
        target: string | number;
    }[];
    /** Opacity of the links */
    defaultLinkOpacity?: number;
    /** Color of the links. If the value is 'source' then the links will be colored based on the source color, if the value is 'target' then the links will be colored based on the target color, if the value is 'source-target' then the links will be colored based on the source and target color. A color can also be defined as hex code. */
    linkColor?: string | 'source' | 'target' | 'source-target';
    /** Opacity of the nodes when other nodes are highlighted or hovered. If no value is provided then it take the value of `defaultLinkOpacity` */
    dimmedNodeOpacity?: number;
    /** Sorting order of the nodes */
    sortNodes?: 'asc' | 'desc' | 'mostReadable' | 'none';
    /** Toggles if the graph animates in when loaded.  */
    animate?: boolean | AnimateDataType;
    /** 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;
    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
    resetSelectionOnDoubleClick?: boolean;
    /** Tooltip content when user mouseover on the links. 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;
}

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

declare interface SankeyDataType {
    source: string | number;
    target: string | number;
    value: number;
    data?: object;
}

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 { }