/*
	Author: Jeremy Espinosa
	Filename: htmlTemplate.js
	Description: List of html template
	Dependencies: 
	How to use: 
*/

;(function($) {
    'use strict'

    B2C.htmlTemplate = {
        renderTemplate: function({
            element,
            data,
            container,
            wrapper,
            template
        }) {
            if (template === 'card-catalog') {
                this.renderCardCatalog({ element, data, container, wrapper })
            } else if (template === 'card-product') {
                this.renderCardProduct({ element, data, container, wrapper })
            }
        },

        renderCardCatalog: function({ element, data, container, wrapper }) {
            let $element = $(element),
                html = `
				<div class="card-catalog__wrapper">
					<div class="card-catalog__image-holder">
						<img src="${data.productInfo.image}" alt="">
					</div>
					<div class="card-catalog__details">
						<div class="wrapper">
							<p class="title">${data.productInfo.title}</p>
							${
                                // ===== Ratings ===== //
                                data.productInfo.rating
                                    ? `<div class="rating rating--disabled">
											<div class="rating__container">
												<input type="radio" id="star5" value="5" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star5">5 stars</label>
												<input type="radio" id="star4" value="4" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star4">4 stars</label>
												<input type="radio" id="star3" value="3" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star3">3 stars</label>
												<input type="radio" id="star2" value="2" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star2">2 stars</label>
												<input type="radio" id="star1" value="1" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star1">1 star</label>
											</div>
											<span class="rating__label">(${data.productInfo.reviews})</span>
										</div>`
                                    : ''
                            }
							
							${
                                // ===== Price ===== //
                                data.productInfo.rating
                                    ? `
										<span class="price">${data.productInfo.price}</span>
										<span class="sub-price">${data.productInfo.convertedPrice}</span>`
                                    : ''
                            }
						</div>
						<div class="wrapper">
							<div class="mobile-action">
								<p class="status">In Stock</p>
								<div class="mt-1">
									<a href="#_" class="btn btn--standard">Add to Cart</a>
									<a href="#_" class="btn btn--outline">Compare</a>
								</div>
							</div>
							<div class="desktop-action">

								${
                                    data.productInfo.brandLogo
                                        ? `<img src="${
                                              data.productInfo.brandLogo
                                          }" alt="" class="brand">`
                                        : ''
                                }
								
								${
                                    data.productInfo.hasActions
                                        ? ` <ul class="list list--inline">
												li><img src="../public/images/icons/compare.png" alt=""></li>
												<li><img src="../public/images/icons/cart.png" alt=""></li>
												<li><img src="../public/images/icons/availability.png" alt=""></li>
											</ul>`
                                        : ''
                                }
							</div>
						</div>
					</div>
				</div>`

            // re render the html base on the data
            $element
                .parents(container)
                .find(wrapper)
                .empty()
                .append(html)
        },

        renderCardProduct: function({ element, data, container, wrapper }) {
            let $element = $(element),
                html = `
					<div class="card-product__image-holder">
						<img src="${data.productInfo.image}" alt="">
					</div>
					<div class="card-product__details">
						<div class="wrapper ${!data.productInfo.price ? `wrapper--full` : ''}">
							<p class="title">${data.productInfo.title}</p>
							${
                                // ===== Ratings ===== //
                                data.productInfo.rating
                                    ? `<div class="rating rating--disabled">
											<div class="rating__container">
												<input type="radio" id="star5" value="5" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star5">5 stars</label>
												<input type="radio" id="star4" value="4" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star4">4 stars</label>
												<input type="radio" id="star3" value="3" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star3">3 stars</label>
												<input type="radio" id="star2" value="2" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star2">2 stars</label>
												<input type="radio" id="star1" value="1" ${
                                                    data.productInfo.rating == 5
                                                        ? 'checked'
                                                        : ''
                                                } />
												<label for="star1">1 star</label>
											</div>
											<span class="rating__label">(${data.productInfo.reviews})</span>
										</div>`
                                    : ''
                            }

							<ul class="list list-description ${!data.productInfo.price ? `show` : ''}">
								${data.productInfo.descriptions.map(item => {
                                    return `<li>${item}</li>`
                                })}
							</ul>
							
							${
                                // ===== Price ===== //
                                data.productInfo.price
                                    ? `<div class="price-container">
											<span class="price">${data.productInfo.price}</span>
											<span class="sub-price">${data.productInfo.convertedPrice}</span>
										</div>`
                                    : ''
                            }
							
						</div>
						
						<div class="wrapper">
							${
                                // ===== Buttons ===== //
                                data.productInfo.price
                                    ? `<div class="mobile-action">
											<p class="status">In Stock</p>
											<div class="mt-1">
												<a href="#_" class="btn btn--standard">Add to Cart</a>
												<a href="#_" class="btn btn--outline">Compare</a>
											</div>
										</div>`
                                    : ''
                            }
							${
                                // ===== Desktop Actions ===== //
                                data.productInfo.price ||
                                data.productInfo.brandLogo ||
                                data.productInfo.hasActions
                                    ? `
										<div class="desktop-action">
											${
                                                data.productInfo.price
                                                    ? `<div class="price-container">
														<p class="price">${data.productInfo.price}</p>
														<p class="sub-price">${data.productInfo.price}</p>
														</div>`
                                                    : ''
                                            }
											${
                                                data.productInfo.brandLogo
                                                    ? `<img src="${
                                                          data.productInfo
                                                              .brandLogo
                                                      }" alt="" class="brand">`
                                                    : ''
                                            }
											${
                                                data.productInfo.hasActions
                                                    ? `<ul class="list list--inline">
														<li><img src="../public/images/icons/compare.png" alt=""></li>
														<li><img src="../public/images/icons/cart.png" alt=""></li>
														<li><img src="../public/images/icons/availability.png" alt=""></li>
														</ul>`
                                                    : ''
                                            }
										</div>`
                                    : ''
                            }
						</div>
					</div>`

            // re render the html base on the data
            $element
                .parents(container)
                .find(wrapper)
                .empty()
                .append(html)
        }
    }
})(jQuery)
