(function ($)
{   
    const DATA_FULLPATH = "fullpath";
    const DATA_HASCHILDREN = "haschildren";
    const DATA_ISEXPANDED = "isexpanded";
    const DATA_ISROOT = "isroot";
    const DATA_NAME = "name";
    const DATA_PAGEID = "pageid";

    const CLASS_COLLAPSED = "fbspajax-collapsed";
    const CLASS_EXPANDED = "fbspajax-expanded";
    const CLASS_FILTERMATCH = "fbspajax-filtermatch";
    const CLASS_HIDDEN = "fbspajax-hidden";
    const CLASS_INDETERMINATE = "fbspajax-indeterminate"
    const CLASS_ISSOURCEPAGE = "fbspajax-isSourcePage";
    const CLASS_ISSOURCEPAGEDESCENDENT = "fbspajax-isSourcePageDescendent";
    const CLASS_NOTMATCH = "fbspajax-notmatch";
    const CLASS_SELECTED = "fbspajax-selected";

    const SELECTOR_CONTENTROW = ".fbspajax-contentRow";
    const SELECTOR_RESETSEARCHTEXTBTTN = "#ResetSearchTextBttn";
    const SELECTOR_SEARCHTEXT = "#SearchText";
    const SELECTOR_SEARCHTEXTBTTN = "#SearchTextBttn";
    const SELECTOR_TREEITEM = ".fbspajax-treeItem";
    const SELECTOR_TREESECTION = ".fbspajax-treeSection";
    const SELECTOR_TOGGLEICON = ".fbspajax-toggleIcon";

    const MODE_RADIO = "radio";
    const MODE_CHECKBOX = "checkbox";

    function determineIconSrc(hasChildren, isLast, isExpanded)
    {
        let iconSrc;
        if (hasChildren)
        {
            if (isLast)
            {
                if (isExpanded)
                {
                    iconSrc = "/Areas/Core/Images/tree/last-haschildren-expanded.svg";
                }
                else
                {
                    iconSrc = "/Areas/Core/Images/tree/last-haschildren-closed.svg";
                }
            }
            else
            {
                if (isExpanded)
                {
                    iconSrc = "/Areas/Core/Images/tree/intermediate-haschildren-expanded.svg";
                }
                else
                {
                    iconSrc = "/Areas/Core/Images/tree/intermediate-haschildren-closed.svg";
                }
            }
        }
        else
        {
            if (isLast)
            {
                iconSrc = "/Areas/Core/Images/tree/last-nochildren.svg";
            }
            else
            {
                iconSrc = "/Areas/Core/Images/tree/intermediate-nochildren.svg";
            }
        }
        return iconSrc;
    }

    $.widget("ui.vpselectpage",
        {
            options:
            {
                IncludeHidden: null,
                IsPageMove: null,
                RequireAddPermission: null,
                SearchText: null,
                SelectorHtmlName: "AssignedPages",
                SelectorMode: "none",
                ShowExpanded: false,
                SourcePageId: null,
                UseSearchForm: true,
                SelectedFullPath: null,
                SelectedPageIds: null,
                LoadingContent: '<div><img src="/Areas/Core/Images/ajax_loading.gif" alt="Loading... Please Wait." title="Loading... Please Wait."/><span>Loading...</span></div>',
                SelectPageAjaxUrl: "/Admin/Widgets/SelectPageAjax/",
                SelectionChangedCallback: function (selections)
                {
                    //selections = [
                    //    {
                    //        contentrow: rowElement,
                    //        name: "xxxxxx",
                    //        fullpath: "xxxxxx",
                    //        pageid: nnnn
                    //    }
                    //];
                    return undefined;
                }
            },
            _destroy: function ()
            {
                
            },
            _init: function ()
            {
            },
            _create: function ()
            {
                let self = this;

                $(self.element).html(self.options.LoadingContent);
                $.get(self.options.SelectPageAjaxUrl,
                    {
                        IncludeHidden: self.options.IncludeHidden,
                        IsPageMove: self.options.IsPageMove,
                        RequireAddPermission: self.options.RequireAddPermission,
                        SearchText: self.options.SearchText,
                        SelectorHtmlName: self.options.SelectorHtmlName,
                        SelectorMode: self.options.SelectorMode,
                        SourcePageId: self.options.SourcePageId,
                        ShowExpanded: self.options.ShowExpanded,
                        UseSearchForm: self.options.UseSearchForm,
                    },
                    function (html)
                    {
                        $(self.element).html(html);
                        self._initializeSelectionMode();
                        self._initializeSearchForm();
                        self._initializeTogglers();
                        self._updateView();

                        $(self.element).find('[name="toggleAll"]').on("click", function ()
                        {
                            let isChecked = $(this).is(":checked");
                            $(this).find("~ span").html(isChecked ? "Deselect All" : "Select All");
                            $(self.element).find('.fbspajax-label > input[type=checkbox]').prop('checked', isChecked);
                            self._handleSelectionChange();
                        });

                        FBUtilities.initializeLoadables($(self.element).get(0));
                    }
                );
            },      
            getSelections: function ()
            {
                let self = this;
                let selections = [];
                $(self.element)
                    .find(`input[name="${self.options.SelectorHtmlName}"]:checked`)
                    .closest(SELECTOR_CONTENTROW)
                    .each(function ()
                    {
                        selections.push({
                            contentrow: this,
                            name: $(this).data(DATA_NAME),
                            fullpath: $(this).data(DATA_FULLPATH),
                            pageid: $(this).data(DATA_PAGEID),
                        });
                    });
                return selections;
            },
            search: function (searchText)
            {
                this._applyFilter(searchText);
            },
            selectByFullpath: function (fullpath)
            {                
                let self = this;
                if (self._isRadioOrCheckboxMode())
                {
                    $(self.element)
                        .find(`${SELECTOR_CONTENTROW} input[name="${self.options.SelectorHtmlName}"]:not(:disabled)`)
                        .prop('checked', false);

                    if (fullpath !== undefined && fullpath !== null && fullpath.length !== 0)
                    {
                        let rows = $(self.element).find(SELECTOR_CONTENTROW);
                        let filtered = rows.filter(function ()
                        {
                            return $(this).data(DATA_FULLPATH) === fullpath;
                        });
                        let inputs = filtered.find(`input[name="${self.options.SelectorHtmlName}"]:not(:disabled)`);
                        inputs.prop('checked', true);
                    }
                    self._handleSelectionChange();
                }
            },
            _resetFilter: function ()
            {
                let self = this;
                $(self.element)
                    .find(SELECTOR_CONTENTROW)
                    .closest(SELECTOR_TREEITEM)
                    .removeClass(CLASS_HIDDEN)
                    .removeClass(CLASS_FILTERMATCH)
                    .removeClass(CLASS_NOTMATCH);

                $(self.element)
                    .find(SELECTOR_SEARCHTEXT)
                    .val('');
            },
            reset: function ()
            {
                $(`input[name="${this.options.SelectorHtmlName}"]`).prop('checked', false);
                $(`.fbspajax-contentRow`).removeClass('fbspajax-selected');
                this._resetFilter();
            },
            _applyFilter: function (overrideFilterText)
            {
                let self = this;
                let filterText = (overrideFilterText !== undefined && overrideFilterText !== null) ? overrideFilterText : $(self.element).find(SELECTOR_SEARCHTEXT).val();
                if (filterText.trim() === '')
                {
                    self._resetFilter();
                    return;
                }

                let tokens = filterText.toLowerCase().split(' ');

                $(self.element)
                    .find(SELECTOR_CONTENTROW)
                    .closest(SELECTOR_TREEITEM)
                    .removeClass(CLASS_HIDDEN)
                    .removeClass(CLASS_FILTERMATCH)
                    .removeClass(CLASS_NOTMATCH);


                let allItems = $(self.element).find(SELECTOR_CONTENTROW);
                let matchingItems = allItems.filter(function ()
                {
                    let name = ($(this).data(DATA_NAME) || '').toString().toLowerCase();
                    let match = tokens.find(function (token)
                    {
                        let isMatch;
                        if (token === undefined || token === null || token.trim() === '')
                        {
                            isMatch = false;
                        }
                        else if (name.indexOf(token) !== -1)
                        {
                            isMatch = true;
                        }
                        else
                        {
                            isMatch = false;
                        }
                        return isMatch;
                    });

                    return (match !== undefined);
                });

                allItems.closest(SELECTOR_TREEITEM).addClass(CLASS_HIDDEN);
                matchingItems.closest(SELECTOR_TREEITEM).removeClass(CLASS_HIDDEN).addClass(CLASS_FILTERMATCH);

                let parents = matchingItems
                    .closest(SELECTOR_TREEITEM)
                    .parents(SELECTOR_TREEITEM);

                matchingItems.closest(SELECTOR_TREESECTION).removeClass(CLASS_COLLAPSED).addClass(CLASS_EXPANDED);
                parents.not(`.${CLASS_FILTERMATCH}`).removeClass(CLASS_HIDDEN).addClass(CLASS_NOTMATCH);
                parents.children(SELECTOR_TREESECTION).removeClass(CLASS_COLLAPSED).addClass(CLASS_EXPANDED);

                allItems.find(SELECTOR_TOGGLEICON).each(function ()
                {
                    let childSection = $(this).closest(SELECTOR_TREEITEM).children(SELECTOR_TREESECTION);
                    let isExpanded = childSection.hasClass(CLASS_EXPANDED);
                    let hasChildren = childSection.children(SELECTOR_TREEITEM).length !== 0;

                    $(this).data(DATA_ISEXPANDED, isExpanded);
                    let isLast = $(this).closest(SELECTOR_TREEITEM).is(':last-child');
                    let src = determineIconSrc(hasChildren, isLast, isExpanded);
                    $(this).attr('src', src);
                });

            },
            _initializeTogglers: function ()
            {
                let self = this;
                $(self.element).on('click', SELECTOR_TOGGLEICON, function ()
                {
                    self._handleTogglerClick(this);
                });
            },
            _initializeSearchForm: function ()
            {
                let self = this;
                let element = $(self.element);
                if (self.options.UseSearchForm)
                {
                    // bind search button click.
                    element.on('click', SELECTOR_SEARCHTEXTBTTN, function (e)
                    {
                        e.preventDefault();
                        self._applyFilter();
                    });

                    // bind search text key press.
                    element.on('keypress', SELECTOR_SEARCHTEXT, function (event)
                    {
                        if (event.keyCode === 13)
                        {
                            event.preventDefault();
                            self._applyFilter();
                        }
                    });

                    // bind reset button click.
                    element.on('click', SELECTOR_RESETSEARCHTEXTBTTN, function (e)
                    {
                        e.preventDefault();
                        element.find(SELECTOR_SEARCHTEXT).val('');
                        self._resetFilter();
                    });
                }
            },
            _initializeSelectionMode: function ()
            {
                let self = this;
                if (self.options.IsPageMove && self.options.SourcePageId !== undefined)
                {
                    let sourcePageRow = $(self.element)
                        .find(SELECTOR_CONTENTROW)
                        .filter(function ()
                        {
                            return $(this).data(DATA_PAGEID) === self.options.SourcePageId;
                        });

                    if (sourcePageRow.length !== 0)
                    {
                        sourcePageRow.addClass(CLASS_ISSOURCEPAGE);
                        sourcePageRow.find(SELECTOR_CONTENTROW).addClass(CLASS_ISSOURCEPAGEDESCENDENT);
                        sourcePageRow.find(`input[name="${self.options.SelectorHtmlName}"]`).prop('disabled', true);
                    }
                }

                if (self._isRadioOrCheckboxMode())
                {
                    let haveSelectedPageIds = Array.isArray(self.options.SelectedPageIds) && self.options.SelectedPageIds.length !== 0;
                    let haveSelectedFullPath = self.options.SelectedFullPath !== undefined && self.options.SelectedFullPath !== null && self.options.SelectedFullPath.length !== 0;
                    if (haveSelectedFullPath || haveSelectedPageIds)
                    {
                        $(self.element)
                            .find(SELECTOR_CONTENTROW)
                            .filter(function ()
                            {
                                let isMatch;
                                if (haveSelectedFullPath)
                                {
                                    isMatch = $(this).data(DATA_FULLPATH) === self.options.SelectedFullPath;
                                }
                                else if (haveSelectedPageIds)
                                {
                                    isMatch = self.options.SelectedPageIds.includes($(this).data(DATA_PAGEID));
                                }
                                else
                                {
                                    isMatch = false;
                                }
                                return isMatch;
                                
                            })
                            .find(`input[name="${self.options.SelectorHtmlName}"]:not(:disabled)`)
                            .prop('checked', true);
                    }

                    $(self.element).on(
                        'change',
                        `input[name="${self.options.SelectorHtmlName}"]`,
                        function ()
                        {
                            self._handleSelectionChange();
                        });

                    self._handleSelectionChange();
                }
            },
            _handleTogglerClick: function (toggler)
            {
                let isRoot = $(toggler).data(DATA_ISROOT) === true;
                if (isRoot)
                {
                    return;
                }

                let treeItem = $(toggler).closest(SELECTOR_TREEITEM);
                let isLast = treeItem.is(':last-child');
                let makeExpanded = !($(toggler).data(DATA_ISEXPANDED) === true);
                let hasChildren = $(toggler).data(DATA_HASCHILDREN) === true;
                let childList = treeItem.children(SELECTOR_TREESECTION);

                $(toggler).attr('src', determineIconSrc(hasChildren, isLast, makeExpanded));
                $(toggler).data(DATA_ISEXPANDED, makeExpanded);

                if (makeExpanded)
                {
                    childList.removeClass(CLASS_COLLAPSED);
                    childList.addClass(CLASS_EXPANDED);
                }
                else
                {
                    childList.removeClass(CLASS_EXPANDED);
                    childList.addClass(CLASS_COLLAPSED);
                }
            },
            _handleSelectionChange: function ()
            {
                this._updateView();

                if (typeof this.options.SelectionChangedCallback === 'function')
                {
                    this.options.SelectionChangedCallback(this.getSelections());
                }
            },
            _updateView: function ()
            {
                let self = this;

                $(self.element).find(SELECTOR_CONTENTROW).removeClass(CLASS_SELECTED).removeClass(CLASS_INDETERMINATE);
                self._getChecked().closest(SELECTOR_CONTENTROW).addClass(CLASS_SELECTED);

                if (self._isRadioOrCheckboxMode())
                {
                    let inputType = self.options.SelectorMode === MODE_CHECKBOX ? "checkbox" : "radio";
                    let inputSelector = `input[type=${inputType}][name="${self.options.SelectorHtmlName}"]`;
                    let checkboxes = $(self.element).find(inputSelector);

                    checkboxes.prop('indeterminate', false);
                    let indeterminateBoxes = checkboxes.not(":checked").filter(function ()
                    {
                        return $(this)
                            .closest(SELECTOR_CONTENTROW)
                            .next(SELECTOR_TREESECTION)
                            .find(inputSelector)
                            .is(":checked");
                    });
                    
                    indeterminateBoxes.prop('indeterminate', true);

                    indeterminateBoxes.closest(`${SELECTOR_CONTENTROW}:not(.${CLASS_SELECTED})`).addClass(CLASS_INDETERMINATE);
                }

            },
            _getChecked: function ()
            {
                return $(this.element).find(`input[name="${this.options.SelectorHtmlName}"]:checked`);
            },
            _isRadioOrCheckboxMode: function ()
            {
                return (this.options.SelectorMode === MODE_RADIO || this.options.SelectorMode === MODE_CHECKBOX)
            }
        });
})(jQuery);