Product Components

handleSubmit(event) {
  event.preventDefault();
  
  if (this.#variantChangeInProgress) {
    const intendedVariantId = this.#getIntendedVariantId();
    const quantity = this.#getQuantity();
    
    if (intendedVariantId) {
      this.#addToCartQueue.push({ variantId: intendedVariantId, quantity });
    }
    
    this.refs.addToCartButtonContainer?.animateAddToCart?.();
    return;
  }
  
  this.#processAddToCart(undefined, undefined, event);
}

if (this.refs.quantitySelector?.canAddToCart) {
  const validation = this.refs.quantitySelector.canAddToCart();
  
  if (!validation.canAdd) {
    // Disable buttons
    for (const container of allAddToCartContainers) {
      container.disable();
    }
    
    // Show error
    const errorMessage = errorTemplate.replace(
      '{{ maximum }}', 
      validation.maxQuantity?.toString() || ''
    );
    addToCartTextError.textContent = errorMessage;
    addToCartTextError.classList.remove('hidden');
    
    // Re-enable after delay
    setTimeout(() => {
      for (const container of allAddToCartContainers) {
        container.enable();
      }
    }, ERROR_BUTTON_REENABLE_DELAY);
    
    return;
  }
}

#onVariantUpdate = async (event) => {
  if (event.detail.data.newProduct) {
    this.dataset.productId = event.detail.data.newProduct.id;
  }
  
  const { variantId } = this.refs;
  variantId.value = event.detail.resource?.id ?? '';
  
  this.#variantChangeInProgress = false;
  
  // Process queued add-to-cart requests
  if (this.#addToCartQueue.length > 0) {
    const queuedItems = [...this.#addToCartQueue];
    this.#addToCartQueue = [];
    this.#processBatchAddToCart(queuedItems);
  }
  
  // Update button state
  if (event.detail.resource?.available === false) {
    this.refs.addToCartButtonContainer?.disable();
  } else {
    this.refs.addToCartButtonContainer?.enable();
  }
  
  // Update quantity constraints for new variant
  const newQuantityInput = event.detail.data.html.querySelector(
    'quantity-selector-component input[ref="quantityInput"]'
  );
  
  if (this.refs.quantitySelector?.updateConstraints && newQuantityInput) {
    this.refs.quantitySelector.updateConstraints(
      newQuantityInput.min,
      newQuantityInput.max || null,
      newQuantityInput.step
    );
  }
  
  // Fetch and update cart quantity for the new variant
  await this.#fetchAndUpdateCartQuantity();
};

disable() {
  this.refs.addToCartButton.disabled = true;
}

enable() {
  this.refs.addToCartButton.disabled = false;
}

handleClick(event) {
  const form = this.closest('form');
  if (!form?.checkValidity()) return;
  
  // Check if adding would exceed max before animating
  const productForm = this.closest('product-form-component');
  const quantitySelector = productForm?.refs.quantitySelector;
  
  if (quantitySelector?.canAddToCart) {
    const validation = quantitySelector.canAddToCart();
    if (!validation.canAdd) {
      return; // Don't animate if it would exceed max
    }
  }
  
  if (this.refs.addToCartButton.dataset.puppet !== 'true') {
    const animationEnabled = this.dataset.addToCartAnimation === 'true';
    
    if (animationEnabled && !event.target.closest('.quick-add-modal')) {
      this.#animateFlyToCart();
    }
    
    this.animateAddToCart();
  }
}

animateAddToCart = async function () {
  const { addToCartButton } = this.refs;
  
  // Clear existing timeouts
  this.#resetTimeouts.forEach((timeoutId) => clearTimeout(timeoutId));
  this.#resetTimeouts = [];
  
  if (addToCartButton.dataset.added !== 'true') {
    addToCartButton.dataset.added = 'true';
  }
  
  await yieldToMainThread();
  await onAnimationEnd(addToCartButton);
  
  // Reset after 800ms
  const timeoutId = setTimeout(() => {
    addToCartButton.removeAttribute('data-added');
    
    const index = this.#resetTimeouts.indexOf(timeoutId);
    if (index > -1) {
      this.#resetTimeouts.splice(index, 1);
    }
  }, 800);
  
  this.#resetTimeouts.push(timeoutId);
};

getValue() {
  return this.refs.quantityInput.value;
}

setValue(value) {
  this.refs.quantityInput.value = value;
}

updateConstraints(min, max, step) {
  const { quantityInput } = this.refs;
  const currentValue = parseInt(quantityInput.value) || 0;
  
  quantityInput.min = min;
  if (max) {
    quantityInput.max = max;
  } else {
    quantityInput.removeAttribute('max');
  }
  quantityInput.step = step;
  
  const newMin = parseIntOrDefault(min, 1);
  const newStep = parseIntOrDefault(step, 1);
  const effectiveMax = this.getEffectiveMax();
  
  // Snap to valid increment if not already aligned
  let newValue = currentValue;
  if ((currentValue - newMin) % newStep !== 0) {
    // Snap DOWN to closest valid increment
    newValue = newMin + Math.floor((currentValue - newMin) / newStep) * newStep;
  }
  
  // Ensure value is within bounds
  newValue = Math.max(newMin, Math.min(effectiveMax ?? Infinity, newValue));
  
  if (newValue !== currentValue) {
    quantityInput.value = newValue.toString();
  }
  
  this.updateButtonStates();
}

getCurrentValues() {
  const { quantityInput } = this.refs;
  
  return {
    min: parseIntOrDefault(quantityInput.min, 1),
    max: parseIntOrDefault(quantityInput.max, null),
    step: parseIntOrDefault(quantityInput.step, 1),
    value: parseIntOrDefault(quantityInput.value, 0),
    cartQuantity: parseIntOrDefault(quantityInput.getAttribute('data-cart-quantity'), 0),
  };
}

getEffectiveMax() {
  const { max, cartQuantity, min } = this.getCurrentValues();
  if (max === null) return null;
  
  // Product page: can only add what's left
  return Math.max(max - cartQuantity, min);
}

canAddToCart() {
  const { max, cartQuantity, value } = this.getCurrentValues();
  const quantityToAdd = value;
  const wouldExceedMax = max !== null && cartQuantity + quantityToAdd > max;
  
  return {
    canAdd: !wouldExceedMax,
    maxQuantity: max,
    cartQuantity,
    quantityToAdd,
  };
}

setCartQuantity(cartQty) {
  this.refs.quantityInput.setAttribute('data-cart-quantity', cartQty.toString());
  this.updateCartQuantity();
}

increaseQuantity(event) {
  if (!(event.target instanceof HTMLElement)) return;
  event.preventDefault();
  this.updateQuantity(1);
}

decreaseQuantity(event) {
  if (!(event.target instanceof HTMLElement)) return;
  event.preventDefault();
  this.updateQuantity(-1);
}

updateQuantity(stepMultiplier) {
  const { quantityInput } = this.refs;
  const { min, step, value } = this.getCurrentValues();
  const effectiveMax = this.getEffectiveMax();
  
  const newValue = Math.min(
    effectiveMax ?? Infinity,
    Math.max(min, value + step * stepMultiplier)
  );
  
  quantityInput.value = newValue.toString();
  this.onQuantityChange();
  this.updateButtonStates();
}

onQuantityChange() {
  const { quantityInput } = this.refs;
  const newValue = parseInt(quantityInput.value);
  
  this.dispatchEvent(
    new QuantitySelectorUpdateEvent(
      newValue,
      Number(quantityInput.dataset.cartLine) || undefined
    )
  );
}

variantChanged(event) {
  if (!(event.target instanceof HTMLElement)) return;
  
  const selectedOption = event.target instanceof HTMLSelectElement 
    ? event.target.options[event.target.selectedIndex] 
    : event.target;
  
  if (!selectedOption) return;
  
  this.updateSelectedOption(event.target);
  
  this.dispatchEvent(new VariantSelectedEvent({
    id: selectedOption.dataset.optionValueId ?? '',
  }));
  
  const isOnProductPage = this.dataset.templateProductMatch === 'true' &&
    !event.target.closest('product-card') &&
    !event.target.closest('quick-add-dialog');
  
  // Determine if loading a new product (combined listings)
  const currentUrl = this.dataset.productUrl?.split('?')[0];
  const newUrl = selectedOption.dataset.connectedProductUrl;
  const loadsNewProduct = isOnProductPage && !!newUrl && newUrl !== currentUrl;
  
  const morphElementSelector = loadsNewProduct
    ? 'main'
    : this.closest('featured-product-information')
    ? 'featured-product-information'
    : undefined;
  
  this.fetchUpdatedSection(this.buildRequestUrl(selectedOption), morphElementSelector);
  
  // Update URL
  const url = new URL(window.location.href);
  const variantId = selectedOption.dataset.variantId || null;
  
  if (isOnProductPage) {
    if (variantId) {
      url.searchParams.set('variant', variantId);
    } else {
      url.searchParams.delete('variant');
    }
  }
  
  if (loadsNewProduct) {
    url.pathname = newUrl;
  }
  
  if (url.href !== window.location.href) {
    history.replaceState({}, '', url.toString());
  }
}

fetchUpdatedSection(requestUrl, morphElementSelector) {
  this.#abortController?.abort();
  this.#abortController = new AbortController();
  
  fetch(requestUrl, { signal: this.#abortController.signal })
    .then((response) => response.text())
    .then((responseText) => {
      this.#pendingRequestUrl = undefined;
      const html = new DOMParser().parseFromString(responseText, 'text/html');
      
      const textContent = html.querySelector(
        `variant-picker script[type="application/json"]`
      )?.textContent;
      
      if (!textContent) return;
      
      let newProduct;
      
      if (morphElementSelector === 'main') {
        this.updateMain(html);
      } else if (morphElementSelector) {
        this.updateElement(html, morphElementSelector);
      } else {
        newProduct = this.updateVariantPicker(html);
      }
      
      // Dispatch variant update event
      if (this.selectedOptionId) {
        this.dispatchEvent(
          new VariantUpdateEvent(JSON.parse(textContent), this.selectedOptionId, {
            html,
            productId: this.dataset.productId ?? '',
            newProduct,
          })
        );
      }
    })
    .catch((error) => {
      if (error.name === 'AbortError') {
        console.warn('Fetch aborted by user');
      } else {
        console.error(error);
      }
    });
}

updatePrice = (event) => {
  if (event.detail.data.newProduct) {
    this.dataset.productId = event.detail.data.newProduct.id;
  } else if (event.target instanceof HTMLElement && 
             event.target.dataset.productId !== this.dataset.productId) {
    return;
  }
  
  const { priceContainer, volumePricingNote } = this.refs;
  
  // Find the new product-price element in the updated HTML
  const newProductPrice = event.detail.data.html.querySelector(
    `product-price[data-block-id="${this.dataset.blockId}"]`
  );
  
  if (!newProductPrice) return;
  
  // Update price container
  const newPrice = newProductPrice.querySelector('[ref="priceContainer"]');
  if (newPrice && priceContainer) {
    priceContainer.replaceWith(newPrice);
  }
  
  // Update volume pricing note
  const newNote = newProductPrice.querySelector('[ref="volumePricingNote"]');
  
  if (!newNote) {
    volumePricingNote?.remove();
  } else if (!volumePricingNote) {
    newPrice?.insertAdjacentElement('afterend', newNote.cloneNode(true));
  } else {
    volumePricingNote.replaceWith(newNote);
  }
};

updateInventory = (event) => {
  if (event.detail.data.newProduct) {
    this.dataset.productId = event.detail.data.newProduct.id;
  } else if (event.target instanceof HTMLElement && 
             event.target.dataset.productId !== this.dataset.productId) {
    return;
  }
  
  const newInventory = event.detail.data.html.querySelector('product-inventory');
  
  if (!newInventory) return;
  
  morph(this, newInventory, { childrenOnly: true });
};