class DayJSAgo extends HTMLElement {
    static observedAttributes = ['ts']

    /**
     * @type {number | null | undefined}
     */
    updaterId = null

    /**
     * @type {string | null | undefined}
     */
    ts

    constructor() {
        super()
    }

    connectedCallback() {
        this.startUpdater()
    }

    disconnectedCallback() {
        this.stopUpdater()
    }

    connectedMoveCallback() {
        this.stopUpdater()
    }

    adoptedCallback() {
        this.startUpdater()
    }

    /**
     * @param {string} name
     * @param {string} _oldValue
     * @param {string} newValue
     */
    attributeChangedCallback(name, _oldValue, newValue) {
        if (name === 'ts' && newValue != null) this.ts = newValue
    }

    startUpdater() {
        if (this.updaterId != null)
            throw new Error(
                `Couldn't start updater. Updater was not shut down or already active.`
            )

        this.updateContent()
        // @ts-ignore
        this.updaterId = setInterval(this.updater.bind(this), 60000)
    }

    stopUpdater() {
        if (this.updaterId != null) clearInterval(this.updaterId)
    }

    updateContent() {
        // @ts-ignore
        // eslint-disable-next-line no-undef -- YOLO
        this.textContent = dayjs(this.ts).fromNow()
    }

    updater() {
        if (this.ts != null) this.updateContent()
    }
}

customElements.define('day-js-ago', DayJSAgo)