declare namespace SVGLD {
/**
 * Add method when creating a container
 * - Append will append to the last children in list
 * - Insert will always place it at the begining
 * - Replace will remove the selected container and insert a new one
 * (default: Append)
 */
export enum AddMethod {
    Append = 0,
    Insert = 1,
    Replace = 2,
    ReplaceParent = 3
}

export enum AppState {
    MainMenu = 0,
    Loading = 1,
    Loaded = 2
}

export enum MessageType {
    Normal = 0,
    Success = 1,
    Warning = 2,
    Error = 3
}

export enum Orientation {
    Horizontal = 0,
    Vertical = 1
}

export enum Position {
    Left = 0,
    Down = 1,
    Up = 2,
    Right = 3
}

export enum PositionReference {
    TopLeft = 0,
    TopCenter = 1,
    TopRight = 2,
    CenterLeft = 3,
    CenterCenter = 4,
    CenterRight = 5,
    BottomLeft = 6,
    BottomCenter = 7,
    BottomRight = 8
}

/**
 * Describe the type of the property.
 * Used for the assignation in the OnPropertyChange function
 * See ContainerOperations.ts's OnPropertyChange
 */
export enum PropertyType {
    /**
     * Simple property: is not inside any object: id, x, width... (default)
     */
    Simple = 0,
    /**
     * Style property: is inside the style object: stroke, fillOpacity...
     */
    Style = 1,
    /**
     * Margin property: is inside the margin property: left, bottom, top, right...
     */
    Margin = 2
}



export interface IAction {
    Id: string;
    CustomLogo: IImage;
    Label: string;
    Description: string;
    Action: string;
    AddingBehavior: AddMethod;
}

export interface IAPIConfiguration {
    apiFetchUrl?: string;
    apiSetContainerListUrl?: string;
    apiGetFeedbackUrl?: string;
}









/** Model of available container used in application configuration */
export interface IAvailableContainer {
    /** type */
    Type: string;
    /** displayed text */
    DisplayedText?: string;
    /** category */
    Category?: string;
    /** orientation */
    Orientation?: Orientation;
    /** horizontal offset */
    X?: number;
    /** vertical offset */
    Y?: number;
    /** width */
    Width?: number;
    /** height */
    Height?: number;
    /**
     * Minimum width (min=1)
     */
    MinWidth?: number;
    /**
     * Maximum width
     */
    MaxWidth?: number;
    /**
     * Minimum height (min=1)
     */
    MinHeight?: number;
    /**
     * Maximum height
     */
    MaxHeight?: number;
    /** margin */
    Margin?: IMargin;
    /** true if anchor, false otherwise */
    IsAnchor?: boolean;
    /** true if flex, false otherwise */
    IsFlex?: boolean;
    /** Method used on container add */
    AddMethod?: AddMethod;
    /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
    PositionReference?: PositionReference;
    /**
     * (optional)
     * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
     * to draw some patterns that can be bind to the properties of the container
     * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
     * Example :
     * ```
     * `<rect width="{width}" height="{height}" style="{style}"></rect>
     * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
     * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
     * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
     * `
     * ```
     */
    CustomSVG?: string;
    /**
     * (optional)
     * Disabled when Pattern is used.
     *
     * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
     * to draw some patterns that can be bind to the properties of the container
     * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
     * Example :
     * ```
     * `<rect width="{width}" height="{height}" style="{style}"></rect>
     * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
     * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
     * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
     * `
     * ```
     */
    DefaultChildType?: string;
    /**
     * Allow to use a Pattern to create the list of children
     * Cannot be used with DefaultChildType,
     * DefaultChildType will be disabled for this container and the children
     */
    Pattern?: string;
    /** Hide the children in the treeview */
    HideChildrenInTreeview?: boolean;
    /** if true, show the dimension of the container */
    ShowSelfDimensions?: Position[];
    /** if true show the overall dimensions of its children */
    ShowChildrenDimensions?: Position[];
    /**
     * if true, allows a parent dimension borrower to uses its x coordinate for as a reference point for a dimension
     */
    MarkPosition?: Orientation[];
    /**
     * if true, show a dimension from the edge of the container to end
     * and insert dimensions marks at lift up children (see MarkPosition)
     */
    ShowDimensionWithMarks?: Position[];
    /**
     * if true, hide the entry in the sidebar (default: false)
     */
    IsHidden?: boolean;
    /**
     * Disable a list of available container to be added inside
     */
    Blacklist?: string[];
    /**
     * Cannot be used with blacklist. Whitelist will be prioritized.
     * To disable the whitelist, Whitelist must be undefined.
     * Only allow a set of available container to be added inside
     */
    Whitelist?: string[];
    /**
     * (optional)
     * Style of the <rect>
     */
    Style?: React.CSSProperties;
    /**
     * List of possible actions shown on right-click
     */
    Actions?: IAction[];
    /**
     * (optional)
     * User data that can be used for data storage or custom SVG
     */
    UserData?: IKeyValue[];
}



/**
 * Model of available symbol to configure the application */
export interface IAvailableSymbol {
    Name: string;
    Image: IImage;
    Width?: number;
    Height?: number;
    PositionReference?: PositionReference;
}

export interface ICategory {
    Type: string;
    DisplayedText?: string;
}






/** Model of configuration for the application to configure it */
export interface IConfiguration {
    AvailableContainers: IAvailableContainer[];
    AvailableSymbols: IAvailableSymbol[];
    Categories: ICategory[];
    Patterns: IPattern[];
    MainContainer: IAvailableContainer;
    APIConfiguration?: IAPIConfiguration;
}


export interface IContainerModel {
    children: string[];
    properties: IContainerProperties;
    userData: Record<string, string | number>;
}
/**
 * Macro for creating the interface
 * Do not add methods since they will be lost during serialization
 */
export class ContainerModel implements IContainerModel {
    children: string[];
    properties: IContainerProperties;
    userData: Record<string, string | number>;
    constructor(properties: IContainerProperties, children?: string[], userData?: {});
}







/**
 * Properties of a container
 */
export interface IContainerProperties {
    /** id of the container */
    id: string;
    /** type matching the configuration on construction */
    type: string;
    /** id of the parent container (null when there is no parent) */
    parentId: string;
    /** id of the linked symbol ('' when there is no parent) */
    linkedSymbolId: string;
    /** Text displayed in the container */
    displayedText: string;
    /** orientation */
    orientation: Orientation;
    /** horizontal offset */
    x: number;
    /** vertical offset */
    y: number;
    /** margin */
    margin: IMargin;
    /** width */
    width: number;
    /** height */
    height: number;
    /**
     * Minimum width (min=1)
     */
    minWidth: number;
    /**
     * Maximum width
     */
    maxWidth: number;
    /**
     * Minimum height (min=1)
     */
    minHeight: number;
    /**
     * Maximum height
     */
    maxHeight: number;
    /** true if anchor, false otherwise */
    isAnchor: boolean;
    /** true if flex, false otherwise */
    isFlex: boolean;
    /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
    positionReference: PositionReference;
    /** Hide the children in the treeview */
    hideChildrenInTreeview: boolean;
    /** if true, show the dimension of the container */
    showSelfDimensions: Position[];
    /** if true show the overall dimensions of its children */
    showChildrenDimensions: Position[];
    /**
     * if true, allows a parent dimension borrower to borrow its x coordinate
     * as a reference point for a dimension
     */
    markPosition: Orientation[];
    /**
     * if true, show a dimension from the edge of the container to end
     * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
     */
    showDimensionWithMarks: Position[];
    /**
     * Warnings of a container
     */
    warning: string;
    /**
     * (optional)
     * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
     * to draw some patterns that can be bind to the properties of the container
     * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
     * Example :
     * ```
     * `<rect width="{width}" height="{height}" style="{style}"></rect>
     * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
     * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
     * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
     * `
     * ```
     */
    customSVG?: string;
    /**
     * (optional)
     * Style of the <rect>
     */
    style?: React.CSSProperties;
    /**
     * (optional)
     * User data that can be used for data storage or custom SVG
     */
    userData?: IKeyValue[];
}



export interface IEditorState {
    history: IHistoryState[];
    historyCurrentStep: number;
    configuration: IConfiguration;
}


export interface IGetFeedbackRequest {
    /** Current application state */
    ApplicationState: IHistoryState;
}


export interface IGetFeedbackResponse {
    messages: IMessage[];
}



export interface IHistoryState {
    /** Last editor action */
    lastAction: string;
    /** Reference to the main container */
    mainContainer: string;
    containers: Map<string, IContainerModel>;
    /** Id of the selected container */
    selectedContainerId: string;
    /** Counter of type of container. Used for ids. */
    typeCounters: Record<string, number>;
    /** List of symbols */
    symbols: Map<string, ISymbolModel>;
    /** Selected symbols id */
    selectedSymbolId: string;
}

/**
 * Model of an image with multiple source
 * It must at least have one source.
 *
 * If Url/Base64Image and Svg are set,
 * Url/Base64Image will be shown in the menu while SVG will be drawn
 */
export interface IImage {
    /** Name of the image */
    Name: string;
    /** (optional) Url of the image */
    Url?: string;
    /** (optional) base64 data of the image */
    Base64Image?: string;
    /** (optional) SVG string */
    Svg?: string;
}


export interface IInputGroup {
    key: string;
    text: React.ReactNode;
    value: string;
}

export interface IKeyValue {
    Key: string;
    Value: string;
}

export interface ILanguage {
    language: string;
    dictionary: Record<string, string>;
    languageChange?: (selected: string) => void;
}

export interface IMargin {
    left?: number;
    bottom?: number;
    top?: number;
    right?: number;
}


export interface IMessage {
    text: string;
    type: MessageType;
}


export interface IPattern {
    /**
     * Unique id for the pattern
     */
    id: string;
    /**
     * Text to display in the sidebar
     */
    text: string;
    /**
     * IAvailableContainer id used to wrap the children.
     */
    wrapper: string;
    /**
     * List of ids of Pattern or IAvailableContainer
     * If a IAvailableContainer and a Pattern have the same id,
     * IAvailableContainer will be prioritized
     */
    children: string[];
}
export type ContainerOrPattern = IAvailableContainer | IPattern;
export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined;
export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean;

export interface IPoint {
    x: number;
    y: number;
}




export interface ISetContainerListRequest {
    /** Name of the action declared in the API */
    Action: IAction;
    /** Selected container */
    Container: IContainerModel;
    /** The previous sibling container */
    PreviousContainer: IContainerModel | undefined;
    /** The next sibling container */
    NextContainer: IContainerModel | undefined;
    /** Current application state */
    ApplicationState: IHistoryState;
}



export interface ISetContainerListResponse {
    Containers: IAvailableContainer[];
    AddingBehavior?: AddMethod;
}

/**
 * A SizePointer is a pointer in a 1 dimensional array of width/space
 * x being the address where the pointer is pointing
 * width being the overall (un)allocated space affected to the address
 */
export interface ISizePointer {
    x: number;
    width: number;
}


export interface ISymbolModel {
    /** Identifier */
    id: string;
    /** Type */
    type: string;
    /** Configuration of the symbol */
    config: IAvailableSymbol;
    /** Horizontal offset */
    x: number;
    /** Width */
    width: number;
    /** Height */
    height: number;
    /** List of linked container id */
    linkedContainers: Set<string>;
}

}