'use strict';

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

;(function (window, $) {

  function initScripts() {

    window.widgetCustomizer = new Vue({
      el: "#widget-customizer",
      data: function data() {
        var _sliderOptions;

        return {
          layout: 'small',
          language: document.querySelector('#widget-customizer').getAttribute('data-language'),
          tag: [],
          tags: [],
          defaultTags: [],
          tagsJoined: null,
          theme: 'dark',
          priceIndex: false,
          addonImages: false,
          newsValue: 5,
          currency: 'USD',
          currencys: ['USD', 'EUR', 'GBP', 'JPY', 'RUR', 'KRW', 'CNY', 'TRY', 'BRL'],
          isLoading: false,
          loadingTimer: null,
          loadingDelay: 500,
          sliderIsDragged: false,
          showCopiedPopup: false,
          showDocUrl: false, // show "View documentation"
          sliderOptions: (_sliderOptions = {
            eventType: 'auto',
            width: 'auto',
            height: 4,
            dotSize: 12,
            dotHeight: null,
            dotWidth: null,
            min: 5,
            max: 50,
            interval: 1,
            show: true,
            speed: 0.3,
            disabled: false,
            piecewise: false,
            piecewiseStyle: false,
            piecewiseLabel: false,
            tooltip: 'always',
            tooltipDir: 'top',
            reverse: false,
            data: null,
            clickable: true,
            realTime: false,
            lazy: false,
            formatter: null,
            bgStyle: null,
            sliderStyle: null,
            processStyle: {
              backgroundColor: "#a0afb7"
            },
            piecewiseActiveStyle: null
          }, _defineProperty(_sliderOptions, 'piecewiseStyle', null), _defineProperty(_sliderOptions, 'tooltipStyle', {
            backgroundColor: "red",
            fontSize: "16px",
            fontWeight: "700",
            border: "none",
            color: "#465a65"
          }), _defineProperty(_sliderOptions, 'labelStyle', null), _defineProperty(_sliderOptions, 'labelActiveStyle', null), _sliderOptions)
        };
      },

      methods: {
        joinTags: function joinTags() {
          var labels = [];
          for (var i = 0; i < this.tag.length; i++) {
            labels.push(this.tag[i].slug);
          }
          this.tagsJoined = labels.join(',');
        },
        loadDefaultTags: function loadDefaultTags() {
          let tags = JSON.parse(document.querySelector('#widget-customizer').getAttribute('data-tags'));
          tags.forEach((tag) => {
            this.defaultTags.push({ name: tag.title, slug: tag.slug, id: tag.id });
          });
          this.tags = this.defaultTags;
        },
        asyncLoadTags: function asyncLoadTags(query) {
          if (this.isLoading) {
            return;
          }
          clearTimeout(this.loadingTimer);
          if (query.length < 2) {
            this.tags = this.defaultTags;
            return;
          }

          this.loadingTimer = setTimeout(() => {
            query = query.replace("#", "");
            var _this = this;
            _this.isLoading = true;
            fetch('/api/v1/content/tags/search?limit=10&search_query=' + query).then(function (response) {
              return response.json();
            }).then(function (options) {
              var result = [];

              for (var i = 0; i < options.length; i++) {
                // title => name
                result.push({ name: options[i].title, slug: options[i].slug, id: options[i].id });
              }

              _this.isLoading = false;
              _this.tags = result;
            }).catch(alert);
          }, this.loadingDelay);
        },
        buildWidgetParams: function buildWidgetParams() {

          var options = {
            widgetConfig: {
              theme: this.theme,
              size: this.layout,
              height: 220
            },
            newsParams: {
              limit: this.newsValue,
              language: this.language,
            }
          };

          if (this.tag.length) {
            this.joinTags();
            options.widgetConfig.category = this.tagsJoined;
          } else {
            this.tagsJoined = null;
          }

          if (this.priceIndex) {
            options.currency = this.currency;
            options.widgetConfig.priceindex = this.priceIndex;
          }

          if (this.addonImages) {
            options.widgetConfig.images = this.addonImages;
          }

          return options;
        },
        iniPreview: function iniPreview() {
          var el = this.$refs.infoPreviewContainer,
              scriptParent = el.previousElementSibling,
              options = this.buildWidgetParams(),
              timer;

          timer = setInterval(function () {
            if (typeof window.CTNewsInformer === "function") {
              clearInterval(timer);
              window.ctPreview = new CTNewsInformer(el, options);
            }
          }, 1000);
        },
        updatePreview: function updatePreview() {
          if (this.sliderIsDragged) return;
          this.clearPreview();
          this.iniPreview();
        },
        clearPreview: function clearPreview() {
          window.ctPreview = null;
          this.$refs.infoPreviewContainer.innerHTML = '';
        },
        copyCode: function copyCode(e) {
          e.preventDefault();
          if (!this.showCopiedPopup) {
            this.showCopiedPopup = true;
            this.$refs.code.select();
            document.execCommand('copy');
            setTimeout(() => {
              this.showCopiedPopup = false;
            }, 3000)
          }
        },
        bindRemoveCopiedPopup: function bindRemoveCopiedPopup() {
          var _this = this;
          document.querySelector("body").addEventListener('click', function (ev) {
            if (ev.target.closest('.' + _this.$refs.copyWrap.classList[0])) return;
            _this.showCopiedPopup = false;
          }, false);
        }
      },
      computed: {
        widgetCode: function() {
          var code = [];
          code.push('src="https://cointelegraph.com/news-widget"');
          code.push('data-ct-widget-limit="'+this.newsValue+'"');
          if (this.theme)
            code.push('data-ct-widget-theme="'+this.theme+'"');
          if (this.layout!="false")
            code.push('data-ct-widget-size="'+this.layout+'"');
          if (this.priceIndex)
            code.push('data-ct-widget-priceindex="'+this.priceIndex+'"');
          if (this.addonImages)
            code.push('data-ct-widget-images="'+this.addonImages+'"');
          if (this.priceIndex)
            code.push('data-ct-widget-currency="'+this.currency+'"');
          if (this.tagsJoined)
            code.push('data-ct-widget-category="'+this.tagsJoined+'"');
          if (this.language)
            code.push('data-ct-widget-language="' + this.language + '"');
          return code.join(' ');
        }
      },
      mounted: function mounted() {
        this.iniPreview();
        this.loadDefaultTags();
        this.bindRemoveCopiedPopup();
      },

      components: {
        'vueSlider': window['vue-slider-component'],
        Multiselect: window.VueMultiselect.default
      }
    });
  }

  /** DOM Ready */
  document.addEventListener("DOMContentLoaded", initScripts);
})(window, window.jQuery = window.jQuery || false);