<?xml version="1.0" encoding="utf-8" ?>
<table tabindex="0" xmlns:sqreem="sqreem"
    xmlns:treegrid="treegrid">
    <thead >
        <tr></tr>
    </thead>
    <tbody sq-selectable="true"></tbody>
    <tfoot></tfoot>
</table>

    <!-- <div class="form">
        <div>
            <span>Countries:</span>
            <select class="countries" sq-repeat="countries">
                <option value="TREND\\GOOGLE\\${id}">${name}</option>
            </select>
        </div>
        <div>
            <span>Start Year:</span>
            <input class="start" type="number" value="2016" min="1975" max="2018">
        </div>
        <div>
            <span>End Year:</span>
            <input class="end" type="number" value="2018" min="1975" max="2018">
        </div>
        <div>
            <span>Interval:</span>
            <select class="interval">
                <option value="weekly">Weekly</option>
                <option value="daily">Daily</option>
            </select>
        </div>
        <div>
            <span>QRM Dates:</span>
            <select class="dates" sq-repeat="dates">
                <option value="${id}">${id}</option>
            </select>
        </div>
    </div>
    <div class="tablewrapper">
        <span>Keywords Viewer:</span>
        <sq:treegrid class="tree"></sq:treegrid>
    </div> -->
    
<!-- <script>
    sq.ready.then(function () {

        let selected = null
        let treegrid = document.querySelector('.tree').sq
        let selectin = document.querySelector('.countries')
        let interval = document.querySelector('.interval')
        let qrmdates = document.querySelector('.dates')
        let qrms = document.querySelector('.dates')
        let loader = "http://api.sqreem.com/ui/images/app/loadingkey.gif"
        let score = "http://scores.sqreem.com:50000/"
        let dev = "http://devscores.sqreem.com:50000/"
        let token = "MgNiyVxApe+LNlnoYdB2gt7nJ4/NPVudbYkOnD/83Elr4MjJXrOVR3C4VHg+t4a2VCD/0Kg6BJn/TkbK1W0BD40sHTQ621I8u7eiMdOdsVS7s3GJuMaXdIzOx9w4gUAsw1k0hQh9CxSMj0RiZzcsMKtIe4YtaPuaDhEo/UIwxDGUdWVSq/mF/i+nZn8KzdZcjKHx1kVoLbTT/EiB0+UffhOspV2jP05DgbvHiu1iMayLsi4guf/aZ7Gk8MwZM8JEaBsWeIvAiC1lVoTxPSJegmhPL9D5f88AN7to7viD7+hIqCQ6a3+q5tUa3s4mQltoBQahN/7AcKODLNNwuS+q0p+4HZgVLTcupiMNSJJhB9Szd4fFm6Cq/PJzeuVB9oBUds/cqc8zW4VQJEGCR5vsUSFmmMjOyLFjhdfgEsrXB8XrbyS3NtMrD1ISF+srS5D0p/7zjqPWo0kEgH/tOCKZcL2JQF8ncXmnf1mblJ7p7wVpBy4rSlJyMd+XkHsrcLB7SCZfggpME0wXhyYefvk6cjx2nlVxy7cVmQJjFRAxvvmQ7C87X/1UsBkkbI7l2kq4ogG3YfmtYiIeQR/Ft7xzi17uHB9zDnfYWEKxvchXhDGho5mfwm8S3pb6n5avzQS1dtGmdwJgY43cWlKYMHn+Wkm1ruSd8+b+VIIJYQ3ILruWJVIf4c5+cftFwTjDZ4HH8Z9u7kZFLMRYk3EH/rumIoD/mG3OebFHSjFRg8EZY92XObfoYW7mTAV7B3VVLqIoouBGZIH0HgwxULMggacDHAj4h0PVldJ8amuZ2KOHxmcHdE9Wup9pDO0HMe3SKSaIZ9REQX6ukUuO0MW26kXp8w=="

        treegrid.rowController = function (bind) { 
            let json = {}
            let type = "folder"

            json.text = bind.name
            json.path = bind.path
            json.expandable = (bind.expandable === "true");

            json.trend = document.createElement('SPAN')
            json.start = document.createElement('SPAN')
            json.end = document.createElement('SPAN')
            json.score = document.createElement('SPAN')
            json.dev = document.createElement('SPAN')

            if (bind.fs == "file") { 
                type = "file"
                getTrendcount(bind).then(function(response){
                    var parser = new DOMParser()
                    var xml = parser.parseFromString(response.data, "application/xml");
                    xml = xml.firstElementChild
                    json.trend.textContent = xml.querySelector('count').textContent
                    json.start.textContent = xml.querySelector('startDate').textContent
                    json.end.textContent = xml.querySelector('endDate').textContent
                    getScore(bind, score).then(function(response){
                        json.score.textContent = response.data
                    })
                    getScore(bind, dev).then(function(response){
                        json.dev.textContent = response.data
                    })
                })
            }

            json.type = type
            
            return json; 
        }

        treegrid.on("populate", function (e) {
            let rowimage = e.row.dom.querySelector("[name='image'] > img");
            let previmage = rowimage.getAttribute('src');
            rowimage.setAttribute('src', loader);
            getTreedata(e.row.data.path)
                .then(function(response){
                    let json = {}; json.row = e.row;
                    let array = response.data.response.record;
                    if (!Array.isArray(array))  array = [array]
                    json.data = array.reverse()
                    treegrid.populate(json)
                    rowimage.setAttribute('src', previmage)
            })
        })

        initTree = function(value, id){
            
            var json = {
                columns: {
                    text: { name: "Name" },
                    image: { hide: true },
                    trend: { name: "Trend Count" },
                    start: { name: "Start Date" },
                    end: { name: "End Date" },
                    score: { name: "Has Score" },
                    dev: { name: "Has DevScore" }            
                },
                data: [{
                    name: id,
                    id: id,
                    path: value,
                    expandable: "true",
                    fs: "specialfolder",
                    type: "special",
                }]
            }

            treegrid.clear()
            treegrid.bind(json)

        }

        getScore = function(bind, url) {
            let json = {
                "_app": "keywordsmanager",
                "_class": "ScoresV2",
                "_function": "HasScore",
                "accessToken": token,
                "username": "qrm_joseph", //dynamic
                "fullid": bind.id,
                "root": selected.getAttribute('sq-context'),
                "country": selected.getAttribute('sq-context'),
                "resultdate": qrmdates.options[qrmdates.selectedIndex].value //dynamic
            }
            return sq.post(url, json)
        }

        getTrendcount = function(bind) {
            let url = "http://files.sqreem.com:50000/"
            var json = {
                "_app": "keywordsmanager",
                "_class": "Trends",
                "_function": "CountFromYearToYear",
                "accessToken": token,
                "username": "qrm_joseph", //dynamic
                "root": selected.getAttribute('sq-context'),
                "type": "main",
                "interval": interval.options[interval.selectedIndex].value,
                "name": bind.variants,
                "yearFrom": document.querySelector('.start').value,
                "yearTo": document.querySelector('.end').value
            }
            return sq.post(url, json)
        }

        getTreedata = function (path) {
            let url = "http://kw.sqreem.com:50000/"
            let json = {
                "_app": "keywordsmanager",
                "_class": "Keywords",
                "_function": "JGetItems",
                "accessToken": token,
                "showAll": true,
                "path": path
            }
            return sq.post(url, json)
        }

        getCountries = function() {
            let url = "http://api.sqreem.com:50000/"
            var json = {
                "_app": "keywordsmanager",
                "_class": "AccountsManagement",
                "_function": "GetUserDetails",
                "accessToken": token,
                "username": "qrm_joseph", //dynamic
                "input": "qrm_joseph" //dynamic
            }
            return sq.post(url, json)
        }

        getDates = function() {
            let url = "http://scores.sqreem.com:50000/"
            let json = {
                "_class": "Scores",
                "_function": "GetSingleCountryDates",
                "_app": "keywordsmanager",
                "accessToken": token,
                "username": "qrm_joseph", //dynamic
                "input": "sqreemdev", //dynamic
                "country": selected.getAttribute('sq-context')
            }
            return sq.post(url, json)
        }

        selectin.addEventListener('change', function() {
            selected = this.options[this.selectedIndex]
            getDates().then(function(response) {

                let json = {} 
                json.dates = []
                let parser = new DOMParser()
                let xml = parser.parseFromString(response.data, "application/xml")
                xml = xml.firstElementChild.querySelectorAll('dateinfo > date')
                xml.forEach(date => { 
                    let obj = {}
                    obj.id = date.textContent
                    json.dates.push(obj)
                })
                sq.setData(qrms, json)

                let value = selected.value
                let label = selected.textContent
                initTree(value, label)

            })
        })

        getCountries().then(function(response) {
            sq.setData(selectin, response.data.qrm_joseph)
            let evt = document.createEvent("HTMLEvents")
            evt.initEvent("change", false, true)
            selectin.dispatchEvent(evt)
        })

    })
</script> -->