"use strict";

let belongings = {};

let ownedUpgrades = [];

let resources = {
  "food": 0
};

let updateRate = 60;

function calculateProductivity() {
  let productivity = 0;
  for (const [key, value] of Object.entries(belongings)) {
      productivity += productivityOf(key);
  }
  return productivity;
}

// here's where upgrades will go :3

function productivityOf(type) {
  let baseProd = buildings[type].prod;

  return baseProd * belongings[type].count;
}

function costOf(type) {
  let baseCost =  buildings[type].cost

  let countCost = baseCost * Math.pow(1.15, belongings[type].count);

  return Math.round(countCost);
}

function buyBuilding(type) {
  let cost = costOf(type);

  if (resources.food > cost) {
    belongings[type].count += 1;
    resources.food -= cost;
  }

}
// update stuff

function updateResources() {
  addResources();
  displayResources();
  displayBuildings();

  setTimeout(updateResources, 1000/updateRate);
}

function addResources() {
  resources.food += calculateProductivity() * 1 / updateRate;
}

function displayResources() {
  document.getElementById("resource-food").innerText = "Food: " + render(resources.food);
}

function displayBuildings() {
  for (const [key, value] of Object.entries(belongings)) {
    document.querySelector("#building-" + key + " > .building-button-name").innerText = value.count + " " + buildings[key].name + (value.count == 1 ? "" : "s");
    document.querySelector("#building-" + key + " > .building-button-cost").innerText = costOf(key) + " food";
  }
}

function eatMicro() {
  resources.food += 1;
}
// setup stuff lol

// we'll initialize the dict of buildings we can own

function setup() {
  initializeData();
  createButtons();
  registerListeners();

  console.log(belongings)
}

function initializeData() {
  for (const [key, value] of Object.entries(buildings)) {
    belongings[key] = {};
    belongings[key].count = 0;
  }
}

function registerListeners() {
  document.querySelectorAll(".building-button").forEach(function(button) {
    let id = button.id.replace("building-", "");
    button.addEventListener("click", function() { buyBuilding(id); });
  });

  document.querySelector("#tasty-micro").addEventListener("click", eatMicro);
}

function createButtons() {
  createBuildings();
  createUpgrades();
}

function createBuildings() {
  let container = document.querySelector("#buildings-area");

  for (const [key, value] of Object.entries(buildings)) {
    let button = document.createElement("div");
    button.classList.add("building-button");
    button.id = "building-" + key;
    let buttonName = document.createElement("div");
    buttonName.classList.add("building-button-name");
    let buttonCost = document.createElement("div");
    buttonCost.classList.add("building-button-cost");

    button.appendChild(buttonName);
    button.appendChild(buttonCost);

    container.appendChild(button);
  }
}

function upgradeTooltip(id, event) {
  console.log(upgrades[id].desc);
  console.log(event.clientX, event.clientY);

  let tooltip = document.querySelector("#upgrade-tooltip");

  tooltip.style.setProperty("display", "block");

  let tooltipDesc = document.querySelector("#upgrade-tooltip-desc");

  tooltipDesc.innerText = upgrades[id].desc;

  let tooltipEffect = document.querySelector("#upgrade-tooltip-effect");

  tooltipEffect.innerText = upgrade_types[upgrades[id].effect.type].desc(buildings[upgrades[id].effect.target].name);
  let yOffset = tooltip.parentElement.getBoundingClientRect().y;

  let yTrans = Math.round(event.clientY - yOffset);
  tooltip.style.setProperty("transform", "translate(-220px, " + yTrans + "px)");
}

function upgradeTooltipRemove() {
  let tooltip = document.querySelector("#upgrade-tooltip");

  tooltip.style.setProperty("display", "none");

}

function createUpgrades() {
  let container = document.querySelector("#upgrades-list");

  for (const [key, value] of Object.entries(upgrades)) {
    let button = document.createElement("div");
    button.classList.add("upgrade-button");
    button.id = "building-" + key;
    let buttonName = document.createElement("div");
    buttonName.classList.add("upgrade-button-name");
    buttonName.innerText = value.name;
    button.appendChild(buttonName);

    button.addEventListener("mousemove", function(e) { upgradeTooltip(key, event); });
    button.addEventListener("mouseleave", function() { upgradeTooltipRemove(); });

    container.appendChild(button);
  }
}

window.onload = function() {
  setup();

  setTimeout(updateResources, 1000/updateRate);
}