“use strict”; 'use scrict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(“Cannot call a class as a function”); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (“value” in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

(function ($) {

$(document).ready(function () {
  $(document).on('click', '.chip .close', function () {
    var $this = $(this);

    if ($this.closest('.chips').data('initialized')) {
      return;
    }

    $this.closest('.chip').remove();
  });
});

var MaterialChip =
/*#__PURE__*/
function () {
  function MaterialChip(chips, options) {
    _classCallCheck(this, MaterialChip);

    this.chips = chips;
    this.$document = $(document);
    this.options = options;
    this.eventsHandled = false;
    this.ulWrapper = $('<ul class="chip-ul z-depth-1"></ul>');
    this.defaultOptions = {
      data: [],
      dataChip: [],
      placeholder: '',
      secondaryPlaceholder: ''
    };
    this.selectors = {
      chips: '.chips',
      chip: '.chip',
      input: 'input',
      delete: '.fas',
      selectedChip: '.selected'
    };
    this.keyCodes = {
      enter: 13,
      backspace: 8,
      delete: 46,
      arrowLeft: 37,
      arrowRight: 39,
      comma: 188
    };
    this.init();
  }

  _createClass(MaterialChip, [{
    key: "init",
    value: function init() {
      var _this = this;

      this.optionsDataStatement();
      this.assignOptions();
      this.chips.each(function (index, element) {
        var $this = $(element);

        if ($this.data('initialized')) {
          return;
        }

        var options = $this.data('options');

        if (!options.data || !Array.isArray(options.data)) {
          options.data = [];
        }

        $this.data('chips', options.data);
        $this.data('index', index);
        $this.data('initialized', true);

        if (!$this.hasClass(_this.selectors.chips)) {
          $this.addClass('chips');
        }

        _this.renderChips($this);
      });

      if (!this.eventsHandled) {
        this.handleEvents();
        this.eventsHandled = true;
      }

      return this;
    }
  }, {
    key: "optionsDataStatement",
    value: function optionsDataStatement() {
      if (this.options === 'data') {
        return this.chips.data('chips');
      }

      if (this.options === 'options') {
        return this.chips.data('options');
      }

      return true;
    }
  }, {
    key: "assignOptions",
    value: function assignOptions() {
      this.chips.data('options', $.extend({}, this.defaultOptions, this.options));
    }
  }, {
    key: "handleEvents",
    value: function handleEvents() {
      this.handleSelecorChips();
      this.handleBlurInput();
      this.handleSelectorChip();
      this.handleDocumentKeyDown();
      this.handleDocumentFocusIn();
      this.handleDocumentFocusOut();
      this.handleDocumentKeyDownChipsInput();
      this.handleDocumentClickChipsDelete();
      this.inputKeyDown();
      this.renderedLiClick();
      this.dynamicInputChanges();
    }
  }, {
    key: "handleSelecorChips",
    value: function handleSelecorChips() {
      var _this2 = this;

      this.$document.on('click', this.selectors.chips, function (e) {
        return $(e.target).find(_this2.selectors.input).focus();
      });
    }
  }, {
    key: "handleBlurInput",
    value: function handleBlurInput() {
      var _this3 = this;

      this.$document.on('blur', this.selectors.chips, function () {
        return setTimeout(function () {
          return _this3.ulWrapper.hide();
        }, 100);
      });
    }
  }, {
    key: "handleSelectorChip",
    value: function handleSelectorChip() {
      this.chips.on('click', '.chip', function (e) {
        return $(e.target).removeClass('selected').addClass('selected');
      });
    }
  }, {
    key: "handleDocumentKeyDown",
    value: function handleDocumentKeyDown() {
      var _this4 = this;

      this.$document.on('keydown', function (e) {
        if ($(e.target).is('input, textarea')) {
          return;
        }

        var $selectedChip = _this4.$document.find(_this4.selectors.chip + _this4.selectors.selectedChip);

        var $chipsWrapper = $selectedChip.closest(_this4.selectors.chips);
        var siblingsLength = $selectedChip.siblings(_this4.selectors.chip).length;

        if (!$selectedChip.length) {
          return;
        }

        var backspacePressed = e.which === _this4.keyCodes.backspace;
        var deletePressed = e.which === _this4.keyCodes.delete;
        var leftArrowPressed = e.which === _this4.keyCodes.arrowLeft;
        var rightArrowPressed = e.which === _this4.keyCodes.arrowRight;

        if (backspacePressed || deletePressed) {
          e.preventDefault();

          _this4.deleteSelectedChip($chipsWrapper, $selectedChip, siblingsLength);
        } else if (leftArrowPressed) {
          _this4.selectLeftChip($chipsWrapper, $selectedChip);
        } else if (rightArrowPressed) {
          _this4.selectRightChip($chipsWrapper, $selectedChip, siblingsLength);
        }
      });
    }
  }, {
    key: "handleDocumentFocusIn",
    value: function handleDocumentFocusIn() {
      var _this5 = this;

      var $chipsInput;
      var $chips = this.chips;

      if ($chips.hasClass('chips-autocomplete')) {
        $chipsInput = $chips.children().children('input');
      } else {
        $chipsInput = $chips.children('input');
      }

      $chipsInput.on('click', function (e) {
        $(e.target).closest(_this5.selectors.chips).addClass('focus');
        $(_this5.selectors.chip).removeClass('selected');
      });
    }
  }, {
    key: "handleDocumentFocusOut",
    value: function handleDocumentFocusOut() {
      var _this6 = this;

      this.$document.on('focusout', "".concat(this.selectors.chips, " ").concat(this.selectors.input), function (e) {
        return $(e.target).closest(_this6.selectors.chips).removeClass('focus');
      });
    }
  }, {
    key: "handleDocumentKeyDownChipsInput",
    value: function handleDocumentKeyDownChipsInput() {
      var _this7 = this;

      this.$document.on('keydown', "".concat(this.selectors.chips, " ").concat(this.selectors.input), function (e) {
        var $target = $(e.target);
        var $chipsWrapper = $target.closest(_this7.selectors.chips);
        var chipsIndex = $chipsWrapper.data('index');
        var chipsLength = $chipsWrapper.children(_this7.selectors.chip).length;
        var enterPressed = e.which === _this7.keyCodes.enter;
        var commaPressed = e.which === _this7.keyCodes.comma;

        if (enterPressed || commaPressed) {
          e.preventDefault();

          _this7.addChip(chipsIndex, {
            tag: $target.val()
          }, $chipsWrapper);

          $target.val('');
          return;
        }

        var leftArrowOrDeletePressed = e.keyCode === _this7.keyCodes.arrowLeft || e.keyCode === _this7.keyCodes.delete;
        var isValueEmpty = $target.val() === '';

        if (leftArrowOrDeletePressed && isValueEmpty && chipsLength) {
          _this7.selectChip(chipsIndex, chipsLength - 1, $chipsWrapper);

          $target.blur();
        }
      });
    }
  }, {
    key: "handleDocumentClickChipsDelete",
    value: function handleDocumentClickChipsDelete() {
      var _this8 = this;

      this.chips.on('click', '.chip .fas', function (e) {
        var $target = $(e.target);
        var $chip = $target.parent($(_this8.chips));
        var $chipsWrapper;

        if ($chip.parents().eq(1).hasClass('chips-autocomplete')) {
          $chipsWrapper = $chip.parents().eq(1);
        } else if (!$chip.parent().hasClass('chips-autocomplete') && !$chip.parents().eq(1).hasClass('chips-autocomplete')) {
          $chipsWrapper = $chip.parents().eq(0);
        } else if ($chip.parent().hasClass('chips-initial') && $chip.parent().hasClass('chips-autocomplete')) {
          $chipsWrapper = $chip.parents().eq(0);
        }

        _this8.deleteChip($chipsWrapper.data('index'), $chip.index(), $chipsWrapper);

        $chipsWrapper.find('input').focus();
      });
    }
  }, {
    key: "inputKeyDown",
    value: function inputKeyDown() {
      var _this9 = this;

      var $ulWrapper = this.ulWrapper;
      var dataChip = this.options.dataChip;
      var $thisChups = this.chips;
      var $input = $thisChups.children('.chip-position-wrapper').children('input');
      $input.on('keyup', function (e) {
        var $inputValue = $input.val();
        $ulWrapper.empty();

        if ($inputValue.length) {
          for (var item in dataChip) {
            if (dataChip[item].toLowerCase().includes($inputValue.toLowerCase())) {
              $thisChups.children('.chip-position-wrapper').append($ulWrapper.append($("<li>".concat(dataChip[item], "</li>"))));
            }
          }
        }

        if (e.which === _this9.keyCodes.enter) {
          $ulWrapper.empty();
          $thisChups.children(':first').trigger('click');
          $ulWrapper.remove();
        } // eslint-disable-next-line no-unused-expressions

        $inputValue.length === 0 ? $ulWrapper.hide() : $ulWrapper.show();
      });
    }
  }, {
    key: "dynamicInputChanges",
    value: function dynamicInputChanges() {
      var dataChip = this.options.dataChip;

      if (dataChip !== undefined) {
        this.chips.children('.chip-position-wrapper').children('input').on('change', function (e) {
          var $targetVal = $(e.target).val();

          if (!dataChip.includes($targetVal)) {
            dataChip.push($targetVal);
            dataChip.sort();
          }
        });
      }
    }
  }, {
    key: "renderedLiClick",
    value: function renderedLiClick() {
      var _this10 = this;

      this.chips.on('click', 'li', function (e) {
        e.preventDefault();
        var $target = $(e.target);
        var $chipsWrapper = $target.closest($(_this10.selectors.chips));
        var chipsIndex = $chipsWrapper.data('index');

        _this10.addChip(chipsIndex, {
          tag: $target.text()
        }, $chipsWrapper);

        _this10.chips.children('.chip-position-wrapper').children('input').val('');

        _this10.ulWrapper.remove();
      });
    }
  }, {
    key: "deleteSelectedChip",
    value: function deleteSelectedChip($chipsWrapper, $selectedChip, siblingsLength) {
      var chipsIndex = $chipsWrapper.data('index');
      var chipIndex = $selectedChip.index();
      this.deleteChip(chipsIndex, chipIndex, $chipsWrapper);
      var selectIndex = null;

      if (chipIndex < siblingsLength - 1) {
        selectIndex = chipIndex;
      } else if (chipIndex === siblingsLength || chipIndex === siblingsLength - 1) {
        selectIndex = siblingsLength - 1;
      }

      if (selectIndex < 0) {
        selectIndex = null;
      }

      if (selectIndex !== null) {
        this.selectChip(chipsIndex, selectIndex, $chipsWrapper);
      }

      if (!siblingsLength) {
        $chipsWrapper.find('input').focus();
      }
    }
  }, {
    key: "selectLeftChip",
    value: function selectLeftChip($chipsWrapper, $selectedChip) {
      var chipIndex = $selectedChip.index() - 1;

      if (chipIndex < 0) {
        return;
      }

      $(this.selectors.chip).removeClass('selected');
      this.selectChip($chipsWrapper.data('index'), chipIndex, $chipsWrapper);
    }
  }, {
    key: "selectRightChip",
    value: function selectRightChip($chipsWrapper, $selectedChip, siblingsLength) {
      var chipIndex = $selectedChip.index() + 1;
      $(this.selectors.chip).removeClass('selected');

      if (chipIndex > siblingsLength) {
        $chipsWrapper.find('input').focus();
        return;
      }

      this.selectChip($chipsWrapper.data('index'), chipIndex, $chipsWrapper);
    }
  }, {
    key: "renderChips",
    value: function renderChips($chipsWrapper) {
      var _this11 = this;

      var html = '';
      $chipsWrapper.data('chips').forEach(function (elem) {
        html += _this11.getSingleChipHtml(elem);
      });

      if ($chipsWrapper.hasClass('chips-autocomplete')) {
        html += '<span class="chip-position-wrapper position-relative"><input class="input" placeholder=""></span>';
      } else {
        html += '<input class="input" placeholder="">';
      }

      $chipsWrapper.html(html);
      this.setPlaceholder($chipsWrapper);
    }
  }, {
    key: "getSingleChipHtml",
    value: function getSingleChipHtml(elem) {
      if (!elem.tag) {
        return '';
      }

      var html = "<div class=\"chip\">".concat(elem.tag);

      if (elem.image) {
        html += " <img src=\"".concat(elem.image, "\"> ");
      }

      html += '<i class="close fas fa-times"></i>';
      html += '</div>';
      return html;
    }
  }, {
    key: "setPlaceholder",
    value: function setPlaceholder($chips) {
      var options = $chips.data('options');

      if ($chips.data('chips').length && options.placeholder) {
        $chips.find('input').prop('placeholder', options.placeholder);
      } else if (!$chips.data('chips').length && options.secondaryPlaceholder) {
        $chips.find('input').prop('placeholder', options.secondaryPlaceholder);
      }
    }
  }, {
    key: "isValid",
    value: function isValid($chipsWrapper, elem) {
      var chips = $chipsWrapper.data('chips');

      for (var i = 0; i < chips.length; i++) {
        if (chips[i].tag === elem.tag) {
          return false;
        }
      }

      return elem.tag !== '';
    }
  }, {
    key: "addChip",
    value: function addChip(chipsIndex, elem, $chipsWrapper) {
      if (!this.isValid($chipsWrapper, elem)) {
        return;
      }

      var $chipHtml = $(this.getSingleChipHtml(elem));
      $chipsWrapper.data('chips').push(elem);

      if ($chipsWrapper.hasClass('chips-autocomplete') && $chipsWrapper.hasClass('chips-initial') && $chipsWrapper.find('.chip').length > 0) {
        $chipHtml.insertAfter($chipsWrapper.find('.chip').last());
      } else {
        $chipHtml.insertBefore($chipsWrapper.find('input'));
      }

      $chipsWrapper.trigger('chip.add', elem);
      this.setPlaceholder($chipsWrapper);
    }
  }, {
    key: "deleteChip",
    value: function deleteChip(chipsIndex, chipIndex, $chipsWrapper) {
      var chip = $chipsWrapper.data('chips')[chipIndex];
      $chipsWrapper.find('.chip').eq(chipIndex).remove();
      $chipsWrapper.data('chips').splice(chipIndex, 1);
      $chipsWrapper.trigger('chip.delete', chip);
      this.setPlaceholder($chipsWrapper);
    }
  }, {
    key: "selectChip",
    value: function selectChip(chipsIndex, chipIndex, $chipsWrapper) {
      var $chip = $chipsWrapper.find('.chip').eq(chipIndex);

      if ($chip && $chip.hasClass('selected') === false) {
        $chip.addClass('selected');
        $chipsWrapper.trigger('chip.select', $chipsWrapper.data('chips')[chipIndex]);
      }
    }
  }, {
    key: "getChipsElement",
    value: function getChipsElement(index, $chipsWrapper) {
      return $chipsWrapper.eq(index);
    }
  }]);

  return MaterialChip;
}();

$.fn.materialChip = function (options) {
  return this.each(function () {
    new MaterialChip($(this), options);
  });
};

})(jQuery);