"use strict"

/**
 * Relative Date/Time Custom HTML Element
 *
 * This creates an element that will take the existing date/time and replace it with words (ex. "about a year ago",
 * "in 3 hours"). It will update based on the interval provided in the tag.
 *
 * ```html
 * <relative-date-time interval=5000>2024-08-22T12:34:56+00:00</relative-date-time>
 * ```
 */
class RelativeDateTime extends HTMLElement {

    static #LessThanXMinutes = Symbol()
    static #XMinutes = Symbol()
    static #AboutXHours = Symbol()
    static #XDays = Symbol()
    static #AboutXMonths = Symbol()
    static #XMonths = Symbol()
    static #AboutXYears = Symbol()
    static #OverXYears = Symbol()
    static #AlmostXYears = Symbol()

    static #messages = new Map([
        [RelativeDateTime.#LessThanXMinutes, ['less than a minute', 'less than %d minutes']],
        [RelativeDateTime.#XMinutes, ['a minute', '%d minutes']],
        [RelativeDateTime.#AboutXHours, ['about an hour', 'about %d hours']],
        [RelativeDateTime.#XDays, ['a day', '%d days']],
        [RelativeDateTime.#AboutXMonths, ['about a month', 'about %d months']],
        [RelativeDateTime.#XMonths, ['a month', '%d months']],
        [RelativeDateTime.#AboutXYears, ['about a year', 'about %d years']],
        [RelativeDateTime.#OverXYears, ['over a year', 'over %d years']],
        [RelativeDateTime.#AlmostXYears, ['almost a year', 'almost %d years']],
    ])

    static #aDay = 1440.0
    static #almost2Days = 2520.0
    static #aMonth = 43200.0
    static #twoMonths = 86400.0

    /**
     * The date, parsed from the `innerHTML` of the element
     * @type Date
     */
    #jsDate

    /**
     * The ID of the interval (set via `setTimeout`, passed to `clearTimeout`)
     * @type ?number
     */
    #timeOut = null

    constructor() {
        super();
    }

    #update() {

        const now = new Date()
        const minutes = Math.abs((this.#jsDate.getTime() - now.getTime()) / 60 / 1000);
        const months = Math.round(minutes / RelativeDateTime.#aMonth);
        const years = Math.floor(months / 12);

        /** @type symbol */
        let typ
        /** @type number */
        let nbr

        if (minutes < 1.0) {
            typ = RelativeDateTime.#LessThanXMinutes
            nbr = 1
        } else if (minutes < 45.0) {
            typ = RelativeDateTime.#XMinutes
            nbr = Math.round(minutes)
        } else if (minutes < 90.0) {
            typ = RelativeDateTime.#AboutXHours
            nbr = 1
        } else if (minutes < RelativeDateTime.#aDay) {
            typ = RelativeDateTime.#AboutXHours
            nbr = Math.round(minutes / 60)
        } else if (minutes < RelativeDateTime.#almost2Days) {
            typ = RelativeDateTime.#XDays
            nbr = 1
        } else if (minutes < RelativeDateTime.#aMonth) {
            typ = RelativeDateTime.#XDays
            nbr = Math.round(minutes / RelativeDateTime.#aDay)
        } else if (minutes < RelativeDateTime.#twoMonths) {
            typ = RelativeDateTime.#AboutXMonths
            nbr = Math.round(minutes / RelativeDateTime.#aMonth)
        } else if (months < 12) {
            typ = RelativeDateTime.#XMonths
            nbr = Math.round(minutes / RelativeDateTime.#aMonth)
        } else if (months % 12 < 3) {
            typ = RelativeDateTime.#AboutXYears
            nbr = years
        } else if (months % 12 < 9) {
            typ = RelativeDateTime.#OverXYears
            nbr = years
        } else {
            typ = RelativeDateTime.#AlmostXYears
            nbr = years + 1
        }

        const tmpl = RelativeDateTime.#messages.get(typ)
        const message = nbr === 1 ? tmpl[0] : tmpl[1].replace("%d", nbr.toString())
        this.innerText = this.#jsDate < now ? `${message} ago` : `in ${message}`
    }

    connectedCallback() {
        this.#jsDate = new Date(this.innerText)
        this.#update()
        this.#timeOut = setInterval(() => this.#update(), parseInt(this.getAttribute("interval")))
    }

    disconnectedCallback() {
        if (this.#timeOut) clearInterval(this.#timeOut)
    }
}

customElements.define("relative-date-time", RelativeDateTime)