document.addEventListener("DOMContentLoaded", () => {
  campoDNI();
  inputNoStock();
  combinacionColores();
  condicionarCheckbox();
  btnProductCombination();
  eventoBotonesFicha();
  lecturaInicial();
});

/* Ordenar el filtro de ordenamientos */
const btnProductCombination = () => {
  const containerCombos = document.querySelector('#bollinitabs div.container-combos')
    if(containerCombos) {
        const botonAdd = document.querySelector('div.product-add-to-cart div.product-quantity')
        botonAdd.style.display = 'none'
    }
}

/* Creamos el ordenamiento por "Modelo y color" */
const modelColor = (type) => {
  setTimeout(() => {
    if(document.querySelector('body#category') || document.querySelector('body#module-ambjolisearch-jolisearch')) {
      if(type === 'modelColor') {
        localStorage.setItem('modelColor', 'modelColor')
      } else {
        localStorage.setItem('modelColor', 'other')
      }

      let typeSave = localStorage.getItem('modelColor')
      const element = document.querySelector('div.products-sort-order div.dropdown-menu a#modelColor')
      const spanName = document.querySelector('div.products-sort-nb-dropdown.products-sort-order span.select-title-name')

      if(typeSave === 'modelColor') {
        const sortOrders = document.querySelectorAll('div.products-sort-order div.dropdown-menu a.select-list.dropdown-item')
        sortOrders.forEach(order => {
          if(order.classList.contains('current')) {
            order.classList.remove('current')
          }
        })
        
        element.classList.add('current')
        spanName.textContent = element.textContent
      } else {
        // element.classList.remove('current')
        // spanName.textContent = spanName.textContent
      }
    }
  }, 2000);
}

/*Campo DNI tipo number*/
const campoDNI = () => {
  const dni = document.querySelector(
    'div.js-address-form form input[name="dni"]'
  );

  if (dni) {
    dni.type = "number";
    const maxLength = 8;

    dni.addEventListener("input", function () {
      if (this.value.length > maxLength) {
        this.value = this.value.slice(0, maxLength);
      }
    });
  }
};

const inputNoStock = () => {
  const input = document.querySelector('#quantity_wanted');
  if (!input) return;
  const max = parseInt(input.dataset.maximo)
  // Cantidad actual
  let qtyCurrent = parseInt(input.value)

  if (qtyCurrent > max) {
    input.classList.add("no-stock")
  } else {
    input.classList.remove("no-stock")
  }


};

const combinacionColores = () => {
  const combinacionesColor = document.querySelectorAll(
    "#combinaciones-color span.combinacion-color"
  );
  combinacionesColor.forEach((comb) => {
    const color = comb.dataset.color;

    switch (color) {
      case "Gris":
        comb.style.backgroundColor = "#AAB2BD";
        break;
      case "Gris pardo":
        comb.style.backgroundColor = "#CFC4A6";
        break;
      case "Beige":
        comb.style.backgroundColor = "#f5f5dc";
        break;
      case "Blanco":
        comb.style.backgroundColor = "#fff";
        break;
      case "Blanco roto":
        comb.style.backgroundColor = "#faebd7";
        break;
      case "Rojo":
        comb.style.backgroundColor = "#E84C3D";
        break;
      case "Negro":
        comb.style.backgroundColor = "#434A54";
        break;
      case "Camel":
        comb.style.backgroundColor = "#C19A6B";
        break;
      case "Naranja":
        comb.style.backgroundColor = "#F39C11";
        break;
      case "Azul":
        comb.style.backgroundColor = "#5D9CEC";
        break;
      case "Verde":
        comb.style.backgroundColor = "#A0D468";
        break;
      case "Amarillo":
        comb.style.backgroundColor = "#F1C40F";
        break;
      case "Marrón":
        comb.style.backgroundColor = "#964B00";
        break;
      case "Rosa":
        comb.style.backgroundColor = "#FCCACD";
        break;
      default:
        break;
    }
  });
};

const condicionarCheckbox = () => {
  const canalVenta = document.querySelector(
    "select#idxrvalidatinguser-input-1"
  );
  const rubros = document.querySelectorAll(
    '.checkbox-group .checkbox label input[type="checkbox"]'
  );

  if (canalVenta && rubros) {
    rubros.forEach((rubro) => {
      rubro.parentElement.parentElement.parentElement.style.display = "none";
    });

    if (canalVenta.value) {
      condicionarRubros(canalVenta.value, rubros);
    }

    canalVenta.addEventListener("change", () => {
      rubros.forEach((rubro) => {
        if (rubro.checked === true) {
          rubro.checked = false;
        }
      });

      condicionarRubros(canalVenta.value, rubros);
    });
  }

  posicionIdx();
};
const condicionarRubros = (valor, rubros) => {
  switch (valor) {
    case "1":
      //Mayorista
      rubros.forEach((rubro) => {
        if (rubro.value === "" || rubro.value === "5" || rubro.value === "6") {
          rubro.parentElement.parentElement.parentElement.style.display =
            "block";
        } else {
          rubro.parentElement.parentElement.parentElement.style.display =
            "none";
        }
      });
      break;
    case "2":
      //Minorista
      rubros.forEach((rubro) => {
        if (
          rubro.value === "" ||
          rubro.value === "6" ||
          rubro.value === "7" ||
          rubro.value === "8" ||
          rubro.value === "9"
        ) {
          rubro.parentElement.parentElement.parentElement.style.display =
            "block";
        } else {
          rubro.parentElement.parentElement.parentElement.style.display =
            "none";
        }
      });
      break;
    case "3":
      //Distribuidor
      rubros.forEach((rubro) => {
        if (rubro.value === "" || rubro.value === "5" || rubro.value === "6") {
          rubro.parentElement.parentElement.parentElement.style.display =
            "block";
        } else {
          rubro.parentElement.parentElement.parentElement.style.display =
            "none";
        }
      });
      break;
    case "4":
      //Otros
      rubros.forEach((rubro) => {
        if (
          rubro.value === "" ||
          rubro.value === "10" ||
          rubro.value === "11" ||
          rubro.value === "12" ||
          rubro.value === "13" ||
          rubro.value === "14" ||
          rubro.value === "15"
        ) {
          rubro.parentElement.parentElement.parentElement.style.display =
            "block";
        } else {
          rubro.parentElement.parentElement.parentElement.style.display =
            "none";
        }
      });
      break;
    default:
      break;
  }
};
const posicionIdx = () => {
  const formIdx = document.querySelector("#idxForm-contenedor");

  const contenedor = document.querySelector("form#customer-form > section");
  const element = document.querySelectorAll(
    "form#customer-form section div.form-group.row.align-items-center"
  )[1];

  if (contenedor && formIdx && element) {
    contenedor.insertBefore(formIdx, element.nextSibling);
  }
};

// Obtén el elemento de input
var inputCuil = document.querySelector('#content input[name="vat_number"');

if (inputCuil) {
  // Agrega un event listener para el evento 'input'
  inputCuil.addEventListener("input", function (event) {
    // Obtén el valor actual del input
    var inputValue = event.target.value;

    // Elimina cualquier caracter que no sea un dígito del 1 al 9
    var sanitizedValue = inputValue.replace(/[^1-9]/g, "");

    // Limita la longitud a 11 dígitos
    sanitizedValue = sanitizedValue.slice(0, 11);

    // Actualiza el valor del input con la entrada válida
    event.target.value = sanitizedValue;
  });
}
//Condicionar nombre y apellido del formulario direcciones
//Seleccionar el input por su nombre
const inputNombre = document.querySelector(
  '.address-form input[name="firstname"]'
);
const inputApellido = document.querySelector(
  '.address-form input[name="lastname"]'
);

// Agregar el atributo 'minlength' al campo de nombre
if (inputNombre) {
  inputNombre.setAttribute("minlength", "3");
}
if (inputApellido) {
  inputApellido.setAttribute("minlength", "3");
}

const inputNombre1 = document.querySelector(
  '#delivery-address input[name="firstname"]'
);
const inputApellido1 = document.querySelector(
  '#delivery-address input[name="lastname"]'
);

// Agregar el atributo 'minlength' al campo de nombre
if (inputNombre1) {
  inputNombre1.setAttribute("minlength", "3");
}
if (inputApellido1) {
  inputApellido1.setAttribute("minlength", "3");
}

/* Inicamos el desarrollo a partir de aqui */
const lecturaInicial = () => {
  const miniaturas = document.querySelectorAll('.product-miniature')
  if (miniaturas) {
    miniaturas.forEach(miniatura => {
      // Elementos miniatura
      const input = miniatura.querySelector('.input-qty')
      const addToCart = miniatura.querySelector('.add-to-cart')
      const max = parseInt(input.dataset.maximo)
      // Cantidad actual
      let qtyCurrent = parseInt(input.value)

      // Condicionar la habilitacion del boton segun qty
      addToCartDisabled(qtyCurrent, max, addToCart, input)
    })
  }
}

// Accion = 'menos', 'mas' y 'input'
const lecturaInput = (id, accion) => {
  // Miniatura
  const miniatura = document.querySelector(`.product-miniature[data-id-product="${id}"]`)
  if (miniatura) {
    // Elementos miniatura
    const input = miniatura.querySelector('.input-qty')
    const addToCart = miniatura.querySelector('.add-to-cart')
    const min = parseInt(input.getAttribute('min'))
    const max = parseInt(input.dataset.maximo)
    // Cantidad actual
    let qtyCurrent = parseInt(input.value)

    if (accion === 'input') {
      addToCartDisabled(qtyCurrent, max, addToCart, input)
    } else {
      btnsInput(accion, qtyCurrent, input, min, max, addToCart)
    }
  }
}
// Funcionalidad de botones menos y más
function btnsInput(accion, qtyCurrent, input, min, max, addToCart) {
  if (accion === 'menos') {
    qtyCurrent -= 1
    if (qtyCurrent < min) {
      qtyCurrent = min
    }
  } else {
    qtyCurrent += 1
  }

  addToCartDisabled(qtyCurrent, max, addToCart, input)
  input.value = qtyCurrent
}
// Condicionar la habilitacion del boton segun qty
function addToCartDisabled(qty, max, addToCart, input) {
  if (qty > max) {
    addToCart.disabled = true;
    input.classList.add("no-stock")
  } else {
    addToCart.disabled = false
    input.classList.remove("no-stock")
  }
}


const eventoBotonesFicha = () => {
  const buttonUp = document.querySelector('.product-quantity button.btn.btn-touchspin.js-touchspin.bootstrap-touchspin-up');
  const buttonDown = document.querySelector('.product-quantity button.btn.btn-touchspin.js-touchspin.bootstrap-touchspin-down');

  if (buttonUp) {
    buttonUp.addEventListener('click', (event) => {
        inputNoStock();
    });
  }

  if (buttonDown) {
    buttonDown.addEventListener('click', (event) => {
        inputNoStock();
    });
  }
};