import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isNumber, isNotNull, isFunction } from "../../2.base";

@shortcut()
export class AdaptiveLayout extends Layout {
    static xtype = "bi.adaptive";

    props() {
        return extend(super.props(...arguments), {
            baseCls: "bi-adaptive",
            hgap: 0,
            vgap: 0,
            lgap: 0,
            rgap: 0,
            tgap: 0,
            bgap: 0,
        });
    }

    render() {
        super.render(...arguments);
        const self = this, o = this.options;
        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
            self.populate(newValue);
        }) : o.items;
        this.populate(items);
    }

    _addElement(i, item) {
        const w = super._addElement(...arguments);
        w.element.css({ position: "relative" });
        if (isNotNull(item.left)) {
            w.element.css({
                left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left,
            });
        }
        if (isNotNull(item.right)) {
            w.element.css({
                right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right,
            });
        }
        if (isNotNull(item.top)) {
            w.element.css({
                top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top,
            });
        }
        if (isNotNull(item.bottom)) {
            w.element.css({
                bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom,
            });
        }

        this._handleGap(w, item);

        if (isNotNull(item.width)) {
            w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width });
        }
        if (isNotNull(item.height)) {
            w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height });
        }
        
        return w;
    }

    populate(...args) {
        super.populate(...args);
        this._mount();
    }
}