var employmentLocation = new Set(),
    empListing = [],
    employmentInfo = [],
    employmentAPI = new XMLHttpRequest();

employmentAPI.open('GET', '/api/v1/corporation_employment/?format=json&api_key=' + window.api_key, true);
employmentAPI.send();
employmentAPI.onload = function() {
    var employmentData = JSON.parse(this.response);
    var employmentListing = employmentData.objects;

    employmentListing.forEach(function(listing) {
        employmentLocation.add(listing.location);
        employmentInfo.push(listing);
    });

    var empPos = new XMLHttpRequest();
    empPos.open('GET', '/api/v3/employment/list_positions/?format=json&api_key=' + window.api_key, true); empPos.send();
    empPos.onload = function() {
        var data = JSON.parse(this.response);
        data.forEach(function(item) {
            empListing.push(item);
        });

        createRegions();
        addRegionEventListeners();
        addCardObservers();
        setCsrf();
        postMessage();
    }
};

function createRegions() {
    var regionHTML = '<div class="region-list-container">\n';
    var employmentRegionContainer = {};
    var employmentTemplates = {};

    employmentLocation.forEach(function(region) {
        regionHTML += '<button class="region-button button-style-1 header-text-style-4">'+ region + '</button>';
        employmentRegionContainer[region] = '<div class="career-item '+ region +'" itemscope itemtype="https://schema.org/JobPosting">\n';
    });

    employmentLocation.forEach(function(region) {
        employmentInfo.forEach(function(info, i) {
            if(info.location == region) {
                employmentRegionContainer[region] = employmentRegionContainer[region] + '<div class="job-posting-container" data-community='+ info.id + ' data-employment='+empListing[i].id+' itemscope itemtype="https://schema.org/JobPosting">\n'+
                    '<h2 class="card-button" role="button">'+ info.name + (info.state ?  ' - <span itemprop="jobLocation">'+ info.state +'</span>' : '') + '</h2>\n'+
                    '<div class="inner-card-section hide">\n' +
                    '<div class="inner-info-container">\n' +
                    '<div class="info-header-description">\n' +
                    '<div class="info-header">\n' +
                    '<div class="inner-info">\n' +
                    '<p class="secondary-info" itemprop="title"><b>'+ info.name +'</b></p>\n' +
                    '</div>\n'+
                    '<div class="inner-info">\n' +
                    '<p class="secondary-info" itemprop="title"><b>'+ info.location + ', ' + info.region+'</b></p>\n'+
                    '</div>\n' +
                    '</div>\n' +
                    // might need an aria-label for this quasi-link
                    '<p class="back-to-listing" id="back_to_listing">Back To Listings<img src="/gridmedia/img/careers/back.svg" alt="back arrow"></p>' +
                    '</div>\n' +
                    '<div class="info-body-container">\n' +
                    '<div class="info-body-description">\n' +
                    '<div class="inner-info">\n' +
                    '<p class="secondary-info" itemprop="responsibilities">'+ info.description + '</p>\n'+
                    '</div>\n' +
                    '<div class="inner-info">\n' +
                    '<p class="header-text-style-5 secondary-info"><b>REQUIREMENTS:</b></p>\n'+
                    '<p class="secondary-info" itemprop="qualifications skills">'+ info.requirements + '</p>\n'+
                    (info.application ? '<p class="secondary-info" itemprop="pdf download"> Download Application <a class="button-style-1-petite" filetype="pdf" href='+ info.application + ' download>Download PDF</a></p>\n' : "")+
                    '</div>\n' +
                    '</div>\n' +
                    
                    '<div class="legacy-form">\n' +
                    '<p class="header-text-style-5 form-header"><b>APPLY FOR THIS POSITION</b></p>' +
                    '<p class="steps">STEP 1:</p>\n' +
                    '<a href="/gridmedia/img/pdf/application.pdf" target="_blank" class="button-style-1">Open Application</a>\n' +
                    '<p class="steps">STEP 2: Complete Application</p>\n' +
                    '<p class="steps">STEP 3: Save completed application to your desktop</p>\n' +
                    '<p class="steps">STEP 4: Upload completed application using the form below</p>\n' +
                    document.getElementById('crispy_form').innerHTML +
                    '</div>\n' +
                    '</div>\n' +
                    '</div>\n' +
                    '</div>\n' +
                    '</div>\n';
            }
        });
    });

    var careersContainer = document.getElementById('careers_container');
    for( var i in employmentRegionContainer ) {
        careersContainer.innerHTML += employmentRegionContainer[i];
    }

    regionHTML += '</div>';
    var regionsContainer = document.getElementById('regions_container');
    regionsContainer.innerHTML += regionHTML;
    
    let jobContainers = Array.prototype.slice.call(document.getElementsByClassName("job-posting-container"));
    let communityInputs = Array.prototype.slice.call(document.getElementsByName("community"))
    let positionInputs = Array.prototype.slice.call(document.getElementsByName("position"))
    jobContainers.forEach(function(container, i) {
        communityInputs[i].value = container.getAttribute('data-community');
        positionInputs[i].value = container.getAttribute('data-employment')
    });
}

function empPos() {
    var empPos = new XMLHttpRequest();
    empPos.open('GET', '/api/v3/employment/list_positions/?format=json&api_key=' + window.api_key, true);
    empPos.send();
    empPos.onload = function() {
        var data = JSON.parse(this.response);
        data.forEach(function(item) {
            empListing.push(item);
        });
    }
}

function postMessage() {
    var careersContainer = document.getElementById('job_container');
    var form = Array.from(document.getElementsByClassName("djenga_form"));

    form.forEach(form => {
        let thisForm = form.getElementsByTagName("form")[0];

        var postData = new XMLHttpRequest();
        thisForm.addEventListener("submit", function(e) {
            e.preventDefault();
            
            console.log(thisForm);

            postData.open("POST", '/api/v2/employment_submission/');
            postData.send(new FormData(thisForm));
            careersContainer.innerHTML = "<svg class='checkmark' xmlns='https://www.w3.org/2000/svg' viewBox='0 0 52 52'><circle class='checkmark__circle' cx='26' cy='26' r='25' fill='none'/><path class='checkmark__check' fill='none' d='M14.1 27.2l7.1 7.2 16.7-16.8'/></svg><h1 class='submission-text'>Application has been submitted</h1>";
        });
    })

}

function setCsrf() {
    var employmentAPI = new XMLHttpRequest();
    employmentAPI.open('GET','/api/v2/employment_submission/', true);
    employmentAPI.send();
    employmentAPI.onload = function() {
        var csrfInputs = Array.prototype.slice.call(document.getElementsByName('csrfmiddlewaretoken'));
        var response = this.responseText;
        csrfInputs.forEach(function(input) {
            input.value = response.trim();
        });
    }
}

// Region Button clicks
function addRegionEventListeners() {
    document.getElementsByClassName('career-item')[0].classList.add('active-listing');
    var regionButtons = Array.prototype.slice.call(document.getElementsByClassName('region-button'));
    regionButtons[0].classList.add('active-button');
    regionButtons[0].click();
    regionButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            for(var i = 0; i < regionButtons.length; i++) {
                regionButtons[i].classList.remove('active-button');
            }
            this.classList.add('active-button');
            Array.prototype.slice.call(document.getElementsByClassName('career-item')).forEach(function(item) {
                item.classList.remove('active-listing');
            });
            document.getElementsByClassName(this.innerHTML)[0].classList.add('active-listing');
        });
    });
};

// Card clicks & back button
function addCardObservers() {
    var cardButton = Array.prototype.slice.call(document.getElementsByClassName("card-button"));
    var backButton = Array.prototype.slice.call(document.getElementsByClassName("back-to-listing"))
    var page = document.getElementById("careers_front_page");
    var jobsSection = document.getElementById("job_positions");
    var innerCards = document.getElementsByClassName("inner-card-section");
    
    cardButton.forEach(function(button, i) {
        button.addEventListener("click", function() {
            innerCards[i].classList.remove("hide");
            innerCards[i].classList.add("open-card");
            page.classList.add("hide");
            jobsSection.classList.add("set-height");
        });
    });
    
    backButton.forEach(function(backBtn, i) {
       backBtn.addEventListener("click", function() {
          page.classList.remove("hide");
           jobsSection.classList.remove("set-height");
           innerCards[i].classList.add("hide");
       });
    });
};