/**
 * Woostify Pro Customizer Preview
 *
 * @package Woostify Pro
 */

'use strict';

// Colors.
function woostify_pro_colors_live_update( id, selector, property ) {
	var setting = 'woostify_pro_options[' + id + ']';

	wp.customize(
		setting,
		function( value ) {
			value.bind(
				function( newval ) {
					if ( jQuery( 'style#' + id ).length ) {
						jQuery( 'style#' + id ).html( selector + '{' + property + ':' + newval + ';}' );
					} else {
						jQuery( 'head' ).append( '<style id="' + id + '">' + selector + '{' + property + ':' + newval + '}</style>' );

						setTimeout(
							function() {
								jQuery( 'style#' + id ).not( ':last' ).remove();
							},
							1000
						);
					}
				}
			);
		}
	);
}

// Update element class.
function woostify_pro_update_element_class( id, selector, prefix ) {
	var setting = 'woostify_pro_options[' + id + ']';

	wp.customize(
		setting,
		function( value ) {
			value.bind(
				function( newval ) {
					var newClass = '';
					switch ( newval ) {
						case true:
							newClass = prefix;
							break;
						case false:
							newClass = '';
							break;
						default:
							newClass = prefix + newval;
							break;
					}
					jQuery( selector ).removeClassPrefix( prefix ).addClass( newClass );
				}
			);
		}
	);
}

// Html.
function woostify_pro_html_live_update( id, selector ) {
	var setting = 'woostify_pro_options[' + id + ']';

	wp.customize(
		setting,
		function( value ) {
			value.bind(
				function( newval ) {
					var element = document.querySelectorAll( selector );
					if ( ! element.length ) {
						return;
					}

					element.forEach(
						function( ele ) {
							ele.innerHTML = newval;
						}
					);
				}
			);
		}
	);
}

// Units.
function woostify_pro_unit_live_update( id, selector, property, unit, fullId ) {
	var unit    = 'undefined' !== typeof( unit ) ? unit : 'px',
		setting = 'woostify_pro_options[' + id + ']';

	// Wordpress customize.
	wp.customize(
		setting,
		function( value ) {
			value.bind(
				function( newval ) {
					// Sometime 'unit' is not use.
					if ( ! unit ) {
						unit = '';
					}

					// Get style.
					var data = '';
					if ( Array.isArray( property ) ) {
						for ( var i = 0, j = property.length; i < j; i ++ ) {
							data += newval ? selector + '{' + property[i] + ': ' + newval + unit + '}' : '';
						}
					} else {
						data += newval ? selector + '{' + property + ': ' + newval + unit + '}' : '';
					}

					// Append style.
					if ( jQuery( 'style#' + id ).length ) {
						jQuery( 'style#' + id ).html( data );
					} else {
						jQuery( 'head' ).append( '<style id="' + id + '">' + data + '</style>' );

						setTimeout(
							function() {
								jQuery( 'style#' + id ).not( ':last' ).remove();
							},
							100
						);
					}
				}
			);
		}
	);
}

document.addEventListener(
	'DOMContentLoaded',
	function() {
		// UPDATE ELEMENT CLASS NAME.
		// Layout 1.
		woostify_pro_update_element_class( 'header_full_width', '.header-layout-1', 'header-full-width' );

		// HTML LIVE UPDATE.
		// Layout 3.
		woostify_pro_html_live_update( 'header_left_content', '.header-layout-3 .left-content' );
		// Layout 5.
		woostify_pro_html_live_update( 'header_center_content', '.header-layout-5 .center-content' );
		// Layout 8.
		woostify_pro_html_live_update( 'header_8_button_text', '.header-layout-8 .vertical-menu-button' );

		// COLOR LIVE UPDATE.
		// Layout 6.
		woostify_pro_colors_live_update( 'header_content_bottom_background', '.header-layout-6 .header-content-bottom', 'background-color' );
		// Layout 8.
		woostify_pro_colors_live_update( 'header_8_search_bar_background', '.header-layout-8 .header-content-bottom', 'background-color' );
		woostify_pro_colors_live_update( 'header_8_button_background', '.header-layout-8 .vertical-menu-wrapper .vertical-menu-button', 'background-color' );
		woostify_pro_colors_live_update( 'header_8_button_color', '.header-layout-8 .vertical-menu-wrapper .vertical-menu-button', 'color' );
		woostify_pro_colors_live_update( 'header_8_button_hover_background', '.header-layout-8 .vertical-menu-wrapper .vertical-menu-button:hover', 'background-color' );
		woostify_pro_colors_live_update( 'header_8_button_hover_color', '.header-layout-8 .vertical-menu-wrapper .vertical-menu-button:hover', 'color' );
		woostify_pro_colors_live_update( 'header_8_icon_color', '.header-layout-8 .woostify-total-price, .header-layout-8 .tools-icon', 'color' );
		woostify_pro_colors_live_update( 'header_8_icon_hover_color', '.site-header.header-layout-8 .tools-icon:hover, .header-layout-8 .tools-icon.my-account:hover > a, .header-layout-8 .site-tools .tools-icon:hover .woostify-svg-icon', 'color' );
		woostify_pro_colors_live_update( 'header_8_content_right_text_color', '.header-layout-8 .content-top-right *', 'color' );

		// STICKY HEADER.
		woostify_pro_colors_live_update( 'sticky_header_background_color', '.has-sticky-header .site-header-inner.fixed', 'background-color' );
		woostify_pro_colors_live_update( 'sticky_header_border_color', '.has-sticky-header .site-header-inner.fixed', 'border-bottom-color' );

		// Quickview Hover.
		woostify_pro_colors_live_update( 'shop_product_quick_view_bg_hover', '.quick-view-with-text.product-quick-view-btn:hover, .product-loop-action .quick-view-with-icon:hover', 'background-color' );
		woostify_pro_colors_live_update( 'shop_product_quick_view_c_hover', '.quick-view-with-text.product-quick-view-btn:hover, .product-loop-action .quick-view-with-icon:hover', 'color' );

		// Quickview.
		woostify_pro_colors_live_update( 'shop_product_quick_view_background', '.quick-view-with-text.product-quick-view-btn, .product-loop-action .quick-view-with-icon', 'background-color' );
		woostify_pro_colors_live_update( 'shop_product_quick_view_color', '.quick-view-with-text.product-quick-view-btn, .product-loop-action .quick-view-with-icon', 'color' );

		// Compare Hover.
		woostify_pro_colors_live_update( 'shop_product_compare_bg_hover', '.compare-with-text.product-compare-btn:hover, .product-loop-action .product-compare-btn:hover', 'background-color' );
		woostify_pro_colors_live_update( 'shop_product_compare_c_hover', '.compare-with-text.product-compare-btn:hover, .product-loop-action .product-compare-btn:hover', 'color' );

		// Compare.
		woostify_pro_colors_live_update( 'shop_product_compare_background', '.compare-with-text.product-compare-btn, .product-loop-action .product-compare-btn', 'background-color' );
		woostify_pro_colors_live_update( 'shop_product_compare_color', '.compare-with-text.product-compare-btn, .product-loop-action .product-compare-btn', 'color' );

		// Button Buy Now Hover.
		woostify_pro_colors_live_update( 'shop_single_background_hover', '.woostify-buy-now.button:hover', 'background-color' );
		woostify_pro_colors_live_update( 'shop_single_color_hover', '.woostify-buy-now.button:hover', 'color' );

		// Button Buy Now.
		woostify_pro_colors_live_update( 'shop_single_background_buynow', '.woostify-buy-now.button', 'background-color' );
		woostify_pro_colors_live_update( 'shop_single_color_button_buynow', '.woostify-buy-now.button', 'color' );

		// UNIT LIVE UPDATE.
		woostify_pro_unit_live_update( 'sticky_header_border_width', '.has-sticky-header .site-header-inner.fixed', 'border-bottom-width', 'px' );
		woostify_pro_unit_live_update( 'shop_single_border_radius_buynow', '.woostify-buy-now.button', 'border-radius', 'px' );
		woostify_pro_unit_live_update( 'shop_product_quick_view_radius', '.quick-view-with-text.product-quick-view-btn', 'border-radius', 'px' );
		woostify_pro_unit_live_update( 'shop_product_quick_view_radius', '.product-quick-view-btn.quick-view-with-icon, .product-loop-action .quick-view-with-icon', 'border-radius', 'px' );
		woostify_pro_unit_live_update( 'shop_product_compare_radius', '.compare-with-text.product-compare-btn', 'border-radius', 'px' );
		woostify_pro_unit_live_update( 'shop_product_compare_radius', '.product-compare-btn.compare-with-icon, .product-loop-action .product-compare-btn', 'border-radius', 'px' );

		// Compare count colors.
		wp.customize( 'woostify_setting[header_count_color]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.site-tools .compare-item-count' ).css( 'color', newval );
			});
		});
		wp.customize( 'woostify_setting[header_count_background_color]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.site-tools .compare-item-count' ).css( 'background-color', newval );
			});
		});
		wp.customize( 'woostify_setting[header_transparent_count_background]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.has-header-transparent .compare-item-count' ).css( 'background-color', newval );
			});
		});

		// Return to Shop button colors.
		wp.customize( 'woostify_setting[button_text_color]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.woostify-compare-return-shop-btn, .compare-product-add-to-cart .button, .compare-product-add-to-cart .added_to_cart' ).css( 'color', newval );
			});
		});
		wp.customize( 'woostify_setting[button_background_color]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.woostify-compare-return-shop-btn, .compare-product-add-to-cart .button, .compare-product-add-to-cart .added_to_cart' ).css( 'background-color', newval );
			});
		});
		wp.customize( 'woostify_setting[buttons_border_radius]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.woostify-compare-return-shop-btn, .compare-product-add-to-cart .button, .compare-product-add-to-cart .added_to_cart' ).css( 'border-radius', newval + 'px' );
			});
		});
		wp.customize( 'woostify_setting[button_hover_background_color]', function( value ) {
			value.bind( function( newval ) {
				var id = 'woostify_compare_button_hover_bg';
				var selector = '.woostify-compare-return-shop-btn:hover, .compare-product-add-to-cart .button:hover, .compare-product-add-to-cart .added_to_cart:hover';
				var css = selector + '{ background-color: ' + newval + '; }';
				if ( jQuery( 'style#' + id ).length ) {
					jQuery( 'style#' + id ).html( css );
				} else {
					jQuery( 'head' ).append( '<style id="' + id + '">' + css + '</style>' );
				}
			});
		});
		wp.customize( 'woostify_setting[button_hover_text_color]', function( value ) {
			value.bind( function( newval ) {
				var id = 'woostify_compare_button_hover_color';
				var selector = '.woostify-compare-return-shop-btn:hover, .compare-product-add-to-cart .button:hover, .compare-product-add-to-cart .added_to_cart:hover';
				var css = selector + '{ color: ' + newval + '; }';
				if ( jQuery( 'style#' + id ).length ) {
					jQuery( 'style#' + id ).html( css );
				} else {
					jQuery( 'head' ).append( '<style id="' + id + '">' + css + '</style>' );
				}
			});
		});

		// Shop archive title color and size.
		wp.customize( 'woostify_setting[shop_page_product_title_color]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.compare-product-title' ).css( 'color', newval );
			});
		});
		wp.customize( 'woostify_setting[shop_page_product_title_font_size]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.compare-product-title' ).css( 'font-size', newval + 'px' );
			});
		});
		wp.customize( 'woostify_setting[shop_page_product_title_tablet_font_size]', function( value ) {
			value.bind( function( newval ) {
				var id = 'woostify_compare_title_tablet_size';
				var css = '@media (min-width: 321px) and (max-width: 768px) { .compare-product-title { font-size: ' + newval + 'px; } }';
				if ( jQuery( 'style#' + id ).length ) {
					jQuery( 'style#' + id ).html( css );
				} else {
					jQuery( 'head' ).append( '<style id="' + id + '">' + css + '</style>' );
				}
			});
		});
		wp.customize( 'woostify_setting[shop_page_product_title_mobile_font_size]', function( value ) {
			value.bind( function( newval ) {
				var id = 'woostify_compare_title_mobile_size';
				var css = '@media (max-width: 320px) { .compare-product-title { font-size: ' + newval + 'px; } }';
				if ( jQuery( 'style#' + id ).length ) {
					jQuery( 'style#' + id ).html( css );
				} else {
					jQuery( 'head' ).append( '<style id="' + id + '">' + css + '</style>' );
				}
			});
		});

		// Shop archive price color and size.
		wp.customize( 'woostify_setting[shop_page_product_price_color]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.compare-product-price, .compare-product-price .amount, .compare-product-price ins .amount' ).css( 'color', newval );
			});
		});
		wp.customize( 'woostify_setting[shop_page_product_price_font_size]', function( value ) {
			value.bind( function( newval ) {
				jQuery( '.compare-product-price, .compare-product-price .amount, .compare-product-price ins .amount' ).css( 'font-size', newval + 'px' );
			});
		});
		wp.customize( 'woostify_setting[shop_page_product_price_tablet_font_size]', function( value ) {
			value.bind( function( newval ) {
				var id = 'woostify_compare_price_tablet_size';
				var css = '@media (min-width: 321px) and (max-width: 768px) { .compare-product-price, .compare-product-price .amount, .compare-product-price ins .amount { font-size: ' + newval + 'px; } }';
				if ( jQuery( 'style#' + id ).length ) {
					jQuery( 'style#' + id ).html( css );
				} else {
					jQuery( 'head' ).append( '<style id="' + id + '">' + css + '</style>' );
				}
			});
		});
		wp.customize( 'woostify_setting[shop_page_product_price_mobile_font_size]', function( value ) {
			value.bind( function( newval ) {
				var id = 'woostify_compare_price_mobile_size';
				var css = '@media (max-width: 320px) { .compare-product-price, .compare-product-price .amount, .compare-product-price ins .amount { font-size: ' + newval + 'px; } }';
				if ( jQuery( 'style#' + id ).length ) {
					jQuery( 'style#' + id ).html( css );
				} else {
					jQuery( 'head' ).append( '<style id="' + id + '">' + css + '</style>' );
				}
			});
		});
	}
);
