import { Breakpoint, CoreProps, Layout, Layouts, Margin } from '../../types';
export type DefaultBreakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
export type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
export type Breakpoints<T extends Breakpoint> = Readonly<Record<T, number>>;
/**
 * "ResponsiveState" interface usada para manejar el estado reactivo del Responsive
 */
export type ResponsiveState = {
    /**
     * "breakpointLayout" variable de estado que sirve de parametro de entrada al GridLayout
     * Esta variable cambia con base en los movimientos del usuario y los cambios a traves de los props
     */
    breakpointLayout: Layout;
    /**
     * "breakpoint" Breeakpoint actual
     */
    breakpoint: Breakpoint;
    /**
     * "cols" Columnas con base en el brekpoint actual
     */
    cols: number;
    /**
     * "fireOnLoadLayoutChange" Indica si se debe notificiar el evento "onLayoutChange" en la primera carga, pero solo
     * cuando el layout que viende de la prop es diferente despues verificarlo y compactarlo.
     * Este valor normalmente es falso, sin embargo al momento de cambiar el compactType en un despliegue puede arrojar un
     * layout diferente por cambio en la forma de compactación
     */
    fireOnLoadLayoutChange?: boolean;
    /**
     * "contaierMargin" margen del breakpoint actual para todo los gridItems
     */
    contaierMargin: Margin;
    /**
     * "contaierPadding" padding del contenedor para el brekpoint actual
     */
    contaierPadding: Margin;
    /**
     * colapsedHeight: Valor de altura de un grid item colapsado.
     */
    colapsedHeight: number;
    /**
     * colapsedHeight: Valor de altura de un grid item colapsado.
     */
    rowHeight: number;
};
export type OnLayoutChangeCallback = (layout: Layout, layouts: Layouts) => void;
export type LayoutItemResponsive = {
    i: string;
    freeMove: boolean;
};
/**
 * "ResponsiveMargin" interface para denotar el padding o margin de manera responsive que incluye la opción no responsive Marghin
 */
export type ResponsiveMargin = {
    [key: Breakpoint]: Margin;
} | Margin;
/**
 * "RefResponsiveState" interface para manejar las variables de referencia que son accesibles en useCallbacs
 * Adicionalmente sirve para comparar las props vs lo ultimo guardado y tomar acciones cuando realmente cambian los datos.
 */
export type RefResponsiveState = {
    /**
     * "cols": ultimo valor de la prop cols
     */
    cols: BreakpointCols;
    /**
     * "currentBreakpointCols": Cantidad de columnnas que tiene el breakpoint actual
     */
    currentBreakpointCols: number;
    /**
     * "currentBreakpoint": brekpoint actual
     */
    currentBreakpoint: Breakpoint;
    /**
     * "layouts": todos los layout por cada breakpoint con las moficaciones hechas por el usuario,
     * puede diferir a la que viene por los props, por las diferentes transformaciones y se ha tomado la decision de que
     * no sea controlado el componente.
     */
    layouts: Layouts;
    /**
     * "breakpoints" breakpoints actuales, se inicializa con los breakpoints que vienen de las props
     */
    breakpoints: Breakpoints<Breakpoint>;
    /**
     * "containerWidth" ancho del contendor offsetParent.width (No incluye el contenido oculto )
     */
    containerWidth: number;
    /**
     * "containerHeight" altura del contendor offsetParent.height (No incluye el contenido oculto )
     */
    containerHeight: number;
    /**
     * colapsedHeight: Valor de altura de un grid item colapsado.
     */
    colapsedHeight: number;
    /**
     * colapsedHeight: Valor de altura de un grid item colapsado.
     */
    rowHeight: number;
};
export type ContainerChangeEvent = {
    containerWidth: number;
    containerHeight: number;
    breakpoint: Breakpoint;
    cols: number;
};
export type OnContainerChange = (event: ContainerChangeEvent) => void;
export type BreakpointCols = {
    [key: Breakpoint]: number;
};
export interface ResponsiveProps extends Omit<CoreProps, 'colapsedHeight' | 'rowHeight'> {
    /**
     * "breakpoint" permite configurar a traves de prop el breakpoint a mostrar,
     * por encima del que puede estar detectando en el contenedor root del gridLayout
     */
    breakpoint?: Breakpoint | undefined;
    /**
     * "breakpoints" indica los breakpoints en que medidas del contenedor cambian
     * Para los valores por defecto sería:
     * lg cuando es mayor a 1200 pixels
     * md: Entre 996 y 1200
     * sm: Entre 768 y 996
     * etc.
     * Valor por defecto: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
     */
    breakpoints?: Breakpoints<Breakpoint>;
    /**
     * "cols" Indica las columnas por cada breakpoint
     * Valor por defecto: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 1 }
     */
    cols?: BreakpointCols;
    /**
     * "layouts" Objeto que contiene los layout por cada breakpoint
     */
    layouts: ResponsiveLayout<Breakpoint>;
    /**
     * "containerWidth" Ancho del contendor
     * TODO: Reservar espacio para el scrollbar vertical
     */
    containerWidth: number;
    /**
     * "containerHeight" Alto del contendor
     * TODO: Reservar espacio para el scrollbar horizontal
     */
    containerHeight: number;
    /**
     * "containerMargin" margin de para los gridItems
     */
    containerMargin?: ResponsiveMargin;
    /**
     * "containerPadding" padding del contenedor
     */
    containerPadding?: ResponsiveMargin;
    /**
     * "onLayoutChange" handler que recibirá los cambios del layout actual
     */
    onLayoutChange?: OnLayoutChangeCallback;
    /**
     * "onLayoutChange" handler que recibirá los cambios asociados a las medidas del contenedor, breakpoint y columnas
     */
    onContainerChange?: OnContainerChange;
    /**
     * colapsedHeight: Valor de altura de los grid items colapsados.
     */
    colapsedHeight: number | Record<string, number>;
    rowHeight: number | Record<string, number>;
    /**
     * children componente que se requiera renderizar dentro del gridLayout
     */
    children?: React.ReactNode;
}
/**
 * "ResponsiveInitialStateProps" interfaz usada en la inicialización y conciliación del primer estado del componente
 */
export type ResponsiveInitialStateProps = Pick<ResponsiveProps, 'containerWidth' | 'containerHeight' | 'breakpoint' | 'breakpoints' | 'cols' | 'compactType' | 'layouts' | 'containerMargin' | 'containerPadding' | 'colapsedHeight' | 'rowHeight'>;
//# sourceMappingURL=types.d.ts.map