document.addEventListener("DOMContentLoaded", function () {
  var healthForm = document.getElementById("healthForm");
  var submitBtn = document.getElementById("submitBtn");
  var questionContainer = document.getElementById("questionContainer");
  var resultBmr = document.getElementById("result");
  var calValue = document.getElementById("cal-value");
  var calValueText = document.createElement("h1");
  // var part2Result = document.getElementById("part2result");
  var resultContainer = document.getElementById("result-container");
  var caloriesRecord = document.createElement("div");
  var goalChoice = document.getElementsByName("goal_weight");
  var formTitle = document.getElementById("form-title");
  var barChartContainer = document.getElementById("container");

  //input value

  //var dailyCalorie = document.getElementsByClassName("part3");

  //calculate bmr
  function bmrFunction() {
    var age = document.getElementById("ageInput").value;
    var gender = document.getElementById("genderInput").value;
    var height = document.getElementById("heightInput").value;
    var weight = document.getElementById("weightInput").value;
    var activityLevel = document.getElementById("activityLevelInput").value;

    var genderMultiplier = 0;
    if (gender === "male") {
      genderMultiplier = 1;
    }

    var activityLevelMultiplier = 0;
    if (activityLevel === "sedentary") {
      activityLevelMultiplier = 1.2;
    } else if (activityLevel === "lightlyActive") {
      activityLevelMultiplier = 1.375;
    } else if (activityLevel === "moderatelyActive") {
      activityLevelMultiplier = 1.55;
    } else if (activityLevel === "veryActive") {
      activityLevelMultiplier = 1.72;
    } else if (activityLevel === "superActive") {
      activityLevelMultiplier = 1.9;
    }

    const result =
      9.99 * weight +
      6.25 * height -
      4.92 * age +
      (166 * genderMultiplier - 161);

    const bmrresult = result * activityLevelMultiplier;
    return bmrresult;
  }

  //submit bmr form and click function
  healthForm.addEventListener("submit", function (event) {
    event.preventDefault();
    var name = document.getElementById("nameInput").value;
    var resultBmr = document.getElementById("result");
    var age = document.getElementById("ageInput").value;
    var gender = document.getElementById("genderInput").value;
    var height = document.getElementById("heightInput").value;
    var weight = document.getElementById("weightInput").value;
    var activityLevel = document.getElementById("activityLevelInput").value;

    resultBmr.innerHTML = ""; // 清空结果元素的内容
    formTitle.innerHTML = "";

    var resultText = document.createElement("h3");
    resultText.innerHTML = `<p>Hello! ${name}.</p> 
      <p>Your daily calorie intake: </p>
      <div id="intake-contain"></div>
      <button id="edit">Edit & Calculate again</button>
      
      <div class="threeBtn">
      <form>
      <p>Which goal would you like to achieve?</p>
    <input type="radio" id="maintain" name="goal_weight" value="maintain-weight">
    <label for="html">Maintain Weight (+- 0cal)</label><br>
     <input type="radio" id="loss" name="goal_weight" value="loss-weight">
     <label for="css">Loss Weight (- 300cals)</label><br>
      <input type="radio" id="gain" name="goal_weight" value="gain-weight">
    <label for="javascript">Gain Weight (+ 300cals)</label></form>
    </div>
      <div id="saveBtn-contain"></div>
      `;
    resultBmr.appendChild(resultText);
    healthForm.style.display = "none";

    const intakeContain = document.getElementById("intake-contain");
    const intakeNum = document.createElement("h2");
    intakeNum.innerText = `${Math.round(bmrFunction())}cal`;
    intakeContain.appendChild(intakeNum);

    localStorage.setItem("user", name);
    localStorage.setItem("userAge", age);
    localStorage.setItem("userGender", gender);
    localStorage.setItem("userHeight", height);
    localStorage.setItem("userWeight", weight);
    localStorage.setItem("userActivityLevel", activityLevel);
    localStorage.setItem("bmrResult", bmrFunction());

    // localStorage.getItem("user");
    // JSON.parse(localStorage.getItem("userAge"));
    // JSON.parse(localStorage.getItem("userGender"));
    // JSON.parse(localStorage.getItem("userHeight"));
    // JSON.parse(localStorage.getItem("userWeight"));
    // JSON.parse(localStorage.getItem("userActivityLevel"));
    // JSON.parse(localStorage.getItem("bmrResult"));

    function btn1() {
      //var maintainWeight = document.getElementById("maintain-weight");
      return (intakeNum.innerText = `${Math.round(bmrFunction())}cal`);
    }

    function btn2() {
      //var lossWeight = document.getElementById("loss-weight");
      return (intakeNum.innerText = `${Math.round(bmrFunction()) - 300}cal`);
    }

    function btn3() {
      //var gainWeight = document.getElementById("gain-weight");
      return (intakeNum.innerText = `${Math.round(bmrFunction()) + 300}cal`);
    }

    var editBtn = document.getElementById("edit");
    editBtn.addEventListener("click", function clickFn() {
      healthForm.style.display = "block";
      resultBmr.style.display = "none";
      resultText.innerHTML = "";
    });

    var maintainWeight = document.getElementById("maintain");
    maintainWeight.addEventListener("click", btn1);

    var lossWeight = document.getElementById("loss");
    lossWeight.addEventListener("click", btn2);

    var gainWeight = document.getElementById("gain");
    gainWeight.addEventListener("click", btn3);

    var goalvalue;

    for (var i = 0; i < goalChoice.length; i++) {
      goalChoice[i].addEventListener("click", function () {
        if (this.value === "maintain-weight") {
          goalvalue = Math.round(bmrFunction()) + 0;
        } else if (this.value === "loss-weight") {
          goalvalue = Math.round(bmrFunction()) - 300;
        } else if (this.value === "gain-weight") {
          goalvalue = Math.round(bmrFunction()) + 300;
        }
      });
    }

    var saveBtnContain = document.getElementById("saveBtn-contain");
    var saveBtn = document.createElement("button");
    saveBtn.innerText = "Save";
    saveBtn.id = "saveBtn";
    saveBtnContain.appendChild(saveBtn);
    saveBtn.addEventListener("click", function () {
      resultText.innerHTML = `<p>Your daily calorie intake: </p>
        <h2>${goalvalue}cals</h2>
        <button id="edittwo">Edit & Calculate again</button>
        `;
      calValueText.innerText = `${goalvalue}cal`;
      calValue.appendChild(calValueText);
    });

    var editBtnTwo = document.getElementById("edittwo");
    editBtnTwo.addEventListener("click", function clickFn() {
      healthForm.style.display = "block";
      calValue.style.display = "none";
      resultText.innerHTML = "";
    });
  });

  // Clear input fields
  //   document.getElementById("ageInput").value = "";
  //   document.getElementById("heightInput").value = "";
  //   document.getElementById("weightInput").value = "";

  //Hide form and show question

  questionContainer.style.display = "block";

  //  foodSubmitBtn.addEventListener("click", function () {
  //    var foodIntake = foodInput.value;

  //    // Clear input field
  //    foodInput.value = "";

  //    // Process food intake data
  //    console.log("Food Intake:", foodIntake);
  //  });

  // function addFoodCa(x, y) {
  //   var calBar = document.createElement("div");
  //   calBar.classList.add("calBar");
  //   calBar.innerHTML = `<div>${x}</div><div>${y}</div>`;
  //   caloriesRecord.appendChild(calBar);
  // }

  //calculate food calorie
  const calculateBtn = document.getElementById("calculate-btn");
  calculateBtn.addEventListener("click", fetchData);

  async function fetchData() {
    const foodWeightInput = document.getElementById("food-weight-input");
    const unitSelect = document.getElementById("unit-select");
    const foodNameInput = document.getElementById("food-name-input");

    const query = `${foodWeightInput.value}${unitSelect.value} ${foodNameInput.value}`;

    try {
      const res = await fetch(
        "https://api.api-ninjas.com/v1/nutrition?query=" + query,
        {
          headers: {
            "X-Api-Key": "HQR305Z28JdtTlSD7bzr2g==syWXu3chI7wcfy3N",
            "Content-Type": "application/json",
          },
        }
      );
      const data = await res.json();
      console.log(data);

      resultContainer.innerHTML = "";

      // Display the data in the result container
      var foodResultText = document.createElement("div");
      foodResultText.className = "foodresult";
      foodResultText.innerHTML = `
        <div>
          <h2>Results:</h2>
        </div>
        <div class="result-header">
          <div>Name:</div>
          <div>Brisket</div>
        </div>

        <div class="line result-row" id="serving_size">
          <div>Serving Size:</div>
          <div>${data[0].serving_size_g}g</div>
        </div>
        <div class="line result-row" id="foodname">
          <div>Name:</div>
          <div>${data[0].name}</div>
        </div>
        <div class="line result-row" id="serving_size">
          <div>Serving Size:</div>
          <div>${data[0].serving_size_g}g</div>
        </div>
        <div class="line result-row" id="calories">
          <div>Calories:</div>
          <div>${data[0].calories} cal</div>
        </div>
        <div class="line result-row">
          <div>Protein:</div>
          <div>${data[0].protein_g} g</div>
        </div>
        <div class="line result-row">
          <div>Fiber:</div>
          <div>${data[0].fiber_g} g</div>
        </div>
        <div class="line result-row">
          <div>Total Fat:</div>
          <div>${data[0].fat_total_g} g</div>
        </div>
        <div class="line result-row">
          <div>Saturated Fat:</div>
          <div>${data[0].fat_saturated_g} g</div>
        </div>
        <div class="line result-row">
          <div>Cholesterol:</div>
          <div>${data[0].cholesterol_mg} g</div>
        </div>
        <div class="line result-row">
          <div>Total Carbohydrates:</div>
          <div>${data[0].carbohydrates_total_g} g</div>
        </div>

        <div class="result-footer">
        <button type="button" class="foodbtn" id="recordbtn">
          Save in the intake list
        </button>
        </div.
      `;

      resultContainer.appendChild(foodResultText);

      foodWeightInput.value = "";

      foodNameInput.value = "";

      var part2Result = document.getElementById("part2Result");

      var recordbtn = document.getElementById("recordbtn");
      recordbtn.addEventListener("click", function clickFn() {
        //part2Result.style.backgroundColor = "#c7a5fa";
        foodResultText.style.display = "none";

        caloriesRecord.className = "calorierecord";
        caloriesRecord.innerHTML = `
          <button id="back">Back</button>
          <h3>Calories Tracking Record</h3>
          <div class="recorddate"></div><br>
          <div class="nameCal">
            <div>Name</div>
            <div>Calories</div>
          </div>
        `;
        foodIntakeRecording(data[0].name, data[0].calories);
        sumUp();
        //localStorage.setItem(`${new Date()}`, sumUp2());
        taketheLastData(getCurrentDateFromDate(new Date()), sumUp2());
        resultContainer.appendChild(caloriesRecord);

        //calValueText.innerText = `${goalvalue - sumUp2()}cal`;

        // var back = document.getElementById("back");
        // back.addEventListener("click", function clickFn() {
        //   foodResultText.style.display = "block";
        //   foodResultText.style.backgroundColor = "#5cf089";
        //   caloriesRecord.style.display = "none";
        // });
      });
    } catch (err) {
      console.log("ERR:", err);
    }
  }

  let allFoodRecord = [];

  function foodIntakeRecording(foodName, calories) {
    let food = {};
    food["Name"] = foodName;
    food["Calories"] = calories;
    allFoodRecord.push(food);
    localStorage.setItem("dataBag", JSON.stringify(allFoodRecord));
    genTable();
  }

  function sumUp() {
    const totalCalories = allFoodRecord.reduce(
      (accumulator, currentValue) => accumulator + currentValue.Calories,
      0
    );

    const totalCal = document.createElement("div");
    totalCal.className = "totalcal";
    totalCal.innerHTML = `<div>Total Calories: ${totalCalories}</div>`;
    caloriesRecord.appendChild(totalCal);
  }

  function sumUp2() {
    const totalCalories = allFoodRecord.reduce(
      (accumulator, currentValue) => accumulator + currentValue.Calories,
      0
    );

    return totalCalories;
  }

  function genTable() {
    //caloriesRecord.innerHTML = "";

    for (let i = 0; i < allFoodRecord.length; i++) {
      const foodItem = document.createElement("div");
      foodItem.className = "fooditem";
      foodItem.innerHTML = `
        <div>${allFoodRecord[i].Name}${allFoodRecord[i].Calories}</div>
      `;
      caloriesRecord.appendChild(foodItem);
    }
  }

  let wholeDayRecord = [];

  function taketheLastData(x, y) {
    let dailydata = {};
    dailydata["date"] = x;
    dailydata["totalCalories"] = y;
    wholeDayRecord.push(dailydata);
    localStorage.setItem(
      "dataBag",
      JSON.stringify(wholeDayRecord[wholeDayRecord.length - 1])
    );
    genBar();
  }

  function genBar() {
    for (let i = 0; i < wholeDayRecord.length; i++) {
      const barcontainer = document.createElement("div");
      barcontainer.className = "barcontainer";

      const barHeight = generateBarHeight(
        wholeDayRecord[wholeDayRecord.length - 1].totalCalories
      );

      barcontainer.innerHTML = `
        <div class="bar" style="height: ${barHeight}%"></div>
        <div class="day">${wholeDayRecord[wholeDayRecord.length - 1].date}</div>
        <div class="totalcalnum">${
          wholeDayRecord[wholeDayRecord.length - 1].totalCalories
        }</div>
      `;

      barChartContainer.appendChild(barcontainer);
    }
  }

  //date
  const dateContainer = document.getElementById("dateContainer");
  const prevButton = document.getElementById("prevButton");
  const nextButton = document.getElementById("nextButton");
  const currentDateElement = document.getElementById("currentDate");

  function generateBarHeight(totalCalories) {
    // 在这里根据总热量数据计算柱状图的高度百分比
    // 您可以根据实际需求来定义计算逻辑
    // 这里简单地将总热量数据除以一个固定值来获取百分比
    const maxHeight = 100; // 最大高度百分比
    const maxValue = 3000; // 最大的总热量值
    const barHeight = (totalCalories / maxValue) * maxHeight;
    console.log();
    return barHeight;
  }

  // 调用生成柱状图的函数
  genBar();

  // function generateBarHeight() {
  //   var max = 3500;
  //   var percentage = (sumUp2 / max) * 100;
  //   return percentage;
  // }

  // document.getElementById("bar1").style.height = generateBarHeight() + "%";
  // document.getElementById("bar2").style.height = generateBarHeight() + "%";
  // document.getElementById("bar3").style.height = generateBarHeight() + "%";
  // document.getElementById("bar4").style.height = generateBarHeight() + "%";
  // document.getElementById("bar5").style.height = generateBarHeight() + "%";
  // document.getElementById("bar6").style.height = generateBarHeight() + "%";
  // document.getElementById("bar7").style.height = generateBarHeight() + "%";

  // var currentDate = new Date();
  // document.getElementById("day1").innerHTML = currentDate.getDate() - 6;
  // document.getElementById("day2").innerHTML = currentDate.getDate() - 5;
  // document.getElementById("day3").innerHTML = currentDate.getDate() - 4;
  // document.getElementById("day4").innerHTML = currentDate.getDate() - 3;
  // document.getElementById("day5").innerHTML = currentDate.getDate() - 2;
  // document.getElementById("day6").innerHTML = currentDate.getDate() - 1;
  // document.getElementById("day7").innerHTML = currentDate.getDate();

  function getCurrentDateFromMounthandYear(date) {
    const year = date.getFullYear();
    const month = new Intl.DateTimeFormat("en-US", {
      month: "short",
    }).format(date);
    const day = String(date.getDate()).padStart(2, "0");
    return `${month}${year}`;
  }

  function getCurrentDateFromDate(date) {
    const year = date.getFullYear();
    const month = new Intl.DateTimeFormat("en-US", {
      month: "short",
    }).format(date);
    const day = String(date.getDate()).padStart(2, "0");
    return `${day}`;
  }

  function updateDate() {
    const currentDate = new Date();
    currentDateElement.textContent =
      getCurrentDateFromMounthandYear(currentDate);
    updateWeekChart(currentDate);
  }

  function goToPreviousDay() {
    const currentDate = new Date(currentDateElement.textContent);
    currentDate.setDate(currentDate.getDate() - 1);
    currentDateElement.textContent = getCurrentDateFromDate(currentDate);
    updateWeekChart(currentDate);
  }

  function goToNextDay() {
    const currentDate = new Date(currentDateElement.textContent);
    currentDate.setDate(currentDate.getDate() + 1);
    currentDateElement.textContent = getCurrentDateFromDate(currentDate);
    updateWeekChart(currentDate);
  }

  prevButton.addEventListener("click", goToPreviousDay);
  nextButton.addEventListener("click", goToNextDay);

  updateDate();
});