function attachEvents() {
    let allCatchesDiv = document.getElementById("catches");
    let addCatchButton = Array.from(document.getElementsByClassName("add"))[0];
    let loggedIn = sessionStorage.getItem("token");
    let loggedEmail=sessionStorage.getItem("loggedEmail");
    console.log(loggedEmail)
 
 
    if (loggedIn != null) {
        // console.log("you are logged in")
        // console.log(loggedIn)
        addCatchButton.disabled = false;
    }
 
    addCatchButton.addEventListener("click", addNewCatch);
 
    function addNewCatch() {
        let addForm = document.getElementById("addForm");
        let inputs = Array.from(addForm.querySelectorAll("input"));
        let newAng = inputs[0].value;
        let newWeight = inputs[1].value;
        let newSpecies = inputs[2].value;
        let newLocation = inputs[3].value;
        let newBait = inputs[4].value;
        let newCaptureTime = inputs[5].value;
        //json because of the sucky white space!
        let newCatchObj = {
 
            "angler": newAng,
            "weight": newWeight,
            "species": newSpecies,
            "location": newLocation,
            "bait": newBait,
            "captureTime ": newCaptureTime,
            "createdBy": loggedEmail
        }
        let myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("X-Authorization", loggedIn)
 
        var raw = JSON.stringify(newCatchObj);
 
        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };
 
        fetch("http://localhost:3030/data/catches", requestOptions)
            .then(response => response.json())
            .then(result => getAllCatches())
            .catch(error => console.log('error', error));
    }
 
    function getAllCatches() {
        let requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };
 
        fetch("http://localhost:3030/data/catches", requestOptions)
            .then(response => response.json())
            .then(result => renderAllCatches(result))
            .catch(error => console.log('error', error));
    }
 
    function renderAllCatches(data) {
        allCatchesDiv.innerHTML = "";
        data.forEach(c => {
 
            let catchDiv = document.createElement("div");
           
            //set id equal to catch id to retreive (update/delete) the catch
            catchDiv.id = c._id;

 //in order to check if logged user is owner of catch
            catchDiv.setAttribute('data-id', c.createdBy);
 
            catchDiv.className = "catch";
            let anglerLabel = document.createElement("label");
            anglerLabel.textContent = "Angler";
            let anglerInput = document.createElement("input");
            anglerInput.className = "angler";
            anglerInput.value = c.angler;
            let hrOne = document.createElement("hr");
            let weightLabel = document.createElement("label");
            weightLabel.textContent = "Weight";
            let weightInput = document.createElement("input");
            weightInput.type = "number";
            weightInput.className = "weight";
            weightInput.value = c.weight;
            let hrWtwo = document.createElement("hr");
            let speciesLabel = document.createElement("label");
            speciesLabel.textContent = "Species";
 
            let speciesInput = document.createElement("input");
            speciesInput.type = "text";
            speciesInput.className = "species";
            speciesInput.value = c.species;
 
            let hrThree = document.createElement("hr");
 
            let locationLabel = document.createElement("label");
            locationLabel.textContent = "Location";
 
            let locationInput = document.createElement("input");
            locationInput.type = "text";
            locationInput.className = "location";
            locationInput.value = c.location;
 
            let baitLabel = document.createElement("label");
            baitLabel.textContent = "Bait";
 
            let baitInput = document.createElement("input");
            baitInput.type = "text";
            baitInput.className = "bait";
            baitInput.value = c.bait;
 
            let hrFour = document.createElement("hr");
            let hrFuck = document.createElement("hr");
 
            let captureTimeLabel = document.createElement("label");
            captureTimeLabel.textContent = "Capture time";
 
            let captureTimeInput = document.createElement("input");
            captureTimeInput.type = "text";
            captureTimeInput.className = "bait";
 
            //because of the white space in the field name returned by the server!!!!!!!!!!!!!!
            let captureTime = "captureTime "
            captureTimeInput.value = c[captureTime];
 
            let updateButton = document.createElement("button");
            updateButton.textContent = "Update";
            updateButton.className = "update";
            if (c.hasOwnProperty("createdBy")&& catchDiv.getAttribute('data-id')==loggedEmail) {
                updateButton.disabled = false;
            } else {
                updateButton.disabled = true;
            }
            updateButton.addEventListener("click", () => updateCatch(catchDiv.id, catchDiv))
 
            let deleteButton = document.createElement("button");
            deleteButton.textContent = "Delete";
            deleteButton.className = "delete";
 
            if(c.hasOwnProperty("createdBy")&& catchDiv.getAttribute('data-id')==loggedEmail){
                deleteButton.disabled = false;
            } else {
                deleteButton.disabled = true;
            }
            deleteButton.addEventListener("click", () => (deleteCatch(catchDiv.id)))
 
            catchDiv.appendChild(anglerLabel);
            catchDiv.appendChild(anglerInput);
            catchDiv.appendChild(hrOne);
            catchDiv.appendChild(weightLabel);
            catchDiv.appendChild(weightInput);
            catchDiv.appendChild(hrWtwo);
            catchDiv.appendChild(speciesLabel);
            catchDiv.appendChild(speciesInput);
            catchDiv.appendChild(hrThree);
            catchDiv.appendChild(locationLabel);
            catchDiv.appendChild(locationInput);
            catchDiv.appendChild(hrFour);
            catchDiv.appendChild(baitLabel);
            catchDiv.appendChild(baitInput);
            catchDiv.appendChild(hrFuck);
            catchDiv.appendChild(captureTimeLabel);
            catchDiv.appendChild(captureTimeInput)
 
 
            catchDiv.appendChild(updateButton);
            catchDiv.appendChild(deleteButton);
            allCatchesDiv.appendChild(catchDiv);
        });
 
    }
 
    //finish this shit
 
    function updateCatch(id, catchDiv) {
        //the fast and ugly way to get the values
        let values = [];
        let inputs = Array.from(catchDiv.querySelectorAll("input"))
        inputs.forEach(i => {
            values.push(i.value);
        })
 
        console.log(values);
        //now fight with that white space again
        let captureTime = "captureTime "
        let updatedObj = {
            angler: values[0],
            weight: values[1],
            species: values[2],
            location: values[3],
            bait: values[4]
        }
        updatedObj[captureTime] = values[5];
 
        console.log(id)
        let myHeaders = new Headers();
        myHeaders.append("X-Authorization", loggedIn);
        myHeaders.append("Content-Type", "application/json");
 
        let raw = JSON.stringify(updatedObj);
 
        let requestOptions = {
            method: 'PUT',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };
 
        fetch(`http://localhost:3030/data/catches/${id}`, requestOptions)
            .then(response => response.json())
            .then(result => getAllCatches())
            .catch(error => console.log('error', error));
 
    }
 
    function deleteCatch(id) {
        let myHeaders = new Headers();
        myHeaders.append("X-Authorization", loggedIn);
 
        var requestOptions = {
            method: 'DELETE',
            headers: myHeaders,
            redirect: 'follow'
        };
 
        fetch(`http://localhost:3030/data/catches/${id}`, requestOptions)
            .then(response => response.json())
            .then(result => getAllCatches())
            .catch(error => console.log('error', error));
    }
 
    getAllCatches();
}
 
attachEvents();