"use strict";
/* ========================================================================== *
 * JS: EE: Desktop: SWC
 * ========================================================================== */
import { config } from "./widgetConfig.mjs";

window.addEventListener("load", function () {
	const medMediaQuery = window.matchMedia("(max-width:85rem)");
	const destinationNode = document.getElementById("advon-commerce-widget");

	function getMaxProductDisplayCount(isMed) {
		return isMed ? 3 : 4;
	}

	config.display.maxProductDisplayCount = getMaxProductDisplayCount(
		medMediaQuery.matches
	);

	const widget = new AdvonCommerceWidget({
		hydrate: true,
		props: {
			config,
			data: window.__ADVON_COMMERCE_WIDGET_DATA__,
		},
		target: destinationNode,
	});

	function updateProductCount(evt) {
		const maxProductDisplayCount = getMaxProductDisplayCount(evt.matches);
		const { api, display, redirect } = widget.config;
		const nextConfig = {
			api,
			redirect,
			display: {
				...display,
				maxProductDisplayCount,
			},
		};
		widget.$set({ config: nextConfig });
	}

	medMediaQuery.addEventListener("change", updateProductCount);
});