// source --> https://johnywick.pl/wp-content/plugins/personalized-products/assets/scripts.js?ver=1 
const $ = jQuery;

$(document).ready(() => {

  const productHandler = () => {

    const productDomElements = {
      additionalSelectData: $('#subproducts'),
      select: document.querySelector('#subProductsPicker'),
      attributes: $('select[name*="attribute"]'),
      additionalInputs: $('input[name*="custom_name"]'),
      selectParent: $('.personalized-row'),
      defaultSettings: $('#default-product').data('json'),
      button: $('.single_add_to_cart_button'),
      imageWrapper: $('.woocommerce-product-gallery'),
      packageInput: $('#jh_package_price'),
      variationsForm: $('.variations_form')
    }

    const productDetails = {
      price: $('.price'),
      quantity: $('.qty'),
      excerpt: $('.woocommerce-product-details__short-description'),
      inputSubProduct: $('#subProductId')
    }

    const allInputs = [
      ...productDomElements.attributes,
      ...productDomElements.additionalInputs,
      productDomElements.select,
    ]

    if (!productDomElements.additionalSelectData.length) {
      return;
    }

    const defaultSelectPicker = productDomElements.select.innerHTML;

    const buttonToggleStatus = (status) =>  status ? productDomElements.button.removeClass('disabled') : productDomElements.button.addClass('disabled')
    
    const toggleAvailabilityBuyButton = ( type ) => {

      if(type === false ){
        return productDomElements.button.hasClass('disabled') ? productDomElements.button.removeClass('disabled wc-variation-selection-needed') : null
      } else {
        productDomElements.button.removeClass('disabled wc-variation-selection-needed')
      }

    }

    let additionalFieldValues = [];

    const updateSelectValues = ( element, content ) => {
      element.innerHTML = '';
      element.insertAdjacentHTML("beforeend", content)
    }

    const getJSONbyAttribute = (attributesList, json) => {
      let attributeValue = [];

      attributesList.each((index, element) => {
        const currentValue = $(element).val();

        if (json.hasOwnProperty(currentValue)) {
          attributeValue = json[currentValue];
          group = currentValue
        }
      });

      return {
        attributes: attributeValue,
        group: group
      };
    };

    const createSelectOptions = (products) => {

      if (!products.length) {
        return false;
      }

      let html = ''

      products.forEach(({ id, name}) => {
          html += `<option value="${id}">${name}</option>`
      });

      return html;

    };

    const subProductsJson = productDomElements.additionalSelectData.data('json');

    const areFilledUP = (...args) => [...args].every((item) => $(item).val());

    const getEmptyInputs = (inputs) => inputs.filter(item => ! $(item).val())
    
    const getProduct = ( {group, productID} ) => {
      
      if(! subProductsJson[group].hasOwnProperty('products')) {
        return false;
      }

      return subProductsJson[group]['products'].find(element => Number(element.id) === Number(productID))
    }

    const dynamicProductDataLoad = () => {

      if(!areFilledUP( productDomElements.select) ) {
        return false;
      }

      const productAttr = {
        productID: $(productDomElements.select).val(),
        group: productDomElements.additionalSelectData.attr('data-group')
      }

      const product = getProduct(productAttr)

      if(!product) {
        return false;
      }

      updateProductData( product )

    }

    const getPriceIncludePackage = (priceHTML) => {
      if( ! productDomElements.packageInput || !productDomElements.packageInput.is(':checked') ) {
        return priceHTML
      }

      const regex = /\d{1,3}([.,]\d{1,2})?/g
      const html = priceHTML.replace(/&#(\d+);/g, function(match, dec) {
        return String.fromCharCode(dec);
      });

      const htmlReplaced = html.replace(regex, function(match) {
        return (parseFloat(match.replace(".",'.')) + parseFloat(productDomElements.packageInput.data('price'))).toFixed(2).replace('.', ',')
      });

      return htmlReplaced

    }

    const updateProductData = ( { priceHTML, quantity, label = null, description = null, id = null } ) => {
      $('.price').each(function(){$(this).html(getPriceIncludePackage(priceHTML))})
      productDetails.quantity.val(1)
      productDetails.quantity.attr('max', quantity ?? false)
      productDetails.excerpt.html(description) 
      productDetails.inputSubProduct.val(id)
      productDomElements.imageWrapper.find('.customLabel').remove()
      if(label){
        productDomElements.imageWrapper.append(label)
      }
    }

    const variationHandler = () => {

      if (areFilledUP(productDomElements.attributes)) {
        productDomElements.selectParent.show();
        additionalFieldValues = getJSONbyAttribute(productDomElements.attributes, subProductsJson);

        const attributesValues = additionalFieldValues.attributes

        if (!attributesValues || !attributesValues.hasOwnProperty('products')) {
          return;
        }

        productDomElements.additionalSelectData.attr('data-group', additionalFieldValues.group)
        updateSelectValues(productDomElements.select, createSelectOptions(attributesValues.products))
        dynamicProductDataLoad()
        buttonToggleStatus(!getEmptyInputs(allInputs).length)
      } else {
        productDomElements.selectParent.hide();
        updateSelectValues(productDomElements.select, defaultSelectPicker)
        productDomElements.additionalSelectData.attr('data-group', 0)
        updateProductData(productDomElements.defaultSettings)
        toggleAvailabilityBuyButton(false)
        buttonToggleStatus(false)
      }

    }

    const formValidator = () => {
      allInputs.forEach(item => item.classList.remove('not-filled'))
      getEmptyInputs(allInputs).forEach(item => item.classList.add('not-filled'))
      buttonToggleStatus(getEmptyInputs(allInputs).length == 0)
    }

    const packageHandler = () => {
      dynamicProductDataLoad()
    }

    $(productDomElements.variationsForm).on("woocommerce_variation_select_change", variationHandler);
    $(productDomElements.packageInput).on('click', packageHandler)
    $(productDomElements.select).on("change", dynamicProductDataLoad );
    variationHandler()
    $(productDomElements.variationsForm).on('input', 'input, select', formValidator)
  }

  const cartHandler = () => {

    const cartElements = {
        quantity: $('.qty')
    }

    const quantityManipulation = (e) => {
      const that = $(e.target)
      const maxQuantity = that.data('max-quantity')

      if(!maxQuantity) {
        return;
      }

      const currentQuantity = parseInt(that.val());
      currentQuantity > maxQuantity ? that.val(maxQuantity) : null;

    }

    cartElements.quantity.on('change', quantityManipulation)
  }

  cartHandler();
  productHandler();
});