<div class="filterWrapper">
    <span class="filterTitle">
        <img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Status)QBT_TR[CONTEXT=TransferListFiltersWidget]
    </span>
    <ul class="filterList" id="statusFilterList">
        <li class="statusesFilterContextMenuTarget" id="all_filter"><span class="link"><img src="images/filter-all.svg" alt="All">QBT_TR(All (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="downloading_filter"><span class="link"><img src="images/downloading.svg" alt="Downloading">QBT_TR(Downloading (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="seeding_filter"><span class="link"><img src="images/upload.svg" alt="Seeding">QBT_TR(Seeding (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="completed_filter"><span class="link"><img src="images/checked-completed.svg" alt="Completed">QBT_TR(Completed (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="running_filter"><span class="link"><img src="images/torrent-start.svg" alt="Running">QBT_TR(Running (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="stopped_filter"><span class="link"><img src="images/stopped.svg" alt="Stopped">QBT_TR(Stopped (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="active_filter"><span class="link"><img src="images/filter-active.svg" alt="Active">QBT_TR(Active (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="inactive_filter"><span class="link"><img src="images/filter-inactive.svg" alt="Inactive">QBT_TR(Inactive (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="stalled_filter"><span class="link"><img src="images/filter-stalled.svg" alt="Stalled">QBT_TR(Stalled (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="stalled_uploading_filter"><span class="link"><img src="images/stalledUP.svg" alt="Stalled Uploading">QBT_TR(Stalled Uploading (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="stalled_downloading_filter"><span class="link"><img src="images/stalledDL.svg" alt="Stalled Downloading">QBT_TR(Stalled Downloading (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="checking_filter"><span class="link"><img src="images/force-recheck.svg" alt="Checking">QBT_TR(Checking (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="moving_filter"><span class="link"><img src="images/set-location.svg" alt="Moving">QBT_TR(Moving (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
        <li class="statusesFilterContextMenuTarget" id="errored_filter"><span class="link"><img src="images/error.svg" alt="Errored">QBT_TR(Errored (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
    </ul>
</div>
<div class="filterWrapper">
    <span class="filterTitle">
        <img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Categories)QBT_TR[CONTEXT=TransferListFiltersWidget]
    </span>
    <ul class="filterList" id="categoryFilterList">
    </ul>
</div>
<div class="filterWrapper">
    <span class="filterTitle">
        <img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Tags)QBT_TR[CONTEXT=TransferListFiltersWidget]
    </span>
    <ul class="filterList" id="tagFilterList">
    </ul>
</div>
<div class="filterWrapper">
    <span class="filterTitle">
        <img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Trackers)QBT_TR[CONTEXT=TransferListFiltersWidget]
    </span>
    <ul class="filterList" id="trackerFilterList">
    </ul>
</div>

<template id="categoryFilterItem">
    <li class="categoriesFilterContextMenuTarget">
        <span class="link">
            <button class="categoryToggle" type="button" aria-label="QBT_TR(Collapse/expand category)QBT_TR[CONTEXT=TransferListFiltersWidget]"></button>
            <img src="images/view-categories.svg" width="16" height="16" alt="">
            <span></span>
        </span>
    </li>
</template>
<template id="tagFilterItem">
    <li class="tagsFilterContextMenuTarget">
        <span class="link">
            <img src="images/tags.svg" alt="">
        </span>
    </li>
</template>
<template id="trackerFilterItem">
    <li class="trackersFilterContextMenuTarget">
        <span class="link">
            <img src="images/trackers.svg" alt="">
        </span>
    </li>
</template>

<script>
    "use strict";

    window.qBittorrent ??= {};
    window.qBittorrent.Filters ??= (() => {
        const exports = () => {
            return {
                categoriesFilterContextMenu: categoriesFilterContextMenu,
                tagsFilterContextMenu: tagsFilterContextMenu,
                trackersFilterContextMenu: trackersFilterContextMenu,
                clearStatusFilter: clearStatusFilter,
                clearCategoryFilter: clearCategoryFilter,
                clearTagFilter: clearTagFilter,
                clearTrackerFilter: clearTrackerFilter
            };
        };

        const localPreferences = new window.qBittorrent.LocalPreferences.LocalPreferences();

        const toggleCategoryDisplay = (filterItemID) => {
            const filterItem = document.getElementById(filterItemID);
            localPreferences.set(`category_${filterItemID}_collapsed`, filterItem.classList.toggle("collapsedCategory").toString());
        };

        new window.qBittorrent.ContextMenu.StatusesFilterContextMenu({
            targets: ".statusesFilterContextMenuTarget",
            menu: "statusesFilterMenu",
            actions: {
                startTorrents: (element, ref) => {
                    startVisibleTorrentsFN();
                },
                stopTorrents: (element, ref) => {
                    stopVisibleTorrentsFN();
                },
                deleteTorrents: (element, ref) => {
                    deleteVisibleTorrentsFN();
                }
            },
            offsets: {
                x: 0,
                y: 2
            },
            onShow: function() {
                this.startTorrentObserver();
                setStatusFilter(this.options.element.id.replace("_filter", ""));
            },
            onHide: function() {
                this.stopTorrentObserver();
            }
        });

        const categoriesFilterContextMenu = new window.qBittorrent.ContextMenu.CategoriesFilterContextMenu({
            targets: ".categoriesFilterContextMenuTarget",
            menu: "categoriesFilterMenu",
            actions: {
                createCategory: (element, ref) => {
                    createCategoryFN();
                },
                createSubcategory: (element, ref) => {
                    createSubcategoryFN(element.id);
                },
                editCategory: (element, ref) => {
                    editCategoryFN(element.id);
                },
                deleteCategory: (element, ref) => {
                    removeCategoryFN(element.id);
                },
                deleteUnusedCategories: (element, ref) => {
                    deleteUnusedCategoriesFN();
                },
                startTorrents: (element, ref) => {
                    startVisibleTorrentsFN();
                },
                stopTorrents: (element, ref) => {
                    stopVisibleTorrentsFN();
                },
                deleteTorrents: (element, ref) => {
                    deleteVisibleTorrentsFN();
                }
            },
            offsets: {
                x: 0,
                y: 2
            },
            onShow: function() {
                this.startTorrentObserver();
                setCategoryFilter(this.options.element.id);
            },
            onHide: function() {
                this.stopTorrentObserver();
            }
        });

        const tagsFilterContextMenu = new window.qBittorrent.ContextMenu.TagsFilterContextMenu({
            targets: ".tagsFilterContextMenuTarget",
            menu: "tagsFilterMenu",
            actions: {
                createTag: (element, ref) => {
                    createTagFN();
                },
                deleteTag: (element, ref) => {
                    removeTagFN(element.id);
                },
                deleteUnusedTags: (element, ref) => {
                    deleteUnusedTagsFN();
                },
                startTorrents: (element, ref) => {
                    startVisibleTorrentsFN();
                },
                stopTorrents: (element, ref) => {
                    stopVisibleTorrentsFN();
                },
                deleteTorrents: (element, ref) => {
                    deleteVisibleTorrentsFN();
                }
            },
            offsets: {
                x: 0,
                y: 2
            },
            onShow: function() {
                this.startTorrentObserver();
                setTagFilter(this.options.element.id);
            },
            onHide: function() {
                this.stopTorrentObserver();
            }
        });

        const trackersFilterContextMenu = new window.qBittorrent.ContextMenu.TrackersFilterContextMenu({
            targets: ".trackersFilterContextMenuTarget",
            menu: "trackersFilterMenu",
            actions: {
                deleteTracker: (element, ref) => {
                    deleteTrackerFN(element.id);
                },
                startTorrents: (element, ref) => {
                    startVisibleTorrentsFN();
                },
                stopTorrents: (element, ref) => {
                    stopVisibleTorrentsFN();
                },
                deleteTorrents: (element, ref) => {
                    deleteVisibleTorrentsFN();
                }
            },
            offsets: {
                x: 0,
                y: 2
            },
            onShow: function() {
                this.startTorrentObserver();
                setTrackerFilter(this.options.element.id);
            },
            onHide: function() {
                this.stopTorrentObserver();
            }
        });

        if (localPreferences.get("filter_status_collapsed") === "true")
            toggleFilterDisplay("statusFilterList");

        if (localPreferences.get("filter_category_collapsed") === "true")
            toggleFilterDisplay("categoryFilterList");

        if (localPreferences.get("filter_tag_collapsed") === "true")
            toggleFilterDisplay("tagFilterList");

        if (localPreferences.get("filter_tracker_collapsed") === "true")
            toggleFilterDisplay("trackerFilterList");

        document.getElementById("Filters_pad").addEventListener("click", (event) => {
            const filterItem = event.target.closest("li");
            if (!filterItem || filterItem.classList.contains("selectedFilter"))
                return;

            const { id: filterItemID } = filterItem;
            const { id: filterListID } = filterItem.closest("ul[id]");
            switch (filterListID) {
                case "statusFilterList":
                    setStatusFilter(filterItemID.replace("_filter", ""));
                    break;
                case "categoryFilterList":
                    setCategoryFilter(filterItemID);
                    break;
                case "tagFilterList":
                    setTagFilter(filterItemID);
                    break;
                case "trackerFilterList":
                    setTrackerFilter(filterItemID);
                    break;
                default:
                    console.error(`Unexpected filterListID: ${filterListID}`);
                    break;
            }
        });

        document.getElementById("Filters_pad").addEventListener("dblclick", (event) => {
            if ((window.qBittorrent.ClientData.get("dblclick_filter") ?? "1") !== "1")
                return;

            const filterItem = event.target.closest("li");
            if (filterItem === null)
                return;

            const { id: filterListID } = filterItem.closest("ul[id]");
            switch (filterListID) {
                case "statusFilterList":
                    clearCategoryFilter();
                    clearTagFilter();
                    clearTrackerFilter();
                    break;
                case "categoryFilterList":
                    clearStatusFilter();
                    clearTagFilter();
                    clearTrackerFilter();
                    break;
                case "tagFilterList":
                    clearStatusFilter();
                    clearCategoryFilter();
                    clearTrackerFilter();
                    break;
                case "trackerFilterList":
                    clearStatusFilter();
                    clearCategoryFilter();
                    clearTagFilter();
                    break;
                default:
                    console.error(`Unexpected filterListID: ${filterListID}`);
                    break;
            }
        });

        document.getElementById("Filters_pad").addEventListener("click", (event) => {
            const filterTitle = event.target.closest(".filterTitle");
            if (!filterTitle)
                return;

            const filterList = filterTitle.nextElementSibling.id;
            toggleFilterDisplay(filterList);
        });

        document.getElementById("categoryFilterList").addEventListener("click", (event) => {
            if (event.target.className !== "categoryToggle")
                return;

            event.stopPropagation();
            toggleCategoryDisplay(event.target.closest("li").id);
        });

        document.getElementById("categoryFilterList").addEventListener("dblclick", function(event) {
            const filterItem = event.target.closest("li");
            if (!this.classList.contains("subcategories") || !(filterItem?.querySelector("ul")))
                return;

            toggleCategoryDisplay(filterItem.id);
        });

        const clearStatusFilter = () => { setStatusFilter("all"); };
        const clearCategoryFilter = () => { setCategoryFilter(CATEGORIES_ALL); };
        const clearTagFilter = () => { setTagFilter(TAGS_ALL); };
        const clearTrackerFilter = () => { setTrackerFilter(TRACKERS_ALL); };

        return exports();
    })();
    Object.freeze(window.qBittorrent.Filters);
</script>
