/**
 * @author Martin Karkowski
 * @email m.karkowski@zema.de
 * @create date 2019-02-21 09:12:33
 * @modify date 2020-03-11 17:12:56
 * @desc [description]
 */

import { IFont } from './IFont';
import { IScaling } from './IScaling';
import { IShadow } from './IShadow';
import { IWidthContraint } from './IWidthContraint';

export interface IBaseNodeOptions<K=any> {

    /**
     * Flag, to Enable / Disable Auto-Resizing.
     */
    autoResize?: boolean;

    /**
     * Flag, used for checking, whether deleting
     * of the corresponding element is allowed
     */
    deletable?: boolean;

    /**
     * Template, that will be used during clustering
     */
    clusterTemplate?: ((node: IBaseNodeOptions) => IBaseNodeOptions) | IBaseNodeOptions;

    /**
     * The width of the border of the node.
     */
    borderWidth?: number;

    /**
     * The width of the border of the node when it is selected. When undefined, the borderWidth * 2 is used.
     */
    borderWidthSelected?: number;

    /**
     * When the shape is set to image or circularImage, this option can
     * be an URL to a backup image in case the URL supplied in the image
     * option cannot be resolved.
     */
    brokenImage?: string;

    /**
     * Options how to render node, if it is choosen
     */
    chosen?: boolean | {
        /**
         * When true, selecting or hovering on a node will change its characteristics according the default.
         * When false, no change to the node will occur when the node is chosen.
         *
         * If a function is supplied, it is called when the node is chosen.
         *
         * function(values, id, selected, hovering) {
         *      values.property = chosenValue;
         * }
         *
         * Any of the incoming arguments may be used to determine characteristic changes. If a property
         * is not specifically assigned by the supplied function, it will be left unchanged. A specific
         * function may be assigned to each particular node in its options, or to all in the network's
         * nodes options.
         *
         * The properties define the characteristics that can be changed as follows:
         *
         * Property	        Node Reference
         * color	        see color.background
         * borderWidth	    see borderWidth
         * borderColor	    see color.border
         * size	            see size
         * borderDashes	    see shapeProperties.borderDashes
         * borderRadius	    see shapeProperties.borderRadius
         * shadow	        see shadow.enabled
         * shadowColor	    see shadow.color
         * shadowSize	    see shadow.size
         * shadowX	        see shadow.x
         * shadowY	        see shadow.y
         *
         */
        node?: boolean | ((values, id, selected, hovering) => void),
        /*
         * 	When true, selecting or hovering on a node will change its label's characteristics according
         * the default. When false, no change to the node's label will occur when the node is chosen.
         *
         * If a function is supplied, it is called when the node is chosen.
         *
         * function(values, id, selected, hovering) {
         *      values.property = chosenValue;
         * }
         *
         * Any of the incoming arguments may be used to determine characteristic changes. If a property
         * is not specifically assigned by the supplied function, it will be left unchanged. A specific
         * function may be assigned to each particular node in its options, or to all in the network's
         * nodes options.
         *
         * The properties define the characteristics that can be changed as follows:
         *
         * Property	        Node Reference
         * color	        see font.color
         * size	            see font.size
         * face	            see font.face
         * mod	            font modifier ('bold', 'italic', etc.)
         * vadjust      	see font.vadjust
         * strokeWidth  	see font.strokeWidth
         * strokeColor	    see font.strokeColor
         *
         */
        label?: boolean | ((values, id, selected, hovering) => void)
    };

    /**
     * Color Settings of the Node.
     */
    color?: string | {
        /**
         * The color of the border of the node when it is not selected or hovered over
         * (assuming hover is enabled in the interaction module).
         */
        border?: string,
        /**
         * The color of the background of the node when it is not selected or hovered
         * over (assuming hover is enabled in the interaction module).
         */
        background?: string,
        /**
         * The color the node when it is selected. Alternatively you can just supply
         * a string color value.
         */
        highlight?: string | {
            /**
             * The color of the border of the node when it is selected.
             */
            border: string,
            /**
             * The color of the background of the node when it is selected.
             */
            background: string
        },
        /**
         * The color the node when the mouse hovers over it (assuming hover
         * is enabled in the interaction module). Shorthand like above is
         * also supported.
         */
        hover?: string | {
            /**
             * The color of the border of the node when the mouse hovers over
             * it (assuming hover is enabled in the interaction module).
             */
            border?: string,
            /**
             * The color of the background of the node when the mouse hovers
             * over it (assuming hover is enabled in the interaction module).
             */
            background?: string
        }
    };

    /** Selector for selecting a corresponding Edit-Page */
    editorComponentSelector?: string;

    fixed?: boolean | {
        /** When true, the node will not move in the X direction. */
        x?: boolean,
        /** When true, the node will not move in the Y direction. */
        y?: boolean
    };

    /**
     * Settings of the Font
     */
    font?: IFont;

    /**
     * A Group template.
     */
    group?: string;

    /**
     * An Id for the currently assigned group.
     */
    groupId?: number

    /**
     * If false, no heightConstraint is applied. If a number is specified,
     * the value is used as the minimum height of the node. The node's
     * height will be set to the minimum if less than the value.
     */
    heightConstraint?: boolean | number | {
        minimum?: number,
        valign: `middle` | `top` | `bottom`
    };

    /**
     * Toggle the visibility of the Node.
     */
    hidden?: boolean;

    /** Required, if a html-sahpe is selected */
    html?: {
        /** The ID of the HTML-Element which should be used. (Use an existing one) */
        id?: string;
        /** Valid HTML-Code, which should be used */
        code?: string,
        /** Additional border between node and HTML-Div */
        border?: number,
        /** Settings for the Overflow */
        overflow?: `hidden`,
        /** Minimal Width of the Element which is reuqired to render The HTML. Otherwise its grayed out */
        minWidth?: number,
        /** Minimal Height of the Element which is reuqired to render The HTML. Otherwise its grayed out */
        minHeight?: number,
    };

    /** Define segments for sub-nodes */
    segment?: {
        [index: string]: {
            /** Text that should be rendered in the Center of the Node */
            label?: string,
            // Defined Background-Color
            background?: string,
            hidden?: boolean,
            // Defined Height
            height?: number,
            width?: number,
            /** Required, if a html-sahpe is selected */
            html?: {
                /** The ID of the HTML-Element which should be used */
                id?: string;
                /** Valid HTML-Code, which should be used */
                code?: string,
                /** Additional border between node and HTML-Div */
                border?: number,
                /** Settings for the Overflow */
                overflow?: `hidden`,
                /** Minimal Width of the Segement which is reuqired to render The HTML. Otherwise its grayed out */
                minWidth?: number,
                /** Minimal Height of the Segement which is reuqired to render The HTML. Otherwise its grayed out */
                minHeight?: number,
            },
            /** Function to Render the Segment */
            drawFunction?: (l:number,t:number, w:number, h:number, shape:any, ctx: any) => any;
        }
    };

    /** Icon Properties. See original Docu */
    icon?: {
        face?: `FontAwesome`,
        code?: string,
        size?: number
        color?: string
    };

    /** Id of the Node */
    id: string;
    
    /** Image Settings. See original Docu
     */
    image?: string | {
        selected?: string,
        unselected?: string
    };

    /** Flag indicating whether the Element should be handled like a Connector (auto placement) */
    isConnector?: boolean;
    
    /** Flag indicating whether the Element should be handled like a Resizer */
    isResizer?: boolean;

    /**
     * The label is the piece of text shown in or under the node, depending on the shape. 
     */
    label?: string;

    /**
     * Position of a Connector, if the node is a Connector
     */
    position?: `top` | `left` | `right` | `bottom`;

    /**
     * Determines whether or not the label becomes bold when the node is selected. 
     */
    labelHighlightBold?: boolean;

    /**
     * Flag to render the node as selected
     */    
    selected?: boolean;
    
    /** Flag, to make the Element able to drop items in it. */
    receiveDropableElements?: boolean;

    /** Flag to make an object Dropable. Thereby it can be pulled into
     * another container which is capable of picking up dropped items
     * (Therefore the Flag contentDropable must be used)
     */
    dropable?: boolean;

    /**
     * When using the hierarchical layout, the level determines where the node is going to be positioned.
     * Otherwise is used to define the Render-Order.
     */
    level?: number;

    /** Margin for the Shapes `box`, `circle`, `database`, `icon`, `text` */
    margin?: number | {
        top: number,
        right: number,
        bottom: number,
        left: number,
    };    

    /**
     * User Data of the Elements.
     */
    data?: K;

    /**
     * The barnesHut physics model (which is enabled by default) is based on an
     * inverted gravity model. By increasing the mass of a node, you increase it`s
     * repulsion.
     *
     * Values between 0 and 1 are not recommended.
     * Negative or zero values are not allowed. These will generate a console
     * error and will be set to 1.
     */
    mass?: number;
    /**
     * When false, the node is not part of the physics simulation. It will not move except for from manual dragging. 
     */
    physics?: boolean;
    /**
     * If the value option is specified, the size of the nodes
     * will be scaled according to the properties in this object. All node
     * shapes can be scaled, but some only when label scaling is enabled as
     * their size is based on the size of the label. Only scalable when
     * label scaling is enabled are: ellipse,circle, database, box, text. 
     * Always scalable are: image, circularImage, diamond, dot, star, triangle,
     * triangleDown, hexagon, square and icon. 
     * Keep in mind that when using scaling, the size option is neglected.
     */
    scaling?: IScaling;

    /**
     * When true, the node casts a shadow using the default settings. This
     * can be further refined by supplying an object.
     */
    shadow?: IShadow;
    
    /**
     * The shape defines what the node looks like. There are three types
     * of nodes. One type has the label inside of it and the other type
     * has the label underneath it. The third type is a custom shape you
     * can draw whatever you want to represent the node.
     */
    shape?:
        `ellipse` | `circle` | `database` | `box` |
        `text` | `image`| `circularImage`| `diamond`|
        `dot`| `star`| `triangle`| `triangleDown`|
        `hexagon`| `square`| `icon` |

        // Extended Elements
        `process` | `product` | `equipment` | `value` |
        `variable` | `multinode` | `htmlnode` | `swimlane-vertical` | `swimlane-horizontal` | `place`;
    
    /**
     * Configuration of the shape.
     */
    shapeProperties?: {
         // only for borders
        borderDashes?: boolean,
        // only for box shape
        borderRadius?: number, 
        // only for image and circularImage shapes    
        interpolation?: boolean,  
        // only for image and circularImage shapes
        useImageSize?: boolean,  
        // only for image shape
        useBorderWithImage?: boolean  
    };

    /** Rendered Value of a Connector */
    renderedValue?: string;

    /** Custom Header Draw Function */
    headerDrawfunction?: (l:number,t:number, w:number, h:number, shape:any, ctx: any) => any;

    /**
     * The size is used to determine the size of node shapes that do not have the
     * label inside of them. These shapes are: image, circularImage, diamond, dot,
     * star, triangle, triangleDown, hexagon, square and icon
     */
    size?: number;

    /**
     * Title to be displayed when the user hovers over the node.
     * The title can be an HTML element or a string containing plain text or HTML.
     */
    title?: string;

    /**
     * When a value is set, the nodes will be scaled using the options in the scaling
     * object defined above.
     */
    value?: number;

    /** See official Docu */
    widthConstraint?: IWidthContraint;

    /** Flag, to enable / disable the Connector Titles for a Node */
    renderConnectorTitles?: boolean;

    /** Only Relevant if the Element is a Resizer. If so, you have to specify the Segment, which
     * should be resized by the connector.
     */
    resizingSegment?: string;

    /** X-Position */
    x?: number;
    /** Y-Position */
    y?: number;

    /** Max X-Position */
    maxX?: number;
    /** Max Y-Position */
    maxY?: number;
    /** Min-X Position */
    minX?: number;
    /** Min-Y Position */
    minY?: number;

    /** Width of the Shape */
    width?: number;

    /** Height of the Shape */
    height?: number;

    /** The Parent Node */
    parent?: string;

    /** A Type of the Node */
    type?: string;
}