/*
    Author: Adrian Arellano
    Filename: selectize.js
    Description: This is to initialize the selectize.js and also be able to pass options to it
    Dependecies: 
        -selectize.js
    How to use:
        1. Create a new Object that extends the existing object and call the utility by doing this
        2. newObjectName.init({}) then pass an object to specify the target and to override some of the default options 
    Note: the selectized field must be always inside the .js-multi-tag parent 
*/

;(function($) {
  "use strict"

  B2C.selectize = {
    init: function(option) {
      // initializes the selectize
      this._default = {
        target: ".js-selectize",
        parent: ".js-multi-tag",
        deselect: "span",
        config: {
          maxItems: null, //specify no of max items allowed
          delimeter: ",",
          persist: false, //allows to save added items created in the option list
          openOnFocus: true, //shows the options available in the selectize field on the dropdown
          create: false // allows to create new items
        }
      }

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

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

      //initializes the selectize and passed options to it
      $(this._option.target).selectize(this._option.config)

      this.eventListner()
    },

    eventListner: function() {
      let self = this

      $(this._option.target).on("click", this._option.deselect, function() {
        self.removeTagItem(self, this)
      })
    },

    removeTagItem: function(self, element) {
      if (
        $(element)
          .parent()
          .hasClass("active")
      ) {
        let selectedItem = $(element)
            .parent()
            .data("value"),
          //this part is to locate the specific selectize field parent of that selected active item
          parent = $(element)
            .parents(self._option.parent)
            .find(self._option.target)

        parent[0].selectize.removeItem(selectedItem)
        parent[0].selectize.close()
        parent[0].selectize.refreshItems()
        parent[0].selectize.refreshOptions()
      }
    }
  }

  const inputSelectize = Object.create(B2C.selectize)
  const selectorSelectize = Object.create(B2C.selectize)
  const inputSelectize2 = Object.create(B2C.selectize)

  inputSelectize.init({
    target: ".js-selectize-input",
    config: {
      placeholder: "Please Select",
      options: [
        { value: "Musician", text: "Musician" },
        { value: "Corporate", text: "Corporate" },
        { value: "Retail Destination", text: "Retail Destination" },
        { value: "Broadcast TV", text: "Broadcast TV" },
        { value: "Consumer Audio", text: "Consumer Audio" },
        { value: "Convention Centers", text: "Convention Centers" },
        { value: "Higher Education", text: "Higher Education" },
        { value: "Residential Audio", text: "Residential Audio" },
        { value: "Stadiums and Arenas", text: "Stadiums and Arenas" },
        { value: "Transportation", text: "Transportation" },
        { value: "Government", text: "Government" },
        { value: "Live Portable Sound", text: "Live Portable Sound" },
        { value: "Broadcast Radio", text: "Broadcast Radio" },
        { value: "Bars & Restaurants", text: "Bars & Restaurants" },
        { value: "K12 & Primary", text: "K12 & Primary" },
        { value: "Cinema", text: "Cinema" },
        { value: "Touring", text: "Touring" },
        { value: "Hotels", text: "Hotels" },
        { value: "Performance Spaces", text: "Performance Spaces" },
        { value: "Worship", text: "Worship" },
        { value: "E-Sports", text: "E-Sports" },
        { value: "Themed Attractions", text: "Themed Attractions" },
        { value: "Healthcare", text: "Healthcare" },
        { value: "Museums", text: "Museums" },
        { value: "Gaming", text: "Gaming" },
        { value: "Nightlife", text: "Nightlife" },
        { value: "Recording", text: "Recording" },
        { value: "DJ & Production", text: "DJ & Production" },
        { value: "KTV", text: "KTV" },
        { value: "Casinos", text: "Casinos" },
        { value: "Broadcast Internet", text: "Broadcast Internet" },
        { value: "Cruise Ships", text: "Cruise Ships" },
        { value: "Brand Manufacturers", text: "Brand Manufacturers" },
        {
          value: "Electronic Manufacturing Services (EMS)",
          text: "Electronic Manufacturing Services (EMS)"
        },
        {
          value: "Electronic Component Distributors",
          text: "Electronic Component Distributors"
        }
      ],
      create: function(input) {
        return {
          value: input,
          text: input
        }
      },
      // allows the modification of items
      render: {
        item: function(item, escape) {
          return item.value
            ? `<div>${escape(
                item.text
              )}<span class="remove"><div class="close"><div class="icon"></div></div></span></div>`
            : ""
        }
      }
    }
  })

  selectorSelectize.init({
    target: ".js-selectize-selector",
    config: {
      sortField: "text",
      openOnFocus: true,
      maxItems: 1
    }
  })

  inputSelectize2.init({
    target: ".js-selectize-input2",
    create: false,
    config: {
      sortField: "text",
      options: [
        { title: "op", value: 1, text: "Luffy" },
        { title: "op", value: 2, text: "Sanji" },
        { title: "hh", value: 3, text: "Gon" },
        { title: "hh", value: 4, text: "Killua" }
      ],
      optgroups: [
        { value: "op", label: "One Piece" },
        { value: "hh", label: "Hunter x Hunter" }
      ],
      optgroupField: "title",
      labelField: "text",
      searchField: ["text"],
      create: function(input) {
        return {
          value: input,
          text: input
        }
      },
      render: {
        item: function(item, escape) {
          return item.value
            ? `<div>${escape(
                item.text
              )}<span class="remove"><div class="close"><div class="icon"></div></div></span></div>`
            : ""
        }
      }
    }
  })
})(jQuery)
