import Container from "./container.js";

export default class ScrollingContainer extends Container {
    constructor() {
        super();

        this.class("scrolling-container");
        this.css('overflow', 'auto');
        this.css('scroll-behavior', 'smooth');
        this.css('position', 'relative');
    }

    setNoteContextEvent({noteContext}) {
        /** @var {NoteContext} */
        this.noteContext = noteContext;
    }

    async noteSwitchedEvent({noteContext, notePath}) {
        this.$widget.scrollTop(0);
    }

    async noteSwitchedAndActivatedEvent({noteContext, notePath}) {
        this.noteContext = noteContext;

        this.$widget.scrollTop(0);
    }

    async activeContextChangedEvent({noteContext}) {
        this.noteContext = noteContext;
    }

    handleEventInChildren(name, data) {
        if (name === 'readOnlyTemporarilyDisabled'
                && this.noteContext
                && this.noteContext.ntxId === data.noteContext.ntxId) {

            const scrollTop = this.$widget.scrollTop();

            const promise = super.handleEventInChildren(name, data);

            // there seems to be some asynchronicity, and we need to wait a bit before scrolling
            promise.then(() => setTimeout(() => this.$widget.scrollTop(scrollTop), 500));

            return promise;
        }
        else {
            return super.handleEventInChildren(name, data);
        }
    }

    scrollContainerToCommand({position}) {
        this.$widget.scrollTop(position);
    }
}