let userName = localStorage.getItem('smartCamUser');
let userPass = localStorage.getItem('smartCamPass');
const jumboParag = document.getElementById('jumboParag');

const uploadParag = document.getElementById('uploadParag');
const xmlForm = document.getElementById('xmlForm');
const picker = document.getElementById('picker');

const test = document.getElementById("test");
//create formData object from the html form and append username

const parLines = document.getElementById("parLines");

const xmlPHPUpload = 'uploadXML.php';
const xmlPHPView = 'detectionFilesView.php';
const xmlPhpDelete = 'detectionFilesDel.php';

const myFile = document.getElementById("myFile");
const deleteBTN = document.getElementById("deleteBTN");

if (userName == null && userPass == null) {
    jumboParag.textContent = "You are not loged in ";
    //if it's loged in, user can initiate stream
} else {
    jumboParag.textContent = userName + " | My DETECTION FILES Page";

    xmlForm.addEventListener('submit', function(event) {
        event.preventDefault();
        
        const xmlFormObj = new FormData(xmlForm);
        xmlFormObj.append('userName', userName);

        uploadXml(xmlFormObj);
    });

    async function uploadXml(xmlFormObj) {
        
        const response = await fetch(xmlPHPUpload, 
        {
            method: 'POST',
            body: xmlFormObj
        });
        //uploadParag.textContent = "test 3";
        const phpResponse = await response.text();
        uploadParag.textContent = phpResponse;
        //uploadParag.textContent = "test 3";
        viewXml();
        xmlForm.reset();
    }
   
    async function viewXml() {
        while(parLines.firstChild) {
            parLines.removeChild(parLines.firstChild);
        }

        while(myFile.firstChild) {
            myFile.removeChild(myFile.firstChild);
        }

        const viewXmlObj = new FormData();
        viewXmlObj.append('userName', userName);
     
        const response = await fetch(xmlPHPView,
            {
                method: 'POST',
                body: viewXmlObj
            });
        const phpResponse = await response.text();
        let XmlArr = phpResponse.split(",");
        for(let i = 0; i < XmlArr.length; i++) {
            let p = document.createElement("p");
            parLines.appendChild(p);
            p.textContent = XmlArr[i];

            let opt = document.createElement("option");
            myFile.appendChild(opt);
            opt.textContent = XmlArr[i];
            opt.value = XmlArr[i];

        }
       
    }

    viewXml();

    
    deleteBTN.addEventListener('click', function(event) {
        event.preventDefault();

        const deleteObj = new FormData();
        deleteObj.append('userName', userName);
        deleteObj.append('delXML', myFile.value);

        deleteXml(deleteObj);
    });

    async function deleteXml(deleteObj) {
        
        const response = await fetch(xmlPhpDelete, 
        {
            method: 'POST',
            body: deleteObj
        });
       
        const phpResponse = await response.text();
        test.textContent = phpResponse;
        viewXml();
    }
   
}


