var g_itemSlotIndex = 0;

function ItemSlot(data, owner, container, index) {
    this.data = data;
    this.owner = owner;
    this.container = container;
    this.selected = false;
    this.index = index;
    this.isVisbile = true;
    this.eventSelectedChanged = new EventHandlers(this);
    this.isHighlighted = false;
    this.documentFormFields = new DocumentFormFieldsCollection();
    this.templateHandler = data;
}

ItemSlot.prototype =
{
    Select: function (value, doNotcallSelectionChanged, selectSingle) {
        if (typeof (value) == 'undefined')
        {
            value = true;
        }

        if (this.selected != value || selectSingle)
        {
            this.SetSelected(value);

            if( !doNotcallSelectionChanged)
            {
                this.owner.ItemSelectionWasChanged(this, selectSingle);
            }
        }
        else if (this.selected)
        {
            this.owner.SelectAgain(this);
        }
    },

    SelectSingle : function()
    {
        this.Select(true, false, true);
    },

    ToggleSelect : function()
    {
        this.Select(!this.selected);
    },

    MouseSelect : function(mouseEvent)
    {
        this.owner.HandleMouseSelect(mouseEvent, this);
    },

    ScrollIntoView : function()
    {
        var offsetParent = this.container.offsetParent;

        if(offsetParent == null) return;
        
        var scrollTop = offsetParent.scrollTop;

        if(this.container.offsetTop < scrollTop)
        {
            offsetParent.scroll(0, this.container.offsetTop);

        }
        else if(this.container.offsetTop + this.container.offsetHeight >= scrollTop + offsetParent.offsetHeight)
        {
            
            offsetParent.scroll(0, this.container.offsetTop  +  this.container.offsetHeight - offsetParent.offsetHeight + 2);
        }
        
        
    },

    SetSelected: function (value) {
        if (this.selected == value) return;


        if (value)
        {
            this.container.classList.add("contextSelected");
        }
        else
        {
            this.container.classList.remove("contextSelected");
        }
        this.selected = value;
        this.eventSelectedChanged.Fire();
    },

    SetHighlight : function(value)
    {
        this.SetHilight(value);
    },

    SetHilight: function (hilight) {
        if (!hilight && this.isHighlighted)
        {
            this.isHighlighted = false;
            this.container.classList.remove("contextHighlighted");
        }
        else
        {
            this.isHighlighted = true;
            this.container.classList.add("contextHighlighted");
        }
    }
	,

    Hide: function () {
        if (!this.isVisbile) return;
        this.isVisbile = false;
        ShowObject(this.container, false);
        this.SetSelected(false);

    },

    ShowInternal: function () {
        if (this.isVisbile) return;

        this.isVisbile = true;
        ShowObject(this.container, true);
    },

    Show: function (value) {
        if (value == undefined)
        {
            value = true;
        }
        if (value)
        {
            this.ShowInternal();
        }
        else
        {
            this.Hide();
        }
    },

    Delete: function () {
        this.owner.RemoveItem(this);
    },


    EnableMouseEvents : function()
    {
        this.container.addEventListener("mousedown", (e)=>{
            
            this.MouseSelect(e);

        }, true);

        this.container.addEventListener("mouseover", (e)=>{

            this.SetHighlight(true);
        });

        this.container.addEventListener("mouseout", (e)=>{

            this.SetHighlight(false);
        });
    }

 


};


var ItemBoxSelectionModeNone = 0;
var ItemBoxSelectionModeSingle = 1;
var ItemBoxSelectionModeMulti = 2;
var g_containerNodeID = 0;

function ItemBox(containerNode, itemTemplate, selectionMode, itemTemplateSelector, enableValidation) {
    this.containerNode = containerNode;
    this.itemTemplate = itemTemplate;
    this.items = new Array();
    this.selectedItem = null;
    this.isVisible = containerNode.style.display != 'none';
    this.eventSelectionChanged = new EventHandlers(this);

    if (typeof (selectionMode) == 'undefined') selectionMode = ItemBoxSelectionModeNone;



    // this.containerNode.style.overflowY = "auto";
    this.selectionMode = selectionMode;
    this.hasData = false;

    this.divStatus = document.createElement("div");
    this.divStatus.setAttribute("role", "status");
    this.divStatus.setAttribute("aria-live", "assertive");
    this.divStatus.setAttribute("aria-relevant", "additions");
    this.divStatus.classList.add("ui-helper-hidden-accessible");
    this.containerNode.parentNode.appendChild(this.divStatus);
    this.dataConnector = null;
    this.preventOnDataRemovedCall = false;
    this.preventDataConnectorRemoveCall = false;
    this.itemTemplateSelector = itemTemplateSelector;
    this.documentFormFields = new DocumentFormFieldsCollection();

    if (this.containerNode.id == "")
    {
        this.containerNode.id = "ctn" + (g_containerNodeID++);
    }

    if (enableValidation)
    {
        this.CreateValidation();
        this.LoadTemplateProcedure = LoadTemplateWithValidation;
    }
    else
    {
        this.LoadTemplateProcedure = LoadTemplate;
    }
}

ItemBox.prototype =
{
    IsConnected: function () {
        return document.getElementById(this.containerNode.id) != null;
    },


    CreateValidation: function () {
        this.validation = new ValidationNode();

        DynamicValidation.GetParent(this.containerNode).AddChild(this.validation);

    },

    ClearValidation: function () {
        if (this.validation != null && this.validation.firstChild != null)
        {
            this.validation.Remove();
            this.CreateValidation();
        }
    },

    InsertItem: function (dataItem, insertIndex) {


        if (insertIndex >= this.items.length)
        {
            insertIndex = -1;
        }
        var itemSlotContainer = document.createElement("div");

        itemSlotContainer.id = "itemSlot" + (g_itemSlotIndex++);
        var itemSlot = new ItemSlot(dataItem, this, itemSlotContainer, this.items.length);

        if (dataItem.selected)
        {
            itemSlot.SetSelected(true);
            this.selectedItem = itemSlot;
        }

        itemSlotContainer.classList.add("cdItemSlotContainer");

        if (insertIndex == -1)
        {
            this.containerNode.appendChild(itemSlotContainer);
        }
        else
        {
            this.containerNode.insertBefore(itemSlotContainer, this.items[insertIndex].container);
        }

        this.documentFormFields.AddChild(itemSlot.documentFormFields);


        if (!this.LoadTemplateProcedure(this.SelectTemplate(dataItem), itemSlotContainer, itemSlot, itemSlot.documentFormFields, this.validation, itemSlot))
        {
            this.containerNode.removeChild(itemSlotContainer);
            ShowErrorMessageBox("Invalid item template: " + this.itemTemplate);
            return null;
        }

        this.items.push(itemSlot)

        if (insertIndex != -1)
        {
            var prevItem = itemSlot;

            for (var i = this.items.length - 1; i > insertIndex; --i)
            {
                this.items[i] = this.items[i - 1];
                this.items[i].index = i;
            }

            this.items[insertIndex] = itemSlot;
            itemSlot.index = insertIndex;

        }

        return itemSlot;
    },

    SelectTemplate: function (dataItem) {
        if (this.itemTemplateSelector)
        {
            var result = this.itemTemplateSelector(dataItem);

            if (result)
            {
                return result;
            }
        }

        return this.itemTemplate;
    },

    AddItem: function (dataItem, insertIndex) {

        if (insertIndex == undefined) insertIndex = -1;

        var result = this.InsertItem(dataItem, insertIndex);

        if (result)
        {
            if (this.isVisible)
            {
                this.UpdateScrollBars();
            }
        }

        return result;
    },

    SetData: function (dataArray) {

        this.documentFormFields.Delete();
        this.documentFormFields = new DocumentFormFieldsCollection();

        this.containerNode.innerHTML = "";

        this.dataConnector = null;
        this.items = new Array();

        this.ClearValidation();

        for (var i = 0; i < dataArray.length; ++i)
        {
            if (this.InsertItem(dataArray[i], -1) == null)
            {
                return;
            }
        }

        if (this.hasData)
        {
            this.eventSelectionChanged.Fire();
        }
        else
        {
            this.hasData = true;
        }

        if (this.isVisible)
        {
            this.UpdateScrollBars();
        }

        this.dataConnector = dataArray.dataConnector;

        if (this.dataConnector)
        {
            var self = this;
            this.dataConnector.eventDataAdded.AddHandler(function (sender, args) { self.OnDataAdded(args); });
            this.dataConnector.eventDataRemoved.AddHandler(function (sender, args) { self.OnDataRemoved(args); });

        }
    },

    OnDataAdded: function (args) {
        if (!this.IsConnected()) return;
        this.AddItem(args.data, args.insertIndex);
    },

    OnDataRemoved: function (args) {
        if (!this.IsConnected()) return;
        if (this.preventOnDataRemovedCall) return;

        this.preventDataConnectorRemoveCall = true;


        this.items[args.index].Delete();

        this.preventDataConnectorRemoveCall = false;
    },

    ItemSelectionWasChanged: function (item, selectSingle) {

        if (this.selectedItem == item)
        {
            if (!item.selected)
            {
                this.selectedItem = null;
            }

        }
        else if (this.selectedItem != null && this.selectionMode != ItemBoxSelectionModeMulti)
        {
            this.selectedItem.SetSelected(false);
            this.selectedItem = null;
        }

        if (item.selected)
        {
            this.selectedItem = item;

            if(this.selectionMode == ItemBoxSelectionModeMulti && selectSingle)
            {
                var selectedItems = this.GetSelectedItems();

                for(var aSelectedItem of selectedItems)
                {
                    if(aSelectedItem != item)
                    {
                        aSelectedItem.SetSelected(false);
                    }
                }
            }
        }

        if (this.selectedItem == null && this.selectionMode == ItemBoxSelectionModeMulti)
        {
            var selectedItems = this.GetSelectedItems();

            if (selectedItems.length > 0)
            {
                this.selectedItem = selectedItems[0];
            }
        }

        this.eventSelectionChanged.Fire(this);
    },

    SelectAgain: function (item) {
        if (this.selectionMode == ItemBoxSelectionModeMulti)
        {
            item.Select(!item.selected);
        }
    },

    GetSelectedItem: function () {
        return this.selectedItem;
    },

    GetSelectedItems: function () {
        var selectedItems = new Array();

        for (var i = 0; i < this.items.length; ++i)
        {
            var item = this.items[i];

            if (item.selected)
            {
                selectedItems.push(item);
            }
        }

        return selectedItems;
    },

    GetItems: function () {
        return this.items;
    },

    AddSelectionChangedHandler: function (handler) {
        this.eventSelectionChanged.AddHandler(handler);
    },

    RemoveItem: function (item) {
        var oldItems = this.items;
        this.items = new Array();

        for (var i = 0; i < item.index; ++i)
        {
            this.items.push(oldItems[i]);
        }

        for (var i = item.index + 1; i < oldItems.length; ++i)
        {
            var copyItem = oldItems[i];

            --copyItem.index;

            this.items.push(copyItem);
        }

        item.documentFormFields.Delete();

        if (item.validation)
        {
            item.validation.Remove();
        }

        this.containerNode.removeChild(item.container);

        if (this.selectionMode != ItemBoxSelectionModeNone)
        {
            if (this.selectedItem == item)
            {
                this.selectedItem = null;
            }

            if (item.selected)
            {
                this.eventSelectionChanged.Fire();
            }
        }

        if (this.dataConnector && !this.preventDataConnectorRemoveCall)
        {
            this.preventOnDataRemovedCall = true;
            this.dataConnector.ItemWasRemoved(item.index);
            this.preventOnDataRemovedCall = false;
        }
    },


    Hide: function () {
        ShowObject(this.containerNode, false);
        this.isVisible = false;
    },

    ShowInternal: function () {
        ShowObject(this.containerNode, true);

        this.UpdateScrollBars();
        this.isVisible = true;
    },


    UpdateScrollBars: function () {



        var childHeight = 0;
        for (var i = 0; i < this.containerNode.children.length; ++i)
        {
            var child = this.containerNode.children[i];

            childHeight += child.clientHeight;
        }

        if (childHeight > this.containerNode.clientHeight)
        {
            //this.containerNode.style.overflowY = "visible";
            this.containerNode.style.overflow = "auto";
        }
        else
        {
            this.containerNode.style.overflow = "";
        }
    },

    Show: function (value) {
        if (value == undefined || value)
        {
            this.ShowInternal();
        }
        else
        {
            this.Hide();
        }
    }

    ,



    AddNewStatus: function (msg) {
        if (this.divStatus.lastElementChild)
        {
            this.divStatus.lastElementChild.style.display = "none";
        }

        var newStatus = document.createElement("div");

        newStatus.innerHTML = msg;

        this.divStatus.appendChild(newStatus);
    },

    SelectItem : function(itemValue)
    {
        for(var i = 0; i < this.items.length; ++i)
        {
            if(this.items[i].data == itemValue)
            {
                this.items[i].Select();
                break;
            }
        }
    },

    HandleShifSelect : function(item)
    {
        var selectedItems = this.GetSelectedItems();
        var selectStart = 0;
        var selectEnd = -1;
        var firstSelectedItem = selectedItems[0];
        var lastSelectedItem = selectedItems[selectedItems.length - 1];

        if (firstSelectedItem.index > item.index)
        {
            selectStart = item.index;
            selectEnd = lastSelectedItem.index;
        }
        else if(lastSelectedItem.index <  item.index)
        {
            selectStart = firstSelectedItem.index;
            selectEnd = item.index;
        }
        else 
        {
            selectStart = firstSelectedItem.index;
            selectEnd = item.index;
        }

        for(var aSelectedItem of selectedItems)
        {
            if(aSelectedItem.index < selectStart || aSelectedItem.index > selectEnd)
            {
                aSelectedItem.SetSelected(false);
            }
        }

        for(var selectIndex = selectStart; selectIndex <= selectEnd; ++selectIndex)
        {
            this.items[selectIndex].SetSelected(true);
        }

    },

    HandleMouseSelect : function(mouseEvent, item)
    {
        if(mouseEvent.button != 0) return;

        if(this.selectionMode != ItemBoxSelectionModeMulti)
        {
            item.ToggleSelect();
            return;
        }

        if(!mouseEvent.ctrlKey && !mouseEvent.shiftKey)
        {
            item.SelectSingle();
            return;
        }


        if(mouseEvent.ctrlKey)
        {
            item.ToggleSelect();
            return;
        }

        // shift key


        if(this.selectedItem == null)
        {
            for(var i = 0; i <= item.index; ++i)
            {
                this.items[i].SetSelected(true);
            }            
        }
        else 
        {            
            this.HandleShifSelect(item);
        }

        this.selectedItem = item;

        this.eventSelectionChanged.Fire(this);
    }
};