import { BaseView } from "../../BaseView.js";
export default class FooterResizer extends BaseView {
    constructor(options) {
        super(options);
        this.m_grid = options.grid;
        this.state.unset("grid");
        this.m_footer = options.footer;
        this.state.unset("footer");
    }
    get source() {
        return super.source;
    }
    get footer() {
        return this.m_footer;
    }
    get grid() {
        return this.m_grid;
    }
    template() {
        return `<div class="-fb-grid-resizer"></div>`;
    }
    onActivate(e) {
        super.onActivate(e);
        this.draggable_init();
    }
    onDestroy(e) {
        super.onDestroy(e);
        if (this.node.data("ui-draggable")) {
            this.node.draggable("destroy");
        }
    }
    draggable_init() {
        this.node.draggable({
            axis: "y",
            containment: this.grid.node,
            start: (e) => {
                this.dragStart();
            },
            drag: (e) => {
                $(e.target).css({
                    opacity: ".3"
                });
            },
            stop: (e, ui) => {
                this.setPosition(ui.position.top);
                this.dragStop();
            }
        });
    }
    setPosition(top) {
        let height = this.footer.node.height() + (top * -1);
        height = height < 50 ? 50 : height;
        this.footer.node.css({
            height: `${height}px`
        });
        this.source.locals.storage.footerHeight = height;
    }
    dragStart() {
        let gridHeight = this.grid.node.height();
        let footerHeight = this.footer.node.height();
        this.node.css({
            top: gridHeight - footerHeight,
            opacity: .3
        });
        this.node.detach();
        this.grid.node.append(this.node);
    }
    dragStop() {
        this.node.css({
            top: 0,
            opacity: 0
        });
        this.node.detach();
        this.footer.node.append(this.node);
    }
}
