import { fetchUserSales } from "../service/user.js";

const table = document.getElementById('historyTable');
const rowTemplate = document.getElementById('historyRowTemplate');
const cartHistoryTotal = document.getElementById('cartHistoryTotal');

function setHistoryTable(tableData) {
  if (!tableData || tableData.length === 0) {
    console.warn("No hay datos para mostrar en el historial de compras.");
    table.querySelector('tbody').innerHTML = '<tr><td colspan="3" class="text-center text-gray-500">No hay historial de compras.</td></tr>';
    return;
  }
    table.querySelector('tbody').innerHTML = ''; // Clear existing rows
    tableData.forEach(item => {
      addHistoryRow(item.quantity, item.productName, item.price);
    });
}   


function addHistoryRow(quantity, productName, price) {
  const newRow = rowTemplate.content.cloneNode(true);
  newRow.querySelector('.list-element-quantity').textContent = quantity;
  newRow.querySelector('.list-element-name').textContent = productName;
  newRow.querySelector('.list-element-price').textContent = `$${price.toFixed(2)}`;

    addCartHistoryTotal(price);

  table.querySelector('tbody').appendChild(newRow);
}

function addCartHistoryTotal(price) {
  const currentTotal = getHistoryTotal();
  const newTotal = currentTotal + Number(price);
  updateCartHistoryTotal(newTotal);
}

function updateCartHistoryTotal(total) {
  cartHistoryTotal.textContent = `$${total.toFixed(2)}`;
}

function getHistoryTotal() {
    return Number(cartHistoryTotal.textContent.replace(/[$,]/g, ''));
}

async function setupShoppingCart(userID, userToken, userName) {
  const name = document.querySelector('#usernameTable');
  if (name) {
    name.textContent = `Pedidos de: ${userName}`;
  }else{
    console.warn("No se encontró el elemento de nombre en la tabla de historial.");
  }
  const sales = await fetchUserSales(userID, userToken);
  if (sales){
    setHistoryTable(sales);
  }
}


export { setupShoppingCart, setHistoryTable, addHistoryRow, updateCartHistoryTotal, getHistoryTotal };