/*
	Author: Jeremy Espinosa
	Filename: select.js
	Description: Customize the dropdown because using native select can't add image beside on it
	Dependencies:
		- jQuery
	How to use:
		1. Add id to the parent container
		2. Inside of the container the native select, on each of it pass it's image using data-attribute of data-image
		3. Initialize it using B2C.select.init() you can pass your own parameters here 
	Sample Usage:
		<div class="select-custom" id="js-select-language">
			<select name="languageCode" id="wew">
				<option value="uk" data-image="https://testsite.musictri.be/unified/styleguide/public/assets/img/icons_flag-uk.png">12</option>
				<option value="de" data-image="https://testsite.musictri.be/unified/styleguide/public/assets/img/icons_flag-de.png">23</option>
				<option value="jp" data-image="https://testsite.musictri.be/unified/styleguide/public/assets/img/icons_flag-jp.png">43</option>
			</select>
		</div>
*/

;(function($) {
  "use strict"

  B2C.select = {
    init: function(option) {
      this._default = {
        target: "#jsSelectLanguage",
        list: ".select-custom__list",
        view: ".select-custom__view"
      }

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

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

      this.renderList()
      this.eventListener()
    },

    eventListener: function() {
      let self = this

      $(this._option.target).on("click", this.toggleList)

      $(this._option.target).on("click", `${this._option.list} li`, function() {
        self.setSelectData(this)
        self.renderView()
      })
    },

    renderList: function() {
      let self = this,
        selectValues = self.getSelectData(),
        lists = "",
        $target = $(self._option.target)

      // render the list
      lists = '<ul class="select-custom__list">'
      selectValues.map(item => {
        lists += `<li>
					<img src="${item.image}" />
					<span>${item.text}</span>
				</li>`
      })
      lists += "</ul>"

      // add the lists to the DOM
      $target.prepend(lists)

      self.renderView()
    },

    renderView: function() {
      let selectValues = this.getSelectData(),
        selectedValue = selectValues.filter(item => item.selected === true)[0],
        selectedList = "",
        $target = $(this._option.target)

      // render selected list
      selectedList += `<div class="select-custom__view">
			  <img src="${selectedValue.image}" />
			  <span>${selectedValue.text}</span>
		  </div>`

      if ($target.find(this._option.view).length) {
        $target.find(this._option.view).remove()
        $target.prepend(selectedList)
      } else {
        $target.prepend(selectedList)
      }
    },

    getSelectData: function() {
      let $select = $(this._option.target).find("select"),
        selectValues = []

      $select.find("option").map(function() {
        selectValues.push({
          image: $(this).data("image"),
          text: $(this).text(),
          selected: $(this).is(":selected")
        })
      })

      return selectValues
    },

    toggleList: function() {
      $(this).toggleClass("active")
    },

    setSelectData: function(self) {
      let index = $(self).index(),
        $target = $(self).parents(".select-custom")

      $target
        .find("option")
        .siblings()
        .attr("selected", false)
        .eq(index)
        .attr("selected", true)
    },

    getSelectedData: function() {
      const self = this
      return self.getSelectData().filter(function(data) {
        return data.selected == true
      })
    }
  }
})(jQuery)
