/*!
 * Built by Revolist OU ❤️
 */
import { h } from "@stencil/core";
import { ResizeDirective, ResizeEvents, } from "./resizable.directive";
export const ResizableElement = (props, children) => {
    const resizeEls = [];
    const directive = (props.canResize &&
        new ResizeDirective(props, e => {
            var _a;
            if (e.eventName === ResizeEvents.end) {
                (_a = props.onResize) === null || _a === void 0 ? void 0 : _a.call(props, e);
            }
        })) ||
        null;
    if (props.active) {
        if (props.canResize) {
            for (let p in props.active) {
                resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
                        var _a;
                        e.preventDefault();
                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
                    }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
            }
        }
        else {
            for (let _p in props.active) {
                resizeEls.push(h("div", { onClick: e => e.preventDefault(), onTouchStart: (e) => e.preventDefault(), onDblClick: e => {
                        var _a;
                        e.preventDefault();
                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
                    }, class: `no-resize` }));
            }
        }
    }
    return (h("div", Object.assign({}, props, { ref: e => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }), children, resizeEls));
};
