import React, { SVGAttributes, CSSProperties } from 'react';
import { Aes, LegendOrientation } from '@graphique/graphique';

declare enum FocusType {
    /** pointer events focus all groups within bars */
    GROUP = "group",
    /** pointer events focus individual groups within bars */
    INDIVIDUAL = "individual"
}
declare enum Position {
    /** groups are positioned directly "on top" of each other (no effect on x scale) */
    IDENTITY = "identity",
    /** groups are stacked horizontally after any previous groups (additive effect on x scale) */
    STACK = "stack",
    /** groups are positioned vertically after any previous groups (no effect on x scale) */
    DODGE = "dodge",
    /** groups are stacked horizontally as proportion of group total after any previous groups (x scale domain set to [0, 1]) */
    FILL = "fill"
}

interface GeomProps<Datum> {
    /**
     * **data used by this Geom**
     *
     * This will overwrite top-level `data` passed to `GG` as it relates to mappings defined in `aes`.
     */
    data?: Datum[];
    /**
     * **functional mapping applied to `data` for this Geom**
     *
     * This extends the top-level `aes` passed to `GG`. Any repeated mappings defined here will take precedence within the Geom.
     */
    aes?: Aes<Datum>;
    /** attributes passed to the underlying SVG elements */
    attr?: SVGAttributes<SVGRectElement>;
    /** determines how grouped elements are positioned relative to each other (_default_: `Position.STACK`) */
    position?: Position;
    /** determines how elements within bar groups are focused (_default_: `FocusType.GROUP`)  */
    focusType?: FocusType;
    /** should this Geom have a tooltip associated with it (_default_: `true`) */
    showTooltip?: boolean;
    /** padding value (0-1) that sets the space between bars/bar groups (_default_: `0.2`) */
    yPadding?: number;
    /** padding value (0-1) that sets the space between elements positioned with `position={POSITION.DODGE}` (_default_: `0.05`) */
    dodgePadding?: number;
    /** styles applied to focused elements */
    focusedStyle?: CSSProperties;
    /** styles applied to unfocused elements */
    unfocusedStyle?: CSSProperties;
    /** callback called for mousemove events on the drawing area when focusing data */
    onDatumFocus?: (data: Datum[], index: number[]) => void;
    /** callback called for click events on the drawing area when selecting focused data */
    onDatumSelection?: (data: Datum[], index: number[]) => void;
    /** callback called for mouseleave events on the drawing area */
    onExit?: () => void;
    /** should elements enter/update/exit with animated transitions (_default_: `true`) */
    isAnimated?: boolean;
}
declare const GeomBar: {
    <Datum>({ data: localData, aes: localAes, focusedStyle, unfocusedStyle, attr, onDatumFocus, onDatumSelection, onExit, yPadding, dodgePadding, showTooltip, position, focusType, isAnimated, }: GeomProps<Datum>): React.JSX.Element | null;
    displayName: string;
};

interface LegendProps {
    /** title of legend */
    title?: React.ReactNode;
    /** determines vertical/horizontal orientation of categorical legend members (_default_: `LegendOrientation.V`) */
    orientation?: LegendOrientation;
    /** function for formatting legend member labels (categorical) or tick labels (continuous) */
    format?: (v: string, i?: number) => string;
    /** width of continuous legend in pixels (_default_: `320`) */
    width?: number;
    /** approximate number of ticks for continuous legend (_default_: `width / 64`) */
    numTicks?: number;
    /** callback called for click events on legend members */
    onSelection?: (v: string) => void;
    /** additional styles passed to legend container */
    style?: CSSProperties;
}
declare const Legend: <Datum>({ title, style, orientation, format, numTicks, width, onSelection, }: LegendProps) => React.JSX.Element | null;

export { FocusType, GeomBar, type GeomProps, Legend, type LegendProps, Position };