NodeBB/NodeBB

'use strict';

define('categorySearch', ['alerts', 'bootstrap', 'api'], function (alerts, bootstrap, api) {
    const categorySearch = {};

    categorySearch.init = function (el, options) {
        let categoriesList = null;
        options = options || {};
        options.privilege = options.privilege || 'topics:read';
        options.states = options.states || ['watching', 'tracking', 'notwatching', 'ignoring'];
        options.cacheList = options.hasOwnProperty('cacheList') ? options.cacheList : true;

        let localCategories = [];
        if (Array.isArray(options.localCategories)) {
            localCategories = options.localCategories.map(c => ({ ...c }));
        }
        options.selectedCids = options.selectedCids || ajaxify.data.selectedCids || [];

        const searchEl = el.find('[component="category-selector-search"]');
        if (!searchEl.length) {
            return;
        }

        const toggleVisibility = searchEl.parent('[component="category/dropdown"]').length > 0 ||
            searchEl.parent('[component="category-selector"]').length > 0;

        el.on('show.bs.dropdown', function () {
            if (toggleVisibility) {
                el.find('.dropdown-toggle').css({ visibility: 'hidden' });
                searchEl.removeClass('hidden');
                searchEl.css({
                    'z-index': el.find('.dropdown-toggle').css('z-index') + 1,
                });
            }

            function doSearch() {
                const val = searchEl.find('input').val();
                if (val.length > 1 || (!val && !categoriesList)) {
                    loadList(val, function (categories) {
                        categoriesList = options.cacheList && (categoriesList || categories);
                        renderList(categories);
                    });
                } else if (!val && categoriesList) {
                    renderList(categoriesList);
                }
            }

            searchEl.on('click', function (ev) {
                ev.preventDefault();
                ev.stopPropagation();
            });
            searchEl.find('input').val('').on('keyup', utils.debounce(doSearch, 300));
            doSearch();
        });

        el.on('shown.bs.dropdown', function () {
            if (!['xs', 'sm'].includes(utils.findBootstrapEnvironment())) {
                searchEl.find('input').focus();
            }
        });

        el.on('hide.bs.dropdown', function () {
            if (toggleVisibility) {
                el.find('.dropdown-toggle').css({ visibility: 'inherit' });
                searchEl.addClass('hidden');
            }

            searchEl.off('click');
            searchEl.find('input').off('keyup');
        });

        function loadList(search, callback) {
            api.get('/search/categories', {
                search: search,
                query: utils.params(),
                parentCid: options.parentCid || 0,
                selectedCids: options.selectedCids,
                privilege: options.privilege,
                states: options.states,
                showLinks: options.showLinks,
            }, function (err, { categories }) {
                if (err) {
                    return alerts.error(err);
                }
                callback(localCategories.concat(categories));
            });
        }

        function renderList(categories) {
            const selectedCids = options.selectedCids.map(String);
            categories.forEach(function (c) {
                c.selected = selectedCids.includes(String(c.cid));
            });
            app.parseAndTranslate(options.template, {
                categoryItems: categories.slice(0, 200),
                selectedCategory: ajaxify.data.selectedCategory,
                allCategoriesUrl: ajaxify.data.allCategoriesUrl,
            }, function (html) {
                el.find('[component="category/list"]')
                    .html(html.find('[component="category/list"]').html());
                el.find('[component="category/list"] [component="category/no-matches"]')
                    .toggleClass('hidden', !!categories.length);

                const bsDropdown = bootstrap.Dropdown.getInstance(el.find('.dropdown-toggle').get(0));
                if (bsDropdown) {
                    bsDropdown.update();
                }
            });
        }
    };

    return categorySearch;
});