04. Locked profile

function lockedProfile() {

    let main = document.getElementById("main");

    var requestOptions = {
        method: 'GET',
        redirect: 'follow'
    };

    fetch("http://localhost:3030/jsonstore/advanced/profiles", requestOptions)
        .then(response => response.json())
        .then(result => populate(result))
        .catch(error => console.log('error', error));


    function populate(dataObj) {
        main.innerHTML = "";
        let arr = Array.from(Object.entries(dataObj));


        arr.forEach(p => {
            let profileDiv = document.createElement("div");
            profileDiv.className = "profile";

            let profilePic = document.createElement("img");
            profilePic.setAttribute("src", "./iconProfile2.png");
            profilePic.className = "userIcon";
            let lockLabel = document.createElement("label");
            lockLabel.textContent = "Lock";
            let radioLock = document.createElement("input");
            radioLock.type = "radio";
            radioLock.checked = true;
            radioLock.name = `${p[1].username}Locked`
            let unlockLabel = document.createElement("label");
            unlockLabel.textContent = "Unlock";
            let radioUnlock = document.createElement("input");
            radioUnlock.type = "radio";
            radioUnlock.name = `${p[1].username}Locked`
            let hr = document.createElement("hr");
            let usernameLabel = document.createElement("label");
            usernameLabel.textContent = "Username";
            let usernameInput = document.createElement("input");
            usernameInput.disabled = true;
            usernameInput.value = p[1].username;

            let hiddenDiv = document.createElement("div");
            hiddenDiv.id = `${p[1].username}HiddenFields`;
            hiddenDiv.style.display = "none";
            let hiddenHr = document.createElement("ht");
            let emailLable = document.createElement("label");
            emailLable.textContent = "Email:";
            let emailInput = document.createElement("input");
            emailInput.disabled = true;
            emailInput.value = p[1].email;
            let ageLabel = document.createElement("label");
            ageLabel.textContent = "Age:"
            let ageInput = document.createElement("input");
            ageInput.disabled = true;
            ageInput.value = p[1].age;

            let buttonShow = document.createElement("button");
            buttonShow.textContent = "Show more";
            buttonShow.addEventListener("click", () => (togleVisibility(profileDiv, hiddenDiv)));

            hiddenDiv.appendChild(hiddenHr);
            hiddenDiv.appendChild(emailLable);
            hiddenDiv.appendChild(emailInput);
            hiddenDiv.appendChild(ageLabel);
            hiddenDiv.appendChild(ageInput);


            profileDiv.appendChild(profilePic);
            profileDiv.appendChild(lockLabel)
            profileDiv.appendChild(radioLock);
            profileDiv.appendChild(unlockLabel)
            profileDiv.appendChild(radioUnlock);
            profileDiv.appendChild(hr);
            profileDiv.appendChild(usernameLabel);
            profileDiv.appendChild(usernameInput);
            profileDiv.appendChild(hiddenDiv);
            profileDiv.appendChild(buttonShow)
            main.appendChild(profileDiv)
        })

        function togleVisibility(profileDiv, hiddenDiv) {

            let unlockedRadio = Array.from(profileDiv.querySelectorAll('input'))[1];
            let showBtn = profileDiv.querySelector("button");

            if (unlockedRadio.checked == true) {

                if (showBtn.textContent == "Show more") {
                    hiddenDiv.style.display = "block";
                    showBtn.textContent = "Hide it"
                } else {
                    hiddenDiv.style.display = "none";
                    showBtn.textContent = "Show more"
                }
            }


        }

    }

}