text: const Modal = {
    openModal() {
      document
        .querySelector(".modal-overlay")
        .classList
        .add("active")
    },
  
    closeModal() {
      document
        .querySelector(".modal-overlay")
        .classList.remove("active")
    }
  }
  
  const Storage = {
    get() {
      return JSON.parse(localStorage.getItem("gomesFinances:transactions")) || []
    },
  
    set(transactions) {
      localStorage.setItem("gomesFinances:transactions", JSON.stringify(transactions))
    }
  }
  
  const Transaction = {
    all: Storage.get(),
  
    add(transaction) {
      Transaction.all.push(transaction)
  
      App.reload()
    },
  
    remove(index) {
      Transaction.all.splice(index, 1)
  
      App.reload()
    },
  
    incomes() {
      let income = 0;
      Transaction.all.forEach(transaction => {
        if (transaction.amount > 0) {
          income += transaction.amount;
        }
      })
      return income
    },
  
    expenses() {
      let expense = 0;
      Transaction.all.forEach(transaction => {
        if (transaction.amount < 0) {
          expense += transaction.amount;
        }
      })
      return expense
    },
  
    total() {
      return Transaction.incomes() + Transaction.expenses()
    }
  
  }
  
  const DOM = {
    transactionsContainer: document.querySelector("#data-table tbody"),
  
    addTransaction(transaction, index) {
      const tr = document.createElement('tr')
      tr.innerHTML = DOM.innerHTMLTransaction(transaction, index)
      tr.dataset.index = index
  
      DOM.transactionsContainer.appendChild(tr)
    },
  
    innerHTMLTransaction(transaction, index) {
      const CSSclass = transaction.amount > 0 ? "income" : "expense";
  
      const amount = Utils.formatCurrency(transaction.amount)
  
      const html = `
        <td class="description">${transaction.description}</td>
        <td class="type">${transaction.type}</td>
        <td class="${CSSclass}">${amount}</td>
        <td class="date">${transaction.date}</td>
        <td class="icon">
          <img onclick="Transaction.remove(${index})" src="./assets/minus.svg" alt="remove transaction">
        </td>
      `
  
      return html
    },
  
    updateBalance() {
      document
        .getElementById('incomeDisplay')
        .innerHTML = Utils.formatCurrency(Transaction.incomes())
  
      document
        .getElementById('expenseDisplay')
        .innerHTML = Utils.formatCurrency(Transaction.expenses())
  
      document
        .getElementById('totalDisplay')
        .innerHTML = Utils.formatCurrency(Transaction.total())
    },
  
    clearTransactions() {
      DOM.transactionsContainer.innerHTML = ""
    }
  }
  
  const Utils = {
    formatAmount(value) {
      value = Number(value) * 100
  
      return Math.round(value)
    },
  
    formatDate(date) {
      const splittedDate = date.split("-")
      return `${splittedDate[2]}/${splittedDate[1]}/${splittedDate[0]}`
    },
  
    formatCurrency(value) {
      const signal = Number(value) < 0 ? "-" : ""
  
      value = String(value).replace(/\D/g, "")
  
      value = Number(value) / 100
  
      value = value.toLocaleString("en-CA", {
        style: "currency",
        currency: "CAD"
      })
  
      return signal + value
    }
  }
  
  const Form = {
    description: document.querySelector("input#description"),
    type: document.querySelector("input#type"),
    amount: document.querySelector("input#amount"),
    date: document.querySelector("input#date"),
  
    getValues() {
      return {
        description: Form.description.value,
        type: Form.type.value,
        amount: Form.amount.value,
        date: Form.date.value
      }
    },
  
    validateFields() {
      const { description, amount, date } = Form.getValues()
  
      if (description.trim() === "" ||
        amount.trim() === "" ||
        date.trim() === "") {
        throw new Error("Please fill everything!!!")
      }
    },
  
    formatValues() {
      let { description, type, amount, date } = Form.getValues()
      amount = Utils.formatAmount(amount)
      date = Utils.formatDate(date)
  
      return {
        description,
        type,
        amount,
        date
      }
    },
  
    clearFields() {
      Form.description.value = ""
      Form.type.value = ""
      Form.amount.value = ""
      Form.date.value = ""
    },
  
    submit(event) {
      event.preventDefault()
  
      try {
        Form.validateFields()
        const transaction = Form.formatValues()
        Transaction.add(transaction)
        Form.clearFields()
        Modal.closeModal()
  
      } catch (error) {
        alert(error.message)
      }
    }
  }
  
  const App = {
    init() {
      Transaction.all.forEach(DOM.addTransaction)
  
      DOM.updateBalance()
  
      Storage.set(Transaction.all)
    },
  
    reload() {
      DOM.clearTransactions()
      App.init()
    }
  }
  
  App.init()
  
  
  
  