import { JSX } from 'react';

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 ColumnConfigurationDataType {
    column: string;
    delimiter?: string;
}

declare interface ConfigObject {
    validateDataAndSettings?: boolean;
    dashboardID?: string;
    dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
    dataSettings: DataSettingsWideToLongDataType;
    debugMode?: boolean;
    theme?: 'dark' | 'light';
    readableHeader?: {
        value: string;
        label: string;
    }[];
    dataFilters?: DataFilterDataType[];
    uiMode?: 'light' | 'normal';
    graphStyles?: StyleObject;
    graphClassNames?: ClassNameObject;
}

declare type DashboardFromWideToLongFormatColumnDataType = {
    graphType: 'donutChart' | 'barChart' | 'unitChart' | 'treeMap' | 'circlePacking';
    columnWidth?: number;
    dataFilters?: DataFilterDataType[];
    settings?: any;
    graphDataConfiguration?: GraphConfigurationDataType[];
};

declare type DashboardFromWideToLongFormatLayoutDataType = {
    title?: string;
    description?: string;
    dropdownLabel?: string;
    padding?: string;
    backgroundColor?: string | boolean;
    language?: Languages;
    rows: {
        columns: DashboardFromWideToLongFormatColumnDataType[];
        height?: number;
    }[];
};

declare interface DataFilterDataType {
    column: string;
    includeValues?: (string | number | boolean | null | undefined)[];
    excludeValues?: (string | number | boolean | null | undefined)[];
}

declare interface DataSettingsWideToLongDataType {
    dataURL?: string | FileSettingsDataType[];
    fileType?: 'csv' | 'json' | 'api';
    delimiter?: string;
    data?: any;
    keyColumn: string;
    idColumnTitle?: string;
    dataTransformation?: string;
    apiHeaders?: any;
}

declare interface FileSettingsDataType {
    dataURL: string;
    idColumnName: string;
    fileType?: 'csv' | 'json' | 'api';
    delimiter?: string;
    columnsToArray?: ColumnConfigurationDataType[];
    apiHeaders?: any;
    dataTransformation?: string;
}

declare interface GraphConfigurationDataType {
    columnId: string | string[];
    chartConfigId: string;
}

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

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

declare interface Props {
    config: string | ConfigObject;
}

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