import { initCalculator } from '$components/calculator';
import { createCustomRange } from '$components/custom-range';
import { initDialog } from '$components/dialog';
import { createPriceInput } from '$components/price-input';

function getElements(filter: string) {
  const elements = document.querySelectorAll(`[cmt-progress-element="${filter}"]`);
  return elements as NodeListOf<HTMLElement>;
}

function calcularPorcentajeAvance(startDate: string, durationMonths: number) {
  const [startMonth, startYear] = startDate.split('/').map(Number);

  // Crear una fecha para el inicio del proyecto
  const startDateProject = new Date(startYear, startMonth - 1);

  // Crear una fecha para la fecha actual
  const currentDate = new Date();

  // Calcular la diferencia en meses desde el inicio hasta hoy
  const monthsDifference =
    (currentDate.getFullYear() - startDateProject.getFullYear()) * 12 +
    (currentDate.getMonth() - startDateProject.getMonth());

  // Calcular el porcentaje de avance
  let progress = (monthsDifference / durationMonths) * 100;

  // Limitar el porcentaje entre 0% y 100%
  progress = Math.min(100, Math.max(0, progress));

  return progress.toFixed(0); // Formato con 2 decimales
}

interface CardElement extends HTMLElement {
  querySelector(selectors: '[cmt-progress-element="start-date"]'): HTMLElement;
  querySelector(selectors: '[cmt-progress-element="months"]'): HTMLElement;
  querySelector(selectors: '[cmt-progress-element="progress"]'): HTMLElement;
  querySelector(selectors: '[cmt-progress-element="percentage-number"]'): HTMLElement;
  querySelector(selectors: '[cmt-progress-element="percentage-filler"]'): HTMLElement;
}

function showProgress(elements: NodeListOf<HTMLElement>) {
  elements.forEach((element) => {
    const cardElement = element as CardElement;
    const startDate = cardElement.querySelector('[cmt-progress-element="start-date"]'); //.innerText;
    const months = cardElement.querySelector('[cmt-progress-element="months"]'); //.innerText;
    const progress = cardElement.querySelector('[cmt-progress-element="progress"]');
    if (progress && startDate && months) {
      progress.innerText = calcularPorcentajeAvance(
        startDate.innerText,
        parseInt(months.innerText, 10)
      );
    }
    const pctNumber = cardElement.querySelector('[cmt-progress-element="percentage-number"]');
    const pctFiller = cardElement.querySelector('[cmt-progress-element="percentage-filler"]');
    if (pctFiller && pctNumber) {
      pctFiller.style.width = `${pctNumber.innerText}%`;
    }
  });
}

function init() {
  createPriceInput('[data-element="price-input"]');
  createCustomRange('[data-element="custom-range"]');
  initCalculator('[data-element="product-calculator"]');
  initDialog('[data-dialog-el="dialog"]');

  //const cards = getCards();
  const elements = getElements('container');
  if (elements.length > 0) {
    showProgress(elements);
  } else {
    // eslint-disable-next-line no-console
    console.log('No cards found in the grid');
  }
}

// Run the check for Chart.js after DOM is loaded
document.addEventListener('DOMContentLoaded', () => init());