import View from "../View.js";
import LabelView from "../common/LabelView.js";
import Vector1 from "../../core/geom/Vector1.js";
import domify from "../DOM.js";
import { LocalizedLabelView } from "../common/LocalizedLabelView.js";


export class AssetLoaderStatusView extends View {
    /**
     *
     * @param {AssetManager} assetManager
     * @param {Localization} localization
     * @constructor
     */
    constructor({ assetManager, localization }) {
        super();
        const dom = domify();
        this.el = dom.addClass('ui-asset-manager-loading-status-view').el;

        this.assetManager = assetManager;


        this.pendingAssetCount = new Vector1();

        this.pendingAssetCount.process(function (v) {
            dom.setClass('finished', v === 0);
        });

        const self = this;

        this.addChild(new LocalizedLabelView({
            id: 'system_asset_loader.pending_count.label',
            localization,
            classList: ['pending']
        }));

        const vLabelPending = new LabelView(this.pendingAssetCount);


        this.__handlerAssetAdded = function () {
            self.pendingAssetCount._add(1);
        };

        this.__handlerAssetRemoved = function () {
            self.pendingAssetCount._add(-1);
        };

        this.addChild(vLabelPending);
    }


    link() {
        super.link();

        const self = this;

        self.pendingAssetCount.set(0);

        this.assetManager.request_map.forEach(function (key, value) {
            self.__handlerAssetAdded(key, value);
        });

        this.assetManager.request_map.on.set.add(this.__handlerAssetAdded);
        this.assetManager.request_map.on.deleted.add(this.__handlerAssetRemoved);
    }

    unlink() {
        super.unlink();


        this.assetManager.request_map.on.set.remove(this.__handlerAssetAdded);
        this.assetManager.request_map.on.deleted.remove(this.__handlerAssetRemoved);
    }
}
