import { default as React, SyntheticEvent } from 'react';
import { DraggableEvent } from 'react-draggable';
export type Position = {
    left: number;
    top: number;
    width: number;
    height: number;
};
export type PartialPosition = {
    left: number;
    top: number;
};
export type PositionParams = {
    containerMargin: [number, number];
    containerPadding: [number, number];
    containerWidth: number;
    containerHeight: number;
    cols: number;
    rowHeight: number;
    maxRows: number;
};
export type ReactDraggableCallbackData = {
    node: HTMLElement;
    x?: number;
    y?: number;
    deltaX: number;
    deltaY: number;
    lastX?: number;
    lastY?: number;
};
export type ReactRef<T> = React.RefObject<T>;
export type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
export type DroppingPosition = {
    left: number;
    top: number;
    e: Event;
};
export type Size = {
    width: number;
    height: number;
};
export type GridResizeEvent = {
    e: SyntheticEvent;
    node: HTMLElement;
    size: Size;
};
export type GridDragEvent = {
    e: DraggableEvent;
    node: HTMLElement;
    newPosition: PartialPosition;
};
export type DragOverEvent = MouseEvent & {
    nativeEvent: {
        layerX: number;
        layerY: number;
    } & Event;
};
export type Margin = [number, number];
export interface BaseLayoutItem {
    /**
     * A string corresponding to the component key.
     * Uses the index of components instead if not provided.
     */
    i: string;
    /**
     * If true el item puede moverse dentro del area sin reorganizar los otros layouuts.
     */
    freeMove?: boolean | undefined;
    /**
     * If true el item solo muestra el header. y reacomoda el layout
     */
    colapsed?: boolean | undefined;
    /**
     * If false desaparece del layout
     */
    visible?: boolean | undefined;
}
export interface LayoutItem extends BaseLayoutItem {
    /**
     * X position in grid units.
     */
    x: number;
    /**
     * Y position in grid units.
     */
    y: number;
    /**
     * Width in grid units.
     */
    w: number;
    /**
     * Height in grid units.
     */
    h: number;
    /**
     * Minimum width in grid units.
     */
    minW?: number | undefined;
    /**
     * Maximum width in grid units.
     */
    maxW?: number | undefined;
    /**
     * Minimum height in grid units.
     */
    minH?: number | undefined;
    /**
     * Maximum height in grid units.
     */
    maxH?: number | undefined;
    /**
     * set by DragEvents (onDragStart, onDrag, onDragStop) and ResizeEvents (onResizeStart, onResize, onResizeStop)
     */
    moved?: boolean | undefined;
    /**
     * If true, equal to `isDraggable: false` and `isResizable: false`.
     */
    static?: boolean | undefined;
    /**
     * If false, will not be draggable. Overrides `static`.
     * Valor por defecto: True
     */
    isDraggable?: boolean | undefined;
    /**
     * If false, will not be resizable. Overrides `static`.
     */
    isResizable?: boolean | undefined;
    /**
     * By default, a handle is only shown on the bottom-right (southeast) corner.
     * Note that resizing from the top or left is generally not intuitive.
     */
    resizeHandles?: ResizeHandle[] | undefined;
    /**
     * If true and draggable, item will be moved only within grid.
     * valor por defecto: False
     */
    isBounded?: boolean | undefined;
}
/**
 * GridLayoutState utilizado para saber si se está en draggin y si el componente ya se renderizó por primera vez
 */
export type GridLayoutState = {
    /**
     * "activeDrag" si es diferente a undefined es el layoutItem del placeHolder
     */
    activeDrag?: LayoutItem;
    /**
     * "mounted" si ya se renderizó por primera vez, se detecta con useEffect
     */
    mounted: boolean;
};
/**
 * "GridLayoutRefState" Debido a la limitación de React de no poder obtener el valor de las variables en
 * las funciones que  useCallback, se debe hacer una copia a un ref para poder obtener el último valor de estado.
 */
export type GridLayoutRefState = {
    /**
     * "layout" se guarda el layout actual con los cambios durante el resizing y/o dragging
     */
    layout: Layout;
    /**
     * "activeDrag" placeHolder mientras se esta moviendo o haciendo resizing
     */
    activeDrag?: LayoutItem;
    /**
     * "oldDragItem" snapshot de layoutItem cuando inicia el dragging
     */
    oldDragItem?: LayoutItem;
    /**
     * "oldLayout" snapshot del layout cuando se inicia el drag o el resize
     */
    oldLayout?: Layout;
    /**
     * "oldResizeItem" snapshot de layoutItem cuando inicia el resizzing
     */
    oldResizeItem?: LayoutItem;
    /**
     * TODO: Documentar
     */
    zIndexes: string[];
    /**
     * colapsedHeight
     */
    colapsedHeight: number;
    /**
     * rowHeight
     */
    rowHeight: number;
};
export type Layout = Array<LayoutItem>;
/** Tipos de datos para el responsive que es nec */
export type Breakpoint = string;
export interface Layouts {
    [P: Breakpoint]: Layout;
}
export type CompactType = 'horizontal' | 'vertical' | null;
export type EventCallback = (layout: Layout, oldItem: LayoutItem | undefined, newItem: LayoutItem, placeholder: LayoutItem | undefined, event: DraggableEvent | SyntheticEvent, element: HTMLElement) => void;
export type LayoutItemType = 'placeholder' | 'layoutItem';
export type LayoutItemRenderProps = {
    i: string;
    type: LayoutItemType;
};
export type LayoutItemRender = (props: LayoutItemRenderProps) => JSX.Element;
export interface CoreProps {
    /**
     * "layoutItemRender" función encargada de renderizar los gridItems
     *  No es reactiva al cambio. Con la función que se inicia el componente
     *
     */
    layoutItemRender: LayoutItemRender;
    /**
     * Indica cual layout se va a maximizar
     */
    maximizeId?: string | undefined;
    /**
     * The classname to add to the root element.
     */
    className?: string | undefined;
    /**
     * Inline-style object to pass to the root element.
     */
    style?: React.CSSProperties | undefined;
    /**
     * This allows setting the initial width on the server side.
     * This is required unless using the HOC <WidthProvider> or similar.
     * Requerido para hacer maxización y cuando se redimensiona las ventanas, permite modificar
     * el ancho de columna cambia
     */
    containerWidth?: number | undefined;
    /**
     * This is required unless using the HOC <WidthProvider> or similar.
     * Requerido para hacer maxización del GridItem
     */
    containerHeight?: number | undefined;
    /**
     * If true, the container height swells and contracts to fit contents.
     * Valor por defecto: false
     */
    autoSize?: boolean | undefined;
    /**
     * A CSS selector for tags that will act as the draggable handle.
     * For example: `draggableHandle: '.MyDragHandleClassName'`
     * If you forget the leading . it will not work.
     */
    draggableHandle?: string | undefined;
    /**
     * A CSS selector for tags that will not be draggable.
     * For example: `draggableCancel: '.MyNonDraggableAreaClassName'`
     * If you forget the leading. it will not work.
     * "".react-resizable-handle" is always prepended to this value.
     * Valor por defecto:
     */
    draggableCancel?: string | undefined;
    /**
     * Compaction type.
     * Valor por defecto: 'vertical'
     * TODO: Incluir compactación amabas
     */
    compactType?: CompactType;
    /**
     * Rows have a static height in pixles, but you can change this based on breakpoints if you like.
     * Valor por defecto: 150'
     */
    rowHeight?: number | undefined;
    /**
     * Altura cuando está colapsado en pixels
     * Valor inicial: 35
     */
    colapsedHeight?: number;
    /**
     * Configuration of a dropping element. Dropping element is a "virtual" element
     * which appears when you drag over some element from outside.
     */
    droppingItem?: {
        i: string;
        w: number;
        h: number;
    } | undefined;
    /**
     * Default Infinity, but you can specify a max here if you like.
     * Note that this isn't fully fleshed out and won't error if you specify a layout that
     * extends beyond the row capacity. It will, however, not allow users to drag/resize
     * an item past the barrier. They can push items beyond the barrier, though.
     * Intentionally not documented for this reason.
     */
    maxRows?: number | undefined;
    /**
     * If set to false it will disable dragging on all children.
     */
    isDraggable?: boolean | undefined;
    /**
     * If set to false it will disable resizing on all children.
     */
    isResizable?: boolean | undefined;
    /**
     * If true and draggable, all items will be moved only within grid.
     */
    isBounded?: boolean | undefined;
    /**
     * Uses CSS3 `translate()` instead of position top/left.
     * This makes about 6x faster paint performance.
     */
    useCSSTransforms?: boolean | undefined;
    /**
     * If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has "transform: scale(n)" css property,
     * we should set scale coefficient to avoid render artefacts while dragging.
     */
    transformScale?: number | undefined;
    /**
     * If true, grid can be placed one over the other.
     * Valor por defecto: false
     */
    allowOverlap?: boolean | undefined;
    /**
     * If true, grid items won't change position when being dragged over.
     * Valor por defecto: false
     */
    preventCollision?: boolean | undefined;
    /**
     * If true, droppable elements (with `draggable={true}` attribute)
     * can be dropped on the grid. It triggers "onDrop" callback
     * with position and event object as parameters.
     * It can be useful for dropping an element in a specific position
     * NOTE: In case of using Firefox you should add
     * `onDragStart={e => e.dataTransfer.setData('text/plain', '')}` attribute
     * along with `draggable={true}` otherwise this feature will work incorrect.
     * onDragStart attribute is required for Firefox for a dragging initialization
     * @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
     * ****** No implementado aún *************
     */
    isDroppable?: boolean | undefined;
    /**
     * Defines which resize handles should be rendered
     * Allows for any combination of:
     * 's' - South handle (bottom-center)
     * 'w' - West handle (left-center)
     * 'e' - East handle (right-center)
     * 'n' - North handle (top-center)
     * 'sw' - Southwest handle (bottom-left)
     * 'nw' - Northwest handle (top-left)
     * 'se' - Southeast handle (bottom-right)
     * 'ne' - Northeast handle (top-right)
     */
    resizeHandles?: ResizeHandle[];
    /**
     * Defines custom component for resize handle
     */
    resizeHandle?: React.ReactNode;
    /**
     * Calls when drag starts.
     */
    onDragStart?: EventCallback | undefined;
    /**
     * Calls on each drag movement.
     */
    onDrag?: EventCallback | undefined;
    /**
     * Calls when drag is complete.
     */
    onDragStop?: EventCallback | undefined;
    /**
     * Calls when resize starts.
     */
    onResizeStart?: EventCallback | undefined;
    /**
     * Calls when resize movement happens.
     */
    onResize?: EventCallback | undefined;
    /**
     * Calls when resize is complete.
     */
    onResizeStop?: EventCallback | undefined;
    /**
     * Calls when some element has been dropped
     */
    onDrop?(layout: Layout[], item: Layout, e: Event): void;
    /**
     * Calls when an element is being dragged over the grid from outside as above.
     * This callback should return an object to dynamically change the droppingItem size
     * Return false to short-circuit the dragover
     * ****** No implementado aún *************
     */
    onDropDragOver?(e: any): {
        w?: number;
        h?: number;
    } | false | undefined;
    /**
     * Ref for getting a reference for the grid's wrapping div.
     * You can use this instead of a regular ref and the deprecated `ReactDOM.findDOMNode()`` function.
     * Importante: Referencia al Div del grid layout, para observar los cambios de altura y ancho con useResizeObserver
     *
     */
    innerRef?: React.Ref<HTMLDivElement>;
}
export interface GridLayoutProps extends CoreProps {
    /**
     * Number of columns in this layout, si no se proporciona 12
     * No hace parte de CoreProps porque en resposive cambia el tipo de de dato
     */
    cols?: number | undefined;
    /**
     * "margin": Indica la margen que va a haber entre gridItems en px [x,y]
     */
    margin?: Margin;
    /**
     * Padding inside the container `[x, y]` in px.
     * Si no se establece se usa containerMargin por defecto
     */
    containerPadding?: Margin;
    /**
     * Layout is an array of object with the format:
     *
     * `{x: number, y: number, w: number, h: number}`
     *
     * The index into the layout must match the key used on each item component.
     * If you choose to use custom keys, you can specify that key in the layout
     * array objects like so:
     *
     * `{i: string, x: number, y: number, w: number, h: number}`
     *
     */
    layout: Layout;
    /**
     * Callback so you can save the layout.
     * Calls back with (currentLayout) after every drag or resize stop.
     */
    onLayoutChange?(layout: Layout): void;
    /**
     * children componente que se requiera renderizar dentro del gridLayout
     */
    children?: React.ReactNode;
}
//# sourceMappingURL=types.d.ts.map