import './layer.css';
import utils from 'somes';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ViewController } from './ctr';
import { EventNoticer } from 'somes/event';
import { getDefaultId } from './dialog';
export class LayerGroup {
    constructor(panel = document.body) {
        this._IDs = new Map();
        utils.assert(panel, 'Panel cannot be empty');
        this._panel = panel;
    }
    get preventCover() {
        for (var [, l] of this._IDs) {
            if (l.preventCover)
                return true;
        }
        return false;
    }
    async show(D, opts, animate = true, delay = 0, act) {
        var id = (opts === null || opts === void 0 ? void 0 : opts.id) ? String(opts.id) : getDefaultId(D);
        utils.assert(!this._IDs.has(id), `Dialog already exists, "${id}"`);
        var div = document.createElement('div');
        this._panel.appendChild(div);
        var instance = await new Promise(r => ReactDom.render(React.createElement(D, Object.assign({}, opts, { __activity: act, __panel: div })), div, function () { r(this); }));
        instance.onClose.on(() => this._IDs.delete(id));
        this._IDs.set(id, instance);
        instance.show(animate, delay);
        return instance;
    }
    close(id, animate = true) {
        var _id = typeof id == 'string' ? String(id) : getDefaultId(id);
        var l = this._IDs.get(_id);
        if (l) {
            l.close(animate);
        }
        else {
            console.warn(`Layer no exists, "${id}"`);
        }
    }
    closeAll() {
        for (var [, b] of this._IDs) {
            b.close();
        }
    }
}
var _globaLayerGroup;
export class Layer extends ViewController {
    constructor() {
        super(...arguments);
        this.fullScreen = true;
        this.onClose = new EventNoticer('Close', this);
        this.__show = false;
        this.__close = false;
        this.__activity = this.props.__activity;
        this.__panel = this.props.__panel;
    }
    get preventCover() {
        return this.fullScreen;
    }
    get activity() {
        return this.__activity;
    }
    render() {
        return this.__show ? (React.createElement("div", { className: 'layer' + (this.fullScreen ? ' fullScreen' : ''), ref: "root" }, this.renderBody())) : null;
    }
    async _enableAnimate(animate) {
        if (!this.refs.root)
            return;
        if (animate) {
            this.refs.root.style.transitionDuration = '300ms';
        }
        else {
            this.refs.root.style.transitionDuration = '0ms';
        }
        this.refs.root.style.display = 'block';
        await utils.sleep(30);
    }
    async _hide(animate) {
        await this._enableAnimate(animate);
        if (!this.refs.root)
            return;
        this.refs.root.style.opacity = '0';
        await utils.sleep(300);
    }
    async show(animate = true, delay = 0) {
        if (delay)
            await utils.sleep(delay);
        if (this.__close)
            return;
        this.__show = true;
        this.forceUpdate(async () => {
            if (!this.__close) {
                await this._enableAnimate(animate);
                this.refs.root.style.opacity = '1';
                await utils.sleep(300);
            }
        });
    }
    async close(animate = true) {
        if (!this.__close) {
            this.__close = true;
            this.onClose.trigger({ animate });
            await this._hide(animate);
        }
        if (this.__panel) {
            ReactDom.unmountComponentAtNode(this.__panel);
            this.__panel.parentNode.removeChild(this.__panel);
            this.__panel = undefined;
        }
    }
    static get globaLayerGroup() {
        if (!_globaLayerGroup) {
            _globaLayerGroup = new LayerGroup();
        }
        return _globaLayerGroup;
    }
}
