window.customElements.define('d4s-social-search', class extends HTMLElement {

    constructor() {
        super()
    }

    connectedCallback() {
        //console.log(typeof d4s)
        //console.log(this)
        //this.attachShadow({mode: "open"})
        //console.log(this.shadowRoot.querySelector("*[name=search]"))
        //const shadowRoot = this.attachShadow({mode: 'open'})
        //console.log(shadowRoot.innerHTML)
        console.log("d4s-social-search connectedCallback")
        var d4s = document.querySelector('d4s-boot-2')        

        /*
        d4s.service(
            'https://api.dev.d4science.org/rest/2/full-text-search/search-by-query?query=d4science',
            'GET', null,
            (resp) => {
                document.getElementById('output').innerText = resp
            },
            () => { alert('Forbidden') }
        )

        d4s.service(
            'https://api.dev.d4science.org/rest/2/posts/get-posts-user-quantity',
            'GET', null,
            (resp) => {
                document.getElementById('output').innerText = resp
            },
            () => { alert('Forbidden') }
        )
        */
    }
})

window.customElements.define('d4s-social-posts', class extends HTMLElement {

    #basepath = 'https://api.d4science.org/rest'
    #quantity = 20

    constructor() {
        super()
    }

    connectedCallback() {
        const shadowRoot = this.attachShadow({mode: 'open'})

        var d4s = document.querySelector('d4s-boot-2')
        d4s.service(
            this.#basepath + '/2/posts/get-posts-vre',
            'GET', null,
            (resp) => {
                var jresp = JSON.parse(resp)
                if (jresp.success) {
                    var ul = document.createElement('ul')
                    jresp.result.reverse().forEach(post => {
                        if (this.#quantity-- > 0) {
                            var li = document.createElement('li')
                            li.setAttribute('class', 'd4s-social-post')
                            const datetime = new Date(0)
                            datetime.setUTCMilliseconds(post.time)
                            const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + d4s.clientId + post.thumbnail_url : post.thumbnail_url
                            li.innerHTML = `
                                <div class="d4s-post-heading">
                                    <div class="d4s-post-avatar">
                                        <img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
                                    </div>
                                    <div class="d4s-post-meta">
                                        <div class="fullname">${post.full_name}</div>
                                        <div class="time">${datetime.toLocaleString()}</div>
                                    </div>
                                </div>
                                <div class="d4s-post-body">${post.description}</div>
                                <div class="d4s-post-footer"></div>
                            `
                            ul.appendChild(li)
                        }
                    })
                    shadowRoot.appendChild(ul)
                }
            },
            () => { alert('Forbidden') }
        )
    }

    static get observedAttributes() {
        return ["url", "quantity"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            switch (name) {
                case "url":
                    this.#basepath = newValue
                    break
                case "quantity":
                    this.#quantity = newValue
                    break
            }
        }
    }
    
    get url() {
        return this.#basepath
    }

    set url(url) {
        this.#basepath = url
        this.setAttribute("url", url)
    }

    get quantity() {
        return this.#quantity
    }

    set quantity(quantity) {
        this.#quantity = quantity
        this.setAttribute("quantity", quantity)       
    }
})