import { CSSProperties } from 'react';
import { FunctionComponent } from 'react';
import { ReactNode } from 'react';

export declare const AreaSelector: FunctionComponent<IAreaSelectorProps>;

declare type CustomAreaRenderer = (areaProps: IAreaRendererProps) => ReactNode;

declare type CustomStyles = Omit<CSSProperties, 'position' | 'touchAction' | 'top' | 'left' | 'width' | 'height' | 'boxSizing'>;

export declare interface IArea extends IRectangle {
    unit: 'px' | '%';
    isNew?: boolean;
    isChanging?: boolean;
    areaStyle?: CustomStyles;
}

export declare interface IAreaRendererProps extends Omit<IArea, 'customAreaRenderer'> {
    areaNumber: number;
}

export declare interface IAreaSelectorProps extends Partial<IDefaultAreaSelectorProps> {
    children?: ReactNode;
    areas: IArea[];
    onChange: (areas: IArea[]) => void;
    maxWidth?: number;
    maxHeight?: number;
    wrapperStyle?: Omit<CSSProperties, 'touchAction' | 'boxSizing'>;
    globalAreaStyle?: CustomStyles;
    customAreaRenderer?: CustomAreaRenderer;
    mediaWrapperClassName?: string;
}

declare interface IDefaultAreaSelectorProps {
    maxAreas: number;
    unit: IPropUnit;
    minWidth: number;
    minHeight: number;
    debug: boolean;
}

declare type IPropUnit = 'pixel' | 'percentage';

declare interface IRectangle {
    x: number;
    y: number;
    width: number;
    height: number;
}

export { }