text: "main";_789‍.x([["default",()=>ProductDetails]]);let React,Fragment;_789‍.w("react",[["default",["React"],function(v){React=v}],["Fragment",["Fragment"],function(v){Fragment=v}]]);let NavLink;_789‍.w("react-router-dom",[["NavLink",["NavLink"],function(v){NavLink=v}]]);let helper;_789‍.w("../../lib/helper",[["*",null,function(v){helper=v}]]);let themeSettings,text;_789‍.w("../../lib/settings",[["themeSettings",["themeSettings"],function(v){themeSettings=v}],["text",["text"],function(v){text=v}]]);let Disqus;_789‍.w("../comments/disqus",[["default",["Disqus"],function(v){Disqus=v}]]);let ViewedProducts;_789‍.w("../products/viewed",[["default",["ViewedProducts"],function(v){ViewedProducts=v}]]);let Breadcrumbs;_789‍.w("./breadcrumbs",[["default",["Breadcrumbs"],function(v){Breadcrumbs=v}]]);let DiscountCountdown;_789‍.w("./discountCountdown",[["default",["DiscountCountdown"],function(v){DiscountCountdown=v}]]);let AddToCartButton;_789‍.w("./addToCartButton",[["default",["AddToCartButton"],function(v){AddToCartButton=v}]]);let Attributes;_789‍.w("./attributes",[["default",["Attributes"],function(v){Attributes=v}]]);let Gallery;_789‍.w("./gallery",[["default",["Gallery"],function(v){Gallery=v}]]);let Options;_789‍.w("./options",[["default",["Options"],function(v){Options=v}]]);let Price;_789‍.w("./price",[["default",["Price"],function(v){Price=v}]]);let Quantity;_789‍.w("./quantity",[["default",["Quantity"],function(v){Quantity=v}]]);let RelatedProducts;_789‍.w("./relatedProducts",[["default",["RelatedProducts"],function(v){RelatedProducts=v}]]);let Tags;_789‍.w("./tags",[["default",["Tags"],function(v){Tags=v}]]);
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  const Description = ({ description }) => React.createElement('div', {
  	className: 'product-content',
  	dangerouslySetInnerHTML: { __html: description }
  });
  
                 class ProductDetails extends React.Component {
  	constructor(props) {
  		super(props);
  
  		this.setQuantity = quantity => {
  			this.setState({ quantity: quantity });
  		};
  
  		this.state = {
  			selectedOptions: {},
  			selectedVariant: null,
  			isAllOptionsSelected: false,
  			quantity: 1
  		};
  
  		this.onOptionChange = this.onOptionChange.bind(this);
  		this.findVariantBySelectedOptions = this.findVariantBySelectedOptions.bind(this);
  		this.addToCart = this.addToCart.bind(this);
  		this.checkSelectedOptions = this.checkSelectedOptions.bind(this);
  	}
  
  	onOptionChange(optionId, valueId) {
  		let { selectedOptions } = this.state;
  
  		if (valueId === '') {
  			delete selectedOptions[optionId];
  		} else {
  			selectedOptions[optionId] = valueId;
  		}
  
  		this.setState({ selectedOptions: selectedOptions });
  		this.findVariantBySelectedOptions();
  		this.checkSelectedOptions();
  	}
  
  	findVariantBySelectedOptions() {
  		const { selectedOptions } = this.state;
  		const { product } = this.props;
  		for (const variant of product.variants) {
  			const variantMutchSelectedOptions = variant.options.every(variantOption => selectedOptions[variantOption.option_id] === variantOption.value_id);
  			if (variantMutchSelectedOptions) {
  				this.setState({ selectedVariant: variant });
  				return;
  			}
  		}
  
  		this.setState({ selectedVariant: null });
  	}
  
  	addToCart() {
  		const { product, addCartItem } = this.props;
  		const { selectedVariant, quantity } = this.state;
  
  		let item = {
  			product_id: product.id,
  			quantity: quantity
  		};
  
  		if (selectedVariant) {
  			item.variant_id = selectedVariant.id;
  		}
  
  		addCartItem(item);
  	}
  
  	checkSelectedOptions() {
  		const { selectedOptions } = this.state;
  		const { product } = this.props;
  
  		const allOptionsSelected = Object.keys(selectedOptions).length === product.options.length;
  		this.setState({ isAllOptionsSelected: allOptionsSelected });
  	}
  
  	render() {
  		const { product, settings, categories } = this.props;
  		const { selectedVariant, isAllOptionsSelected } = this.state;
  		const maxQuantity = product.stock_status === 'discontinued' ? 0 : product.stock_backorder ? themeSettings.maxCartItemQty : selectedVariant ? selectedVariant.stock_quantity : product.stock_quantity;
  
  		if (product) {
  			return React.createElement(
  				Fragment,
  				null,
  				React.createElement(
  					'section',
  					{ className: 'section section-product' },
  					React.createElement(
  						'div',
  						{ className: 'container' },
  						React.createElement(
  							'div',
  							{ className: 'columns' },
  							React.createElement(
  								'div',
  								{ className: 'column is-7' },
  								themeSettings.show_product_breadcrumbs && React.createElement(Breadcrumbs, { product: product, categories: categories }),
  								React.createElement(Gallery, { images: product.images })
  							),
  							React.createElement(
  								'div',
  								{ className: 'column is-5' },
  								React.createElement(
  									'div',
  									{ className: 'content' },
  									React.createElement(Tags, { tags: product.tags }),
  									React.createElement(
  										'h1',
  										{ className: 'title is-4 product-name' },
  										product.name
  									),
  									React.createElement(Price, {
  										product: product,
  										variant: selectedVariant,
  										isAllOptionsSelected: isAllOptionsSelected,
  										settings: settings
  									}),
  									themeSettings.show_discount_countdown && product.on_sale === true && React.createElement(DiscountCountdown, { product: product }),
  									React.createElement(Options, {
  										options: product.options,
  										onChange: this.onOptionChange
  									}),
  									React.createElement(Quantity, {
  										maxQuantity: maxQuantity,
  										onChange: this.setQuantity
  									}),
  									React.createElement(
  										'div',
  										{ className: 'button-addtocart' },
  										React.createElement(AddToCartButton, {
  											product: product,
  											variant: selectedVariant,
  											addCartItem: this.addToCart,
  											isAllOptionsSelected: isAllOptionsSelected
  										})
  									)
  								)
  							)
  						)
  					)
  				),
  				React.createElement(
  					'section',
  					{ className: 'section section-product-description' },
  					React.createElement(
  						'div',
  						{ className: 'container' },
  						React.createElement(
  							'div',
  							{ className: 'content' },
  							React.createElement(
  								'div',
  								{ className: 'columns' },
  								React.createElement(
  									'div',
  									{ className: 'column is-7' },
  									React.createElement(Description, { description: product.description })
  								),
  								React.createElement(
  									'div',
  									{ className: 'column is-5' },
  									React.createElement(Attributes, { attributes: product.attributes })
  								)
  							)
  						)
  					)
  				),
  				React.createElement(RelatedProducts, {
  					settings: settings,
  					addCartItem: this.addToCart,
  					ids: product.related_product_ids,
  					limit: 10
  				}),
  				themeSettings.show_viewed_products && React.createElement(ViewedProducts, {
  					settings: settings,
  					addCartItem: this.addToCart,
  					product: product,
  					limit: themeSettings.limit_viewed_products || 4
  				}),
  				themeSettings.disqus_shortname && themeSettings.disqus_shortname !== '' && React.createElement(
  					'section',
  					{ className: 'section' },
  					React.createElement(
  						'div',
  						{ className: 'container' },
  						React.createElement(Disqus, {
  							shortname: themeSettings.disqus_shortname,
  							identifier: product.id,
  							title: product.name,
  							url: product.url
  						})
  					)
  				)
  			);
  		} else {
  			return null;
  		}
  	}
  }