// This external js file is used in Unit 4 as the reference script
// code in this file has been copied or slightly modified
// code taken and modified from https://codepen.io/WebDevSimplified/pen/pmMOEy
// author is Web Dev Simplified

const appreciation = document.getElementById('appreciation'); //Here we have user inputs being assigned to variables
const closingCosts = document.getElementById('closingCost');
const marketValue = document.getElementById('marketValue');
const cashFlow = document.getElementById('cashflow');
const tax = document.getElementById('tax');
const insurance = document.getElementById('insurance');
const repairsUtilities = document.getElementById('repairsUtilities');
const form = document.getElementById('form'); //this in particular is used as an object to use Event Listener function

form.addEventListener('submit' , e => { //this is a special function that passes different variables and functions within
//alert(marketValue.value);

let messages = []; // the author used a list so it makes notifying each error easier to display

if(marketValue.value === '' || marketValue.value == null) { // here are the conditions depending on user inputs
alert("this worked 1")
messages.push('Market Value needs to be filled')

}

if(closingCosts.value === '' || closingCosts.value == null) {
alert("this worked 2")
messages.push('Closing Costs are missing')

}

if(marketValue.value === '' || marketValue.value == null) {
alert("this worked 3")
messages.push('Appreciation is missing') // different comments are appeneded to 'messages'

}

if(messages.length > 0) { //lastly if there are any messages the the following statement will occur
alert(messages.join(' , ')) // an alert is sent to notify the user of missing boxes
e.preventDefault() // and the submit event is dismissed.

}

});

/*
Improvements to Code:
- Personally, I would add different conditions other than blank.
- Also an alert box is sometimes blocked by the brower so it would be best
to use .innerText function to display the error within the form.

- pros: it is a simple solution and very neat
- I like the idea of using an array and appending/pushing the messages to the array
*/

form.addEventListener('submit', () => {

event.preventDefault();

let property = {
appreciation: parseFloat(document.getElementById('appreciation').value)/100,
closingCosts: parseFloat(document.getElementById('closingCost').value)/100,
marketValue: parseFloat(document.getElementById('marketValue').value),
cashflow: parseFloat(document.getElementById('cashflow').value),
tax: parseFloat(document.getElementById('tax').value),
insurance: parseFloat(document.getElementById('insurance').value),
repairsUtilities: parseFloat(document.getElementById('repairsUtilities').value),

capitalGain: function(){
var capitalGainTotal = (this.marketValue*(1+this.appreciation)**5-(this.marketValue*this.closingCosts));
document.getElementById("capitalGain").innerHTML = Math.round((capitalGainTotal));
},

profit: function(){
var profitTotal = (this.cashflow - this.tax - this.insurance - this.repairsUtilities);
document.getElementById("Value").innerHTML = (profitTotal);
}

};

property.capitalGain();
property.profit();


});