/**
 * Base class of <d4s-storage-tree> and <d4s-storage-folder>
 */
class D4SStorageHtmlElement extends HTMLElement {

    
    #d4smissmsg = 'Required d4s-boot-2 component not found'
    //#baseurl = 'https://api.d4science.org/workspace'
    #baseurl = 'https://workspace-repository.dev.d4science.org/storagehub/workspace'

    constructor() {
        super()
    }

    appendStylesheets(root) {
        const linkElem1 = document.createElement('link')
        linkElem1.setAttribute('rel', 'stylesheet')
        linkElem1.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css')
        root.appendChild(linkElem1)
    }

    buildListUrl(id) {
        return this.#baseurl + '/items/' + id + '/children'
    }

    get baseUrl() {
        return this.#baseurl
    }

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


/**
 * Builds storagehub VREFolder tree
 * <d4s-storage-tree
 *  /@filelist-id: identifier of d4s-storage-folder component
 *  /@base-url: the base endpoint url [defaults to: https://api.d4science.org/workspace]
 */
window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlElement {

    #storageFilelistId = null

    #loadedClass = 'loaded'
    #selectedClass = 'selected'
    #selectedbgcolor = 'lightgray'
    #shadowRoot
    #boot = null
    
    constructor() {
        super()
        this.#boot = document.querySelector('d4s-boot-2')
        this.#shadowRoot = this.attachShadow({mode: 'open'})
    }

    /*
    Notes:
    API docs: https://gcube.wiki.gcube-system.org/gcube/StorageHub_REST_API
    Preprod: https://accounts.pre.d4science.org
    Sample context: %2Fpred4s%2Fpreprod%2FpreVRE
    User workspace: https://storagehub.pre.d4science.net/storagehub/workspace
    vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/vrefolder
     -> and if "id": "e0cd15d2-0071-43ca-bc42-aef8d80660fe",
        the tree dir of vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/items/e0cd15d2-0071-43ca-bc42-aef8d80660fe/children
        download of a file (domenica.jpg): https://storagehub.pre.d4science.net/storagehub/workspace/items/a5086811-59d1-4230-99fa-98431e820cf1/download
    */
    connectedCallback() {
        this.appendStylesheets(this.#shadowRoot)

        var div = document.createElement('div')
        const style = `
            <style>
                .selected > *:first-child {
                    background-color: ${this.#selectedbgcolor};
                }
                ul, li {
                    list-style-type: none;
                }
                li {
                    cursor: pointer;
                }
            </style>
        `
        div.innerHTML = style

        
        this.#boot.secureFetch(this.baseUrl + '/vrefolder').then(
          (reply)=>{
            if(reply.status !== 200) throw "Unable to load folder";
            return reply.json()
          }
        ).then(data => {
          this.parseResponse(div, data)
          this.#shadowRoot.appendChild(div)
        }).catch(err=>alert(err))
    }

    parseResponse(parentElement, jresp) {
        parentElement.classList.add(this.#loadedClass)
        var ul = document.createElement('ul')
        ul.classList.add('nested')
        if (jresp.item) {
            const itemname = jresp.item.displayName
            const itemid = jresp.item.id
            const path = this.buildListUrl(itemid)
            ul.appendChild(this.createListItem(itemname, itemid))
            parentElement.appendChild(ul)

        } else if (jresp.itemlist) {
            jresp
                .itemlist
                .filter(item => item['@class'].includes('FolderItem'))
                .forEach(item => {
                    const itemname = item.name
                    const itemid = item.id
                    const path = this.buildListUrl(itemid)
                    ul.appendChild(this.createListItem(itemname, itemid))
                })
            parentElement.appendChild(ul)
        } else {
            console.error(jresp)
        }
    }

    createListItem(label, id) {
        var li = document.createElement('li')
        li.setAttribute('data-id', id)
        var child = document.createElement('span')
        child.innerHTML = label
        li.appendChild(child)

        li.addEventListener('click', (ev) => {
            ev.stopPropagation()
            this.select(ev.currentTarget.getAttribute('data-id'))
        })
        return li
    }

    select(id) {
        var li = this.shadowRoot.querySelector(`*[data-id='${id}']`)
        this.displayPath(li)

        // if it was already selected then do nothing
        if (li.classList.contains(this.#selectedClass)) {
            this.toggleULDisplay(li)
            return
        }
        // switch selected and lists folder contents
        if (!li.classList.contains(this.#selectedClass)) {
            const selected = this.shadowRoot.querySelector('.' + this.#selectedClass)
            if (selected) {
                selected.classList.remove(this.#selectedClass)
            }
            li.classList.add(this.#selectedClass)
            if (this.#storageFilelistId) {
                var folder = document.getElementById(this.#storageFilelistId)
                folder.join(this)
                folder.list(id)
            }
        }
        if (li.classList.contains(this.#loadedClass)) {
            return
        }
        this.#boot.secureFetch(this.buildListUrl(id)).then(reply=>{
          if(reply.status !== 200) throw "Unable to load folder";
          return reply.json()
        }).then(data=>{
          this.parseResponse(li, data)
        }).catch(err=>alert(err))
    }

    displayPath(li) {
        var curr = li
        while (curr.parentElement != null) {
            if (curr.parentElement.tagName == 'UL') {
                curr.parentElement.style.display = 'block'
            }
            curr = curr.parentElement
        }
    }

    toggleULDisplay(li) {
        const ul = li.querySelector('ul')
        if (ul) {
            ul.style.display = (ul.style.display === 'none') ? 'block' : 'none'
        }
    }

    static get observedAttributes() {
        return ["base-url", "filelist-id"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            switch (name) {
                case "filelist-id":
                    this.#storageFilelistId = newValue
                    break
                case "base-url":
                    this.baseUrl = newValue
                    break
            }
        }
    }

    get filelistId() {
        return this.#storageFilelistId
    }

    set filelistId(id) {
        this.#storageFilelistId = id
        this.setAttribute("filelist-id", id)
    }
})

/**
 * Lists elements in selected folder
 * 
 * <d4s-storage-folder
 *  /@id: specify the id to join this component with storage tree component
 *  /@base-url: the base endpoint url [defaults to: https://api.d4science.org/workspace]
 */
window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlElement {

    #d4sstorageTree = null
    #selectedbgcolor = 'lightgray'

    constructor() {
        super()
    }

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

        const style = document.createElement('style')
        style.innerHTML = `
            span {
                cursor: pointer;
                user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
            }
        `
        shadowRoot.appendChild(style)
        this.createContainer()
    }

    createContainer() {
        var div = document.createElement('div')
        div.classList.add('d4s-folder')
        var child = this.shadowRoot.querySelector('.d4s-folder')
        if (child) {
            this.shadowRoot.removeChild(child)
        }
        this.shadowRoot.appendChild(div)
        return div
    }

    join(tree) {
        if (this.#d4sstorageTree == null) {
            this.#d4sstorageTree = tree
        }
    }

    list(folderId) {
        this.d4s.service(
            this.buildListUrl(folderId),
            'GET', null,
            (resp) => this.parseResponse(resp),
            (err) => { alert(err) }
        )
    }

    parseResponse(response) {
        const root = this.createContainer()
        var jresp = JSON.parse(response)
        if (jresp.itemlist) {
            jresp.itemlist.forEach(item => root.appendChild(this.createFileRow(item)))

        } else {
            console.error(jresp)
        }
    }

    createFileRow(item) {
        var div = document.createElement('div')
        div.classList.add('row')
        var filename = document.createElement('div')
        filename.classList.add('col')
        var name = `<span>${item.name}</span>`
        filename.innerHTML = this.iconTag(item) + name
        const isFolder = item['@class'].includes('FolderItem')
        filename.addEventListener('click', (ev) => {
            ev.stopPropagation()
            if (isFolder) {
                const span = ev.currentTarget.querySelector(':nth-child(2)')
                if (span) {
                    span.style = 'background-color: ' + this.#selectedbgcolor
                }
                if (this.#d4sstorageTree != null) {
                    this.#d4sstorageTree.select(item.id)
                }
            } else {
                console.info("Download of " + item.id)
                this.#boot.download(this.buildDownloadUrl(item.id), item.name)
            }
        })

        div.appendChild(filename)
        return div
    }

    iconTag(item) {
        var i = `<img src="/storage/img/file-earmark.svg"></img>`
        if (item['@class'].includes('FolderItem')) {
            i = `<img src="/storage/img/folder.svg"></img>`
        } else if (item['@class'].includes('ImageFile')) {
            i = `<img src="/storage/img/image.svg"></img>`
        } else if (item['@class'].includes('PDFFileItem')) {
            i = `<img src="/storage/img/filetype-pdf.svg"></img>`
        }
        return '<span class="px-2">' + i + '</span>'
    }

    buildDownloadUrl(id) {
        return this.baseUrl+ '/items/' + id + '/download'
    }

    static get observedAttributes() {
        return ["base-url"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            switch (name) {
                case "base-url":
                    this.baseUrl = newValue
                    break
            }
        }
    }

})