import React, { Component } from "react";
import Navbar from "./components/navbar";
import Income from "./components/income";
import Expenses from "./components/expenses";
import Target from "./components/target";
import Summary from "./components/summary";

import failureLogo from "./img/failure.png";
import successLogo from "./img/success.png";

class App extends Component {
  state = {
    // User input
    income: 12000,
    // Expenses
    foodExpenses: 50,
    transportationExpenses: 50,
    houseExpenses: 50,
    leisureExpenses: 50,
    beautyExpenses: 50,
    // Targets
    currentAge: 18,
    targetAge: 50,
    currentNet: 5000,
    targetNet: 1000000,
    // Post-calculation values
    isTargetMet: undefined
  };
  // Fetch the user input for the yearly income and set the state
  handleIncomeInput = event => {
    console.log("fetchIncomeInput()");
    this.setState({ income: event.target.value });
  };
  /* Fetch & handle the values of the EXPENSES */
  // Fetch the value of expenses dynamically upon change
  handleExpensesInput = event => {
    console.log("handleExpenseInput()");
    console.log(event.target.value);
    if (event.target.id === "foodExpenses") {
      this.setState({ foodExpenses: event.target.value });
    }
    if (event.target.id === "transportationExpenses") {
      this.setState({ transportationExpenses: event.target.value });
    }
    if (event.target.id === "houseExpenses") {
      this.setState({ houseExpenses: event.target.value });
    }
    if (event.target.id === "leisureExpenses") {
      this.setState({ leisureExpenses: event.target.value });
    }
    if (event.target.id === "beautyExpenses") {
      this.setState({ beautyExpenses: event.target.value });
    }
  };

  // Handler functions to update the UI with the new values of the various expenses
  handleFoodExpensesText = () => {
    return this.state.foodExpenses;
  };
  handleTransportationExpensesText = () => {
    return this.state.transportationExpenses;
  };
  handleHouseExpensesText = () => {
    return this.state.houseExpenses;
  };
  handleLeisureExpensesText = () => {
    return this.state.leisureExpenses;
  };
  handleBeautyExpensesText = () => {
    return this.state.beautyExpenses;
  };

  /* Fetch & handle the values of the TARGETS */
  // Fetch the value of targets dynamically upon change
  handleTargetInput = event => {
    console.log("handleTargetInput()");
    console.log(event.target.value);
    if (event.target.id === "currentAgeInput") {
      this.setState({ currentAge: event.target.value });
    }
    if (event.target.id === "targetAgeInput") {
      this.setState({ targetAge: event.target.value });
    }
    if (event.target.id === "currentNetInput") {
      this.setState({ currentNet: event.target.value });
    }
    if (event.target.id === "targetNetInput") {
      this.setState({ targetNet: event.target.value });
    }
  };

  // Handler functions to update the UI with the new values of the various targets
  handleTargetAgeText = () => {
    return this.state.targetAge;
  };
  handleTargetNetText = () => {
    return this.state.targetNet;
  };

  // All the expenses summed (YEARLY)
  calculateYearlyExpenses = () => {
    console.log("calculateYearlyExpenses()");
    let totalExpenses =
      (this.state.foodExpenses +
        this.state.transportationExpenses +
        this.state.houseExpenses +
        this.state.leisureExpenses +
        this.state.beautyExpenses) *
      12;
    console.log(totalExpenses);
    return totalExpenses;
  };

  // Calculate the real yearly income, Salary (IN) - Expenses (OUT)
  calculateYearlyOverallIncome = () => {
    console.log("calculateYearlyOverallIncome()");

    let overallIncome = this.state.income - this.calculateYearlyExpenses();
    return overallIncome;
  };

  // The money required to reach the target net worth, divided by the years left until target age
  calculateMinimumRequiredIncome = () => {
    console.log("calculateMinimumRequiredIncome()");
    let moneyToTarget = this.state.currentNet - this.state.targetNet;
    let yearsToTarget = this.state.targetAge - this.state.currentAge;
    // Return the yearly money necessary to reach the target
    return moneyToTarget / yearsToTarget;
  };

  // If the money made in a year is more than the minimum required to meet target, returns true
  checkTargetMet = () => {
    console.log("checkTargetMet()");
    // Yearly money IN > yearly target
    if (
      this.calculateYearlyOverallIncome() <
      this.calculateMinimumRequiredIncome()
    ) {
      console.log("Target missed");
      this.setState({ isTargetMet: false });

      return false;
      // Yearly target > yearly money IN
    } else if (
      this.calculateYearlyOverallIncome() >=
      this.calculateMinimumRequiredIncome()
    ) {
      console.log("Target met");
      this.setState({ isTargetMet: true });
      return true;
    }
  };

  calculateNetByTargetAge = () => {
    let yearsToTarget = this.state.targetAge - this.state.currentAge;
    return this.calculateYearlyOverallIncome() * yearsToTarget;
  };

  renderSummary = () => {
    // Render the summary div based on the TARGET NOT being MET
    if (!this.state.isTargetMet && this.state.isTargetMet !== undefined) {
      return (
        <React.Fragment>
          <img src={failureLogo} alt="failure logo" className="resultImage" />
          {/* Fail or success paragraph */}
          <p>
            In your current situation, it will not be possible to reach your
            target net worth by your target age.
          </p>
          {/* Net worth by target age */}
          <p>
            However, by your target age you will be worth
            <strong> {this.calculateNetByTargetAge()}</strong>.
          </p>
          {/* Years to reach target net worth */}
          <p>
            To earn £1.320.140 it would take you <strong>52</strong> years,
            which means you will be
            <strong> 75</strong>.
          </p>
          {/* Total of expenses */}
          <p>
            Every month, the total of your expenses is <strong>£2324</strong>.
          </p>
          <small className="text-muted">
            Try playing around with the expenses to see how can they effect your
            future net worth.
          </small>
        </React.Fragment>
      );
    }
    // Render the summary div based on the TARGET being MET
    if (this.state.isTargetMet) {
      return (
        <React.Fragment>
          <img src={successLogo} alt="success logo" className="resultImage" />
          <p>
            In your current situation, you will be able to reach your target net
            worth by your target age!
          </p>
          <p>
            By then, you will be worth
            <strong>{this.calculateNetByTargetAge()}</strong>.
          </p>
          <p>
            To earn £1.320.140 it would take you <strong>52</strong> years,
            which means you will be
            <strong> 75</strong>.
          </p>
          <p>
            Every month, the total of your expenses is <strong>£2324</strong>.
          </p>
          <small className="text-muted">
            Try playing around with the expenses to see how can they effect your
            future net worth.
          </small>
        </React.Fragment>
      );
    }
  };

  render() {
    return (
      <div className="App">
        <Navbar />
        <Expenses
          handleExpensesInput={this.handleExpensesInput}
          handleFoodExpensesText={this.handleFoodExpensesText}
          handleTransportationExpensesText={
            this.handleTransportationExpensesText
          }
          handleHouseExpensesText={this.handleHouseExpensesText}
          handleLeisureExpensesText={this.handleLeisureExpensesText}
          handleBeautyExpensesText={this.handleBeautyExpensesText}
        />
        <Income
          handleIncomeInput={this.handleIncomeInput}
          checkTargetMet={this.checkTargetMet}
        />
        <Summary renderSummary={this.renderSummary} />
        <Target
          handleTargetInput={this.handleTargetInput}
          handleTargetAgeText={this.handleTargetAgeText}
          handleTargetNetText={this.handleTargetNetText}
        />
      </div>
    );
  }
}

export default App;