// Denna fil ska innehålla er lösning till projektuppgiften.
"use strict";

// VARIABLER
var searchbuttonEl = document.getElementById("searchbutton"); // Sök knapp
var searchEl = document.getElementById("search"); // Sökruta
var selectEl = document.getElementById("searchlan"); // Select dropdown för län

var listEl = document.getElementById("mainnavlist"); // UL-lista med län till vä
var checkboxEl = document.getElementById("onlyit"); //Checkbox för Data/IT

var numrowsEl = document.getElementById("numrows"); // ruta för hur många annonser som ska synas
var logoEl = document.getElementById("logo"); //Loggan på sidan

var infoEl2 = document.getElementById("info"); // info/flöde



// HÄNDELSEHANTERARE


//När sidan laddas
window.addEventListener("load", windowOnload, false);

// klicka på län i vänstermenyn
listEl.addEventListener("click", selectlan, false);

// klicka på län i select-listan
selectEl.addEventListener("change", select, false);

//Checkbox för Data/IT checkad
checkboxEl.addEventListener("click", checkedBox, false);

// Till startsidan vid klick på logo
logoEl.addEventListener('click', loadFront, false);

/*Sökknapp ska söka vid klick
searchbuttonEl.addEventListener('click', search , false);

// Ändra antal artiklar som ska visas
numrowsEl.addEventListener('change', changeNumrows , false);
*/



//FUNKTIONER





// fuktion när sidan laddas
function windowOnload() {
    selectlist();
    infoEl2.innerHTML = "<br /><br /><h2>Välkommen!</h2>" +
        "<p>Klicka på ett län i listan till vänster eller använd sökfunktionen för att se vilka lediga jobb som finns!</p>";
}

// Logo/Huvudrubrik ska leda till startsidan vid klick
function loadFront() {
    window.location.href = "../af.htm";

}


// Funktion till att få fram län + jobb till vä
function selectlist() {
    //Variabel för att hämta över http
    var xhttp = new XMLHttpRequest();

    //Funktion för att skriva ut till en JSON sträng
    xhttp.onload = function () {

        //Om allt är OK!
        if (this.readyState == 4 && this.status == 200) {


            // Konvertera JSON-sträng
            var jsonStr = JSON.parse(xhttp.responseText);
            var lanLi = jsonStr.soklista.sokdata;

            // Skriv ut information till dokument
            for (var i = 0; i < lanLi.length; i++) {

                // Variabel för att göra li element
                var list = document.createElement("li");

                // Variabel för att skapa en textnode
                var lanLiText = document.createTextNode(lanLi[i].namn + " (" + lanLi[i].antal_ledigajobb + ")");

                // knyter ihop li-elementet med textnoden
                list.appendChild(lanLiText);

                // knyter ihop ul-elementet i HTML-koden med li och textnoden
                listEl.appendChild(list);

                //Sätter id på alla län
                list.setAttribute("id", lanLi[i].id);




                //SELECTMENYN

                //Variabel för att göra optionelement
                var select = document.createElement("option");

                //Sätter id på alla option element
                select.setAttribute("value", lanLi[i].id);

                //Variabel för att skapa en textnode av namn på län
                var selectNode = document.createTextNode(lanLi[i].namn);

                //Knyter ihop option med textnoden
                select.appendChild(selectNode);

                //Knyter ihop dropdown med option och textnoden
                selectEl.appendChild(select);


            }

        }
    }

    xhttp.open("GET", "http://api.arbetsformedlingen.se/af/v0/platsannonser/soklista/lan", true);
    xhttp.send();

};


// INFO om jobb visas till HÖGER
function selectlan(e) {
    // väljer ut value/värdet på det element du klickar på
    var lanId = e.target.id;
    var max = numrowsEl.value;


    //Variabel för att hämta över http
    var xhttp2 = new XMLHttpRequest();

    //Funktion för att skriva ut till en JSON sträng
    xhttp2.onload = function () {

        //Om allt är OK!
        if (this.readyState == 4 && this.status == 200) {

            //Variabel för att konvertera JSON-sträng
            var jsonStr2 = JSON.parse(xhttp2.response);
            var articleS = jsonStr2.matchningslista.matchningdata;

            // tomt info-element
            infoEl2.innerHTML = "";

            //Loopa igenom lista
            for (var i = 0; i < articleS.length; i++) {

                //Skriv ut article-element
                infoEl2.innerHTML +=
                    "<article> <h3>" + articleS[i].annonsrubrik
                    + "</h3>" + "<br>" + "<h4>" + articleS[i].yrkesbenamning + " i " + articleS[i].kommunnamn
                    + "</h4> <p> <strong>Anställningstyp: </strong>" + articleS[i].anstallningstyp
                    + "<br> <strong>Antalplatser: </strong>" + articleS[i].antalplatser
                    + "<br> <strong>Publiceringsdatum: </strong>" + articleS[i].publiceraddatum
                    + "<br> <strong>Sista ansökningsdag: </strong>" + articleS[i].sista_ansokningsdag
                    + "<br> </p> <p>" + "<a href='" + articleS[i].annonsurl
                    + "' target='_blank'>Läs mer</a>" + "</p> </article>"

            }

        }
    }

    xhttp2.open("GET", "http://api.arbetsformedlingen.se/af/v0/platsannonser/matchning?lanid=" + lanId + "&&antalrader=" + max, true);
    xhttp2.send();
};




// visas vid val av län i selectmeny
function select(e) {
    // väljer ut value på det element du klickar
    var select = e.target.value;
    var max = numrowsEl.value;

    //Hämta HTTP
    var xhttp2 = new XMLHttpRequest();
    xhttp2.onreadystatechange = function () {

        if (this.readyState === 4 && this.status === 200) {
            var jsonStr = JSON.parse(xhttp2.response);


            var document = jsonStr.matchningslista;
            var info = document.matchningdata;

            // tomt info-element
            infoEl2.innerHTML = "";

            for (var i = 0; i < info.length; i++) {


                infoEl2.innerHTML += "<article><h3>" + info[i].annonsrubrik + "</h3>" +
                    "<p><strong>Yrkesbenämning: </strong>" + info[i].yrkesbenamning + "<br />" +
                    "<strong>Arbetsplats: </strong>" + info[i].arbetsplatsnamn + "<br />" +
                    "<strong>Kommun: </strong>" + info[i].kommunnamn + "<br /> " +
                    "<strong>Antal platser: </strong>" + info[i].antalplatser + "<br />" +
                    "<strong>Anställningstyp: </strong>" + info[i].anstallningstyp + "<br />" +
                    "<strong>Sista ansökningsdag: </strong>" + info[i].sista_ansokningsdag + "<br />" +
                    "<a href ='" + info[i].annonsurl + "' target='_blank'>Läs mer</a>" +
                    "</p></article>";

            }
        }
    };


    xhttp2.open('GET', "http://api.arbetsformedlingen.se/af/v0/platsannonser/matchning?lanid=" + select, true);
    xhttp2.send();
}

function checkedBox() {

    if (checkboxEl.checked === true){

    } else if (checkboxEl.checked === false) {
        select();
    }
}