var x = document.getElementById('ff_8_dropdown'); //Get the form element
const optionsList = []; //Array that will store options data

/** 
  * Iterates on each option, gets the value and data-calc_value generated by fluentforms.
  * The reason for this is when choices.js is used on the select element, the data-calc_value
  * is removed and only the value is retained. 
  * 
  */
for( let i=0; i < x.length; i++ ) {
    var tempObj = {
        value: x.options[i].getAttribute('value'),
        calcValue: x.options[i].getAttribute('data-calc_value'),
    }
    optionsList.push(tempObj);
    }
    /**
      * Gets the choices.js script using CDN. 
      * 
      * Then Converts the select element using choices.js plugin. Customized it so that we can use the 
      * data-calc_value option of fluent forms.
      */
$.getScript("https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js", function(){
     const choices = new Choices(x, {
      callbackOnCreateTemplates: function(template) {
       return {
        choice: ({ classNames }, data) => {
                const val = data.value;
                const calcValue = getCalcValue(val);
                const color = getColor( parseInt( calcValue ) );
                /**
                 * This returns the default template used by choices.js. 
                 * Only the {$color} attribute is added for the custom color of the option.
                 * The rest are default.
                 */ 
                return template(`
                  <div class="${classNames.item} ${classNames.itemChoice} ${
                  data.disabled ? classNames.itemDisabled : classNames.itemSelectable
                } ${color}" data-select-text="${this.config.itemSelectText}" data-choice ${
                  data.disabled
                    ? 'data-choice-disabled aria-disabled="true"'
                    : 'data-choice-selectable'
                } data-id="${data.id}" data-value="${data.value}" ${
                  data.groupId > 0 ? 'role="treeitem"' : 'role="option"'
                }>
                     ${data.label}
                  </div>
                `);
              },
            };
          },
     });

     /**
      * Compares the value from the optionsList and the one generated in choices.js. If equal, returns
      * the data-calc_value of the option.
      */
     function getCalcValue( val ) {
      var length = optionsList.length;
      for( let x = 0; x < optionsList.length; x++ ){
        if( val === optionsList[x].value ){
          return optionsList[x].calcValue;
        }
      }
    }
    /**
     * Uses the data-calc_value to identify the color of the option field.
     * Returns a custom class name that will be used to identify the color of the option field using CSS.
     */
    function getColor( calcValue ){
      switch( calcValue ) {
        case 1:
          return 'option_blue';
        case 2:
          return 'option_green';
        case 3:
          return 'option_red';
      }
    }
     
});