OnDropActions = {
    LeaveInPlace: 0,
    MoveToPosition: 1
};
Ext.define('HotSpotClass15', {
    extend: 'DisplayableAction',
    constructor: function(cfgXML, o, actionSequence) {
        this.ButtonType = ButtonFunctions.NormalButton;
        this.Value = null;
        this.MenuOptionID = -1;
        this.NavigationType = NavigationTypes.Next;
        this.Key1 = null;
        this.Key2 = null;
        this.IsDropTarget = false;
        this.OnDropAction = OnDropActions.LeaveInPlace;
        this.OnDropX = 0;
        this.OnDropY = 0;
        this.RespondToMouseOver = false;
        this.RespondToMouseDown = false;
        this.RespondToClick = false;
        this.RespondToDoubleClick = false;
        this.RespondToDrop = false;
        this.ClickEventValue = null;
        this.MouseOverValue = null;
        this.DropZone = null;
        this.HoldingDDButton = null;
        this.callParent([cfgXML, o, actionSequence]);
        this.ButtonType = XmlHelper.getInteger(cfgXML, "buttonType");
        this.Value = XmlHelper.getString(cfgXML, "value");
        this.MenuOptionID = XmlHelper.getInteger(cfgXML, "menuOptionID");
        this.NavigationType = XmlHelper.getInteger(cfgXML, "navigationType");
        this.Key1 = XmlHelper.tryGetValue(cfgXML, "key1", TryGetValueOption.Normal, null);
        this.Key2 = XmlHelper.tryGetValue(cfgXML, "key2", TryGetValueOption.Normal, null);
        this.IsDropTarget = XmlHelper.getBoolean(cfgXML, "isDropTarget");
        this.OnDropAction = XmlHelper.getInteger(cfgXML, "onDropAction");
        this.OnDropX = XmlHelper.getInteger(cfgXML, "onDropX");
        this.OnDropY = XmlHelper.getInteger(cfgXML, "onDropY");
        this.RespondToMouseOver = XmlHelper.getBoolean(cfgXML, "respondToMouseOver");
        this.RespondToMouseOut = XmlHelper.getBoolean(cfgXML, "respondToMouseOut");
        this.RespondToMouseDown = XmlHelper.getBoolean(cfgXML, "respondToMouseDown");
        this.RespondToClick = XmlHelper.getBoolean(cfgXML, "respondToClick");
        this.RespondToDoubleClick = XmlHelper.getBoolean(cfgXML, "respondToDoubleClick");
        this.RespondToDrop = XmlHelper.getBoolean(cfgXML, "respondToDrop");
        this.ClickEventValue = XmlHelper.tryGetValue(cfgXML, "respondToClickEventValue", TryGetValueOption.Normal, null);
        this.MouseOverValue = XmlHelper.tryGetValue(cfgXML, "respondToMouseOverValue", TryGetValueOption.Normal, null);
        this.MouseOutValue = XmlHelper.tryGetValue(cfgXML, "respondToMouseOutValue", TryGetValueOption.Normal, null);
        var clickTriggerCount = 0;
        clickTriggerCount += (this.RespondToMouseDown) ? 1 : 0;
        clickTriggerCount += (this.RespondToClick) ? 1 : 0;
        clickTriggerCount += (this.RespondToDoubleClick) ? 1 : 0;
        // this.ShowIntroductionListOnce = true;
        if (clickTriggerCount > 1) {
            Author.log("Hotspot ClickTrigger is more than one!");
        }
    },
    initializeDC: function(bg) {
        this.initializeDisplayComponent(bg);
        //   this.ContentContainer.setStyle("background-color", "green");

        if (!this.IsDropTarget) {
            this.setCursor(CursorTypes.Pointer);
        }
        this.setupEventListeners();
    },
    setupEventListeners: function() {
        //this.ContentContainer.addListener("mousedown", this.onMouseDown, this);
        //if (this.RespondToClick) {
        this.ContentContainer.addListener("click", this.onClick, this);
        // }
        if (this.RespondToDoubleClick) {
            this.ContentContainer.addListener("dblclick", this.onDoubleClick, this);
        }
        if (this.RespondToMouseDown) {
            this.ContentContainer.addListener("mousedown", this.onMouseDown, this);
        }
        if (this.RespondToMouseOver) {
            this.ContentContainer.addListener("mouseenter", this.onMouseEnter, this);
        }
        if (this.RespondToMouseOut) {
            this.ContentContainer.addListener("mouseleave", this.onMouseLeave, this);
        }
    },
    reset: function(){
        this.HoldingDDButton = null;
    },
    getInteractionValue: function () {
        if (this.HoldingDDButton !== null) {
            return this.HoldingDDButton.Value;
        } else {
            return this.Value;
        }
    },
    onDDButtonEnter: function(ddButton){
    },
    onDDButtonOut: function(ddButton){
       
    },
    onDDButtonOver: function(ddButton){
    },
    onDDButtonDrop: function (x, y, ddButton) {
       
    },
    onClick: function(evt, el, o){
        if (evt)  evt.stopPropagation();
       // Author.log(this.ButtonType);
        switch (this.ButtonType) {
            case ButtonFunctions.NavigationButton:
                Author.DisplayManager.doNavigationAction(this.NavigationType, this);
                break;
            case ButtonFunctions.MenuButton:
                Author.DisplayManager.gotoLessonNode(this.MenuOptionID);
                break;
            case ButtonFunctions.NormalButton:
                if (this.RespondToClick) {
                    Author.DisplayManager.tryToTriggerResponse(this.Name, this.ClickEventValue, this.ClickEventValue);
                }
        }


    },
    onDoubleClick: function(evt, el, o) {
        if (this.RespondToDoubleClick) {
            //  Author.log('HotSpot RespondToDoubleClick');
            Author.DisplayManager.tryToTriggerResponse(this.Name, this.ClickEventValue, this.ClickEventValue);
        }
    },
    onMouseDown: function(evt, el, o) {
        if (this.RespondToMouseDown) {
            // Author.log('HotSpot RespondToMouseDown');
            Author.DisplayManager.tryToTriggerResponse(this.Name, this.ClickEventValue, this.ClickEventValue);
        }
    },
    isValidMouseEnter: function(from, to) {
        if (!from || !to) {
            return false;
        }
        var fromActionInfo = AuthorCommons.getActionInfoFromElementID(from.id);
        if (fromActionInfo) {
            // Author.log(print(fromActionInfo));
            if (fromActionInfo.ActionID !== this.id) {
                return true;
            } else {
                return (!from.contains || from.contains(to) || from.id.search(/BACKGROUND/) >= 0) && (from.id != this.ContentContainerID);
            }
        } else {
            return true;
        }

        //  return (!from.contains || from.contains(to) || from.id.search(/BACKGROUND/) >= 0) && (from.id != this.ContentContainerID);
    },
    onMouseEnter: function(evt, el, o) {

        // Author.log("HS Mouse enter:"+this.id+", "+this.RespondToMouseOver);
        if (this.RespondToMouseOver && this.isValidMouseEnter(evt.getRelatedTarget(), evt.getTarget())) {
            //  Author.log('HotSpot RespondToMouseOver');
            Author.DisplayManager.tryToTriggerResponse(this.Name, this.MouseOverValue, this.MouseOverValue);
        }
    },
    isValidMouseLeave: function(from, to) {
        if (!from || !to) {
            return false;
        }
        var toActionInfo = AuthorCommons.getActionInfoFromElementID(to.id);
        if (toActionInfo) {
            if (toActionInfo.ActionID != this.id) {
                return true;
            } else {
                return (!to.contains || to.contains(from) || to.id.search(/BACKGROUND/) >= 0) && (to.id != this.ContentContainerID);
            }
        } else {
            return true;
        }

        //  return (!to.contains || to.contains(from) || to.id.search(/BACKGROUND/) >= 0) && (to.id != this.ContentContainerID);
    },
    onMouseLeave: function(evt, el, o) {
        // Author.log("HS Mouse leave:"+this.id);
        if (this.RespondToMouseOut && this.isValidMouseLeave(evt.getTarget(), evt.getRelatedTarget())) {
            //Author.log('HotSpot RespondToMouseOut');
            Author.DisplayManager.tryToTriggerResponse(this.Name, this.MouseOutValue, this.MouseOutValue);
        }
    },
    onDrop: function(ddButton){

        if (this.RespondToDrop) {
            Author.DisplayManager.tryToTriggerResponse(this.Name, ddButton.Value, ddButton.Value);
        }
    },

    triggeredByKey: function(keyCodeStr) {
        this.onClick();
    },
    registerKeyMap: function() {
        if (this.Key1 != null) {
            Author.LessonManager.registerActionKeyMap(this.Key1, this.id);
        }
        if (this.Key2 != null) {
            Author.LessonManager.registerActionKeyMap(this.Key2, this.id);
        }
    },
    processAction: function(bg) {
        if (this.IsChangeAction) {
            Author.DisplayManager.changeAction(this);
        }
        this.initializeDC(bg);
        this.setInitialVisibility();
        this.applyEffect();
        this.registerKeyMap();
        if (this.IsDropTarget) {
            
            try {
                this.DisplayableComponentContainer.dom.classList.add("dropzone");
            } catch (err) {
                console.log(err);
            }
        }
        return { MoveOn: true, Interval: 0 };
    }
});

// enable draggables to be dropped into this
interact('.dropzone').dropzone({
    // only accept elements matching this CSS selector
    accept: '.drag-drop',
    // Require a 50% element overlap for a drop to be possible
    overlap: 0.5,

    ondragenter: function (event) {
        var draggableElement = event.relatedTarget;
        var ddid = draggableElement.id.split("-")[1];
        var ddComponent = Ext.getCmp(ddid);

        var hotSpotElement = event.target;
        var hsid = hotSpotElement.id.split("-")[1];
        var hsComponent = Ext.getCmp(hsid);

        ddComponent.SittingHotSpot = hsComponent;

    },
    ondragleave: function (event) {
        var draggableElement = event.relatedTarget;
        var ddid = draggableElement.id.split("-")[1];
        var ddComponent = Ext.getCmp(ddid);

        ddComponent.SittingHotSpot = null;

        var hotSpotElement = event.target;
        var hsid = hotSpotElement.id.split("-")[1];
        var hsComponent = Ext.getCmp(hsid);
        if (hsComponent.HoldingDDButton === ddComponent) {
            hsComponent.HoldingDDButton = null;
        }
    },
    ondrop: function (event) {
        var hotSpotElement = event.target;
        var hsid = hotSpotElement.id.split("-")[1];
        var hsComponent = Ext.getCmp(hsid);

        var draggableElement = event.relatedTarget;
        var ddid = draggableElement.id.split("-")[1];
        var ddComponent = Ext.getCmp(ddid);

        //Snap to 
        if (hsComponent.OnDropAction === OnDropActions.MoveToPosition) {
            var newX = hsComponent.Left - ddComponent.Left + hsComponent.OnDropX;
            var newY = hsComponent.Top - ddComponent.Top + hsComponent.OnDropY;
            ddComponent.DisplayableComponentContainer.dom.setAttribute("data-x", newX);
            ddComponent.DisplayableComponentContainer.dom.setAttribute("data-y", newY);

            var styleString = 'translate(' + newX + 'px, ' + newY + 'px)';
            ddComponent.DisplayableComponentContainer.dom.style.transform = styleString;
        }



    },

});
