/*
	Author: Jeremy Espinosa
	Filename: productFeatures.js
	Description: 
	Dependencies: 
	How to use:
*/

;(function($) {
    'use strict'

    B2C.productFeatures = {
        init: function(option) {
            this._default = {
                target: '.js-product-features',
                colorPicker: '.js-colorpicker'
            }

            this._option = $.extend(true, this._default, option)

            if (!$(this._option.target).length) return

            // onload
            this.onloadTemplate()
            this.eventListener()
        },

        eventListener: function() {
            const self = this

            $(document).on(
                'click',
                `${this._option.target} ${this._option.colorPicker} li`,
                function() {
                    self.reloadTemplate(self, this)
                }
            )
        },

        onloadTemplate: function() {
            // render slider template
            this.renderTemplate({
                url: $(this._option.target).data('slider-json'),
                target: '#js-slider-template',
                container: '.js-slider-hb-container',
                wrapper: '.js-slider-hb-wrapper',
                callback: function() {
                    // re intiialize to use the generated to target the element of color picker
                    B2C.colorPicker.init({})
                    B2C.zoom.init()
                    B2C.slick.init({
                        target: '.js-product-feature-slick',
                        config: {
                            dots: false,
                            infinite: false
                        }
                    })
                }
            })

            // render feature template
            this.renderTemplate({
                url: $(this._option.target).data('feature-json'),
                target: '#js-feature-template',
                container: '.js-feature-hb-container',
                wrapper: '.js-feature-hb-wrapper'
            })

            // render marketing copy template
            this.renderTemplate({
                url: $(this._option.target).data('marketing-json'),
                target: '#js-marketing-template',
                container: '.js-marketing-hb-container',
                wrapper: '.js-marketing-hb-wrapper',
                callback: function() {
                    B2C.textToggle.init()
                }
            })

            // render rate template
            this.renderTemplate({
                url: $(this._option.target).data('rate-json'),
                target: '#js-rate-template',
                container: '.js-rate-hb-container',
                wrapper: '.js-rate-hb-wrapper'
            })

            // render specifications template
            this.renderTemplate({
                url: $(this._option.target).data('specifications-json'),
                target: '#js-specifications-template',
                container: '.js-specifications-container',
                wrapper: '.js-specifications-wrapper'
            })
        },

        reloadTemplate: function(self, element) {
            self.renderTemplate({
                url: $(element).data('slider-json'),
                target: '#js-slider-template',
                container: '.js-slider-hb-container',
                wrapper: '.js-slider-hb-wrapper',
                extraData: {
                    colorPickerIndex: $(element).index()
                },
                callback: function() {
                    // re intiialize to use the generated to target the element of color picker
                    B2C.colorPicker.init()
                    B2C.zoom.init()
                    B2C.slick.init({
                        target: '.js-product-feature-slick',
                        config: {
                            dots: false,
                            infinite: false
                        }
                    })
                }
            })

            // render feature template
            self.renderTemplate({
                url: $(element).data('feature-json'),
                target: '#js-feature-template',
                container: '.js-feature-hb-container',
                wrapper: '.js-feature-hb-wrapper'
            })

            // render marketing copy template
            this.renderTemplate({
                url: $(element).data('marketing-json'),
                target: '#js-marketing-template',
                container: '.js-marketing-hb-container',
                wrapper: '.js-marketing-hb-wrapper',
                callback: function() {
                    B2C.textToggle.init()
                }
            })

            // render rate template
            this.renderTemplate({
                url: $(element).data('rate-json'),
                target: '#js-rate-template',
                container: '.js-rate-hb-container',
                wrapper: '.js-rate-hb-wrapper'
            })

            // render rate template
            this.renderTemplate({
                url: $(element).data('specifications-json'),
                target: '#js-specifications-template',
                container: '.js-specifications-container',
                wrapper: '.js-specifications-wrapper'
            })
        },

        renderTemplate: async function(args) {
            let handlebarTemplate = Object.create(B2C.handlebar),
                data = await this.getData(args.url)

            handlebarTemplate.init({
                target: args.target,
                container: args.container,
                wrapper: args.wrapper,
                data: $.extend(true, data, args.extraData || {})
            })

            // check if there is a callback if have run it
            if ($.isFunction(args.callback)) args.callback()
        },

        getData: async function(url) {
            return new Promise(resolve => {
                $.ajax({
                    url,
                    dataType: 'json',
                    success: function(data) {
                        resolve(data)
                    }
                })
            })
        },

        hasParsed: function(data) {
            if (data && typeof data === 'string') return false

            return true
        }
    }

    B2C.productFeatures.init()
})(jQuery)
