(function ($, $sl, $baseUrl) {
	const pluginName = 'slProductsList'
	const main = {}
	main.init = async function (options) {
		const $targets = this
		var count = 0;
		for (let i = 0; i < $targets.length; i++) {
			options = $.extend(true, {}, $.fn[pluginName].defaults, typeof options == 'object' && options)
			const $self = $($targets[i])
			let data = $self.data(pluginName)
			if (data) {
				return
			}
			data = {
				options: options
			}
			$self.data(pluginName, data)
			$self.attr(pluginName, '')
			var result = await main.plot.apply($targets[i])
			count = result.count;
		}
		return count
	}
	main.destroy = function () {
		const $self = $(this)
		const data = $self.data(pluginName)
		if (!data)
			return $self
		$self.off(`.${pluginName}`)
		$self.removeData(pluginName)
		$self.removeAttr(pluginName)
		$self.html('')
		return $self
	}
	main.plot = async function () {
		const $self = $(this)
		$self.html(main.templates.loading)
		main.attachEvents.apply(this)
		return await main.request.apply(this)
	}
	main.request = async function () {
		const $self = $(this)
		const options = $self.data(pluginName).options

		return await $sl.services.request.get({ url: `${$baseUrl}Products/List`, data: options.filters })
			.done((data) => main.plotProduct.apply(this, [data.listProducts]))
			.always(() => $self.find(`.${pluginName}-loading`).remove())
	}
	main.plotProduct = async function (data) {
		const $self = $(this)
		for (let i = 0; i < data.length; i++) {
			const item = data[i]
			const balance = item.balances.map(x => x.balance).reduce((a, b) => a + b, 0)
			const imageUrl = $sl.services.browsers.isSafari() ? item.iconUrlJpeg : item.iconUrlWebp
			const settings = await $sl.services.getStoreSettings()
			if (item.type == 2 || item.type == 4) { //tipo variável ou pizza
				var htmlTemplates = main.templates.variableProduct
					.replace(/{{priceOrUnavailability}}/gi, balance > 0 ? item.price ? main.templates.priceProduct : main.templates.noProductPrince : main.templates.noBalanceProduct)
					.replace(/{{cashback}}/gi, item.cashbackPercent > 0 ? main.templates.cashback.replace(/{{cashbackPercent}}/gi, `${item.cashbackPercent.toLocaleString('pt-BR')}%`) : '')
					.replace(/{{viewUrl}}/gi, `${$baseUrl}Produto/${item.id}`)
					.replace(/{{iconUrl}}/gi, imageUrl ? `url(${imageUrl})` : 'url(\'/assets/images/nophoto.png\')')
					.replace(/{{name}}/gi, item.name)
					.replace(/{{code}}/gi, item.code)
					.replace(/{{color}}/gi, settings.layout.current == 0 ? 'dimgray' : 'var(--theme-main-font-color)')
					.replace(/{{buyOrQuote}}/gi, item.price ? 'Comprar' : 'Cotar')
			}
			else {
				var htmlTemplates = main.templates.product
				.replace(/{{priceOrUnavailability}}/gi, balance > 0 ? item.price ? main.templates.priceProduct : main.templates.noProductPrince : main.templates.noBalanceProduct)
				.replace(/{{cashback}}/gi, item.cashbackPercent > 0 ? main.templates.cashback.replace(/{{cashbackPercent}}/gi, `${item.cashbackPercent.toLocaleString('pt-BR')}%`) : '')
				.replace(/{{viewUrl}}/gi, `${$baseUrl}Produto/${item.id}`)
				.replace(/{{iconUrl}}/gi, imageUrl ? `url(${imageUrl})` : 'url(\'/assets/images/nophoto.png\')')
				.replace(/{{name}}/gi, item.name)
				.replace(/{{code}}/gi, item.code)
				.replace(/{{color}}/gi, settings.layout.current == 0 ? 'dimgray' : 'var(--theme-main-font-color)')
				.replace(/{{showPrice}}/gi, item.price ? 'inline-block' : 'none')
				.replace(/{{buyOrQuote}}/gi, item.price ? 'Comprar' : 'Cotar')
			}

			const html = htmlTemplates;
			
			let $html = $(html)
			if (item.price) {
				$html = $(html
					.replace(/{{priceWithoutDiscount}}/gi, item.price.priceWithoutDiscount ? item.price.priceWithoutDiscount.money() : null)
					.replace(/{{discount}}/gi, item.price.discount ? Math.floor(item.price.discount) : 0)
					.replace(/{{price}}/gi, item.price.price.money())
					.replace(/{{installmentAmount}}/gi, item.price.installmentAmount)
					.replace(/{{installmentPrice}}/gi, item.price.installmentPrice ? item.price.installmentPrice.money() : null))

				if (!item.price.installmentAmount || !item.price.installmentPrice)
					$html.find('[name=installment]').hide()

				if (!item.price.discount || (item.price.discount < 0.1))
					$html.find('[name=discount]').hide()

				if (item.type != 2 && item.type != 4)
					$html.find('[name=minimum-price]').hide()

				if (item.type == 2 || item.type == 4 || balance <= 0)
					$html.find('[name=controls]').hide()
			}else if(balance <= 0){
				$html.find('[name=add-to-cart]').hide()
				$html.find('[name=buy]').hide()
			}

			if (settings.showProductCode == false)
				$html.find('[name=code]').hide()

			$html.data('id', item.id)
			$self.append($html)
		}
	}
	main.attachEvents = function () {
		const $self = $(this)
		const suffix = `.sl.${pluginName}`
		$self.off(suffix)

		$self.on(`click${suffix}`, '[name=add-to-cart]', main.events.ocClickAddToCart)
		$self.on(`click${suffix}`, '[name=buy]', main.events.onClickBuy)
	}
	main.events = {
		ocClickAddToCart: function (e) {
			e.preventDefault()
			const $product = $(this).closest('[name=product]')
			$sl.apps.shoppingCart.addProduct($product.data('id'))
			$sl.apps.shoppingCart.showModal()
		},
		onClickBuy: async function (e) {
			e.preventDefault()
			const $product = $(this).closest('[name=product]')
			$sl.apps.shoppingCart.setProduct($product.data('id'))
			await $sl.apps.shoppingCart.getProducts()
			window.location = `${$baseUrl}Vendas/FinalizarPedido/Entrega`
		}
	}
	main.templates = {
		loading: `
    <div class="${pluginName}-loading">
      <i class="fa fa-spinner fa-pulse"></i>
    </div>`,
		priceProduct: `
    <div id="showPrices" style="display: {{showPrice}}">
      <p name="minimum-price" class="minimum-price">A partir de</p>
      <p class="priceBefore" name="discount">{{priceWithoutDiscount}} <span class="tag fa fa-arrow-down">-{{discount}}%</span></p>
      <div class="product-price">
        <p class="price">{{price}} <span name="installment">à vista ou</span></p>
        <p class="parcel" name="installment">{{installmentAmount}}x de <b>{{installmentPrice}}</b></p>
      </div>
    </div>`,
		noBalanceProduct: '<p class="indisponivel">Indisponível</p>',
		noProductPrince: '<p class="indisponivel">Sob Consulta</p>',
		product: `
    <a class="bgProduct" href="{{viewUrl}}" name="product">
      <div class="bgImage">
        <div class="image" style="background-image: {{iconUrl}}"></div>
      </div>
      <div class="contentProduct">
        <div>
            <h5 class="product-name" title="{{name}}">{{name}}</h5>
            <h6 style="color:{{color}}" name="code">Ref: {{code}}</h6>             
        </div>
         {{priceOrUnavailability}}
      </div>
      {{cashback}}
      <div class="controls" name="controls">
        <button type="button" name="buy" id="buy">{{buyOrQuote}}</button>
        <button type="button" title="Adicionar ao Carrinho" name="add-to-cart">
          <i class="fa fa-cart-plus"></i>
        </button>
      </div>
    </a>`,
		variableProduct: `
	<a class="bgProduct" href="{{viewUrl}}" name="product">
		  <div class="bgImage" >
			<div class="image" style="background-image: {{iconUrl}}"></div>
		  </div>
		  <div class="contentProduct">
			<div>
				<h5 class="product-name">{{name}}</h5>
				<h6 style="color:{{color}}" name="code">Ref: {{code}}</h6>             
			</div>
			 {{priceOrUnavailability}}
		  </div>
		  {{cashback}}
		  <div class="controls">
			<button type="button" title="Selecionar Variação" style="border-radius: 5px">
			  <i class="fa fa-cart-plus" disabled></i>
			</button>
		  </div>
	</a>`,
		cashback: '<div class="cashback"><p>Oferta de {{cashbackPercent}} de Cashback</p></div>'
	}
	const pb = {
		init: main.init,
		destroy: main.destroy,
		count: main.count
	}
	$.fn[pluginName] = async function (method) {
		if (typeof pb[method] == 'function') {
			return await pb[method].apply(this, Array.prototype.slice.call(arguments, 1))
		} else if (typeof pb[method] != 'undefined') {
			return pb[method]
		} else if (typeof method === 'object' || !method) {
			return await pb.init.apply(this, arguments)
		} else {
			throw $.error(`Method ${method} does not exist on jQuery.${pluginName}`)
		}
	}
	$.fn[pluginName].defaults = {}
})(window.jQuery, window.$sl, window.$baseUrl)