/* eslint-disable no-lonely-if */
/* global _, vuedraggable, Vue, wu_block_ui, ajaxurl, wu_tax_ratesl10n */
(function($) {

  $(document).ready(function() {

    /**
     * Vue
     */
    if ($('#wu-tax-rates').length) {

      Vue.component('selectizer', {
        props: [
          'value',
          'id',
          'name',
          'model',
          'country',
          'state',
          'selected',
          'options',
          'placeholder',
        ],
        template: '<input v-bind="$props">',
        updated() {

          this.$nextTick(function() {

            const options = jQuery(this.$el).data('__options');

            if (options.data.country !== this.country) {

              options.data.country = this.country;

              jQuery(this.$el).data('__options', options);

              this.$el.selectize.clear();

              this.$el.selectize.clearOptions();

            } // end if;

            if (options.data.state !== this.state) {

              options.data.state = this.state;

              jQuery(this.$el).data('__options', options);

            } // end if;

          });

        },
        mounted() {

          const that = this;

          const item = this.$el;

          window.wu_selector({
            el: item,
            maxItems: 1000,
            options: this.options,
            valueField: 'slug',
            labelField: 'name',
            searchField: ['slug', 'name'],
            create: true,
            templateName: 'checkout_form',
            data: {
              action: 'wu_search',
              model: this.model,
              country: this.country,
              state: this.state,
              number: 10,
            },
          });

          this.$el.selectize.on('change', function(value) {

            that.$emit('input', value);

          });

        },
      });

      window.wu_tax_rates = new Vue({
        el: '#wu-tax-rates',
        components: {
          vuedraggable,
        },
        data() {

          return {
            dragging: false,
            tax_category: 'default',
            switching: false,
            creating: false,
            create_name: '',
            toggle: false,
            loading: true,
            saving: false,
            initialLoading: true,
            error: false,
            changed: false,
            data: {
              default: {
                name: 'Default',
                rates: [],
              },
            },
            delete: [],
            saveMessage: '',
            errorMessage: '',
            rate_type: 'standard_rate',
            editing: 0,
            item: {
              title: wu_tax_ratesl10n.name,
              country: '',
              state: '',
              tax_rate: '',
              type: 'regular',
              compound: false,
            },
          };

        },
        watch: {
          loading(new_value) {

            if (new_value === true) {

              window.wu_blocked_table = wu_block_ui('table.wp-list-table');

            } else {

              if (typeof window.wu_blocked_table !== 'undefined') {

                window.wu_blocked_table.unblock();

              } // end if;

            } // end if;

          },
        },
        mounted() {

          this.loading = true;

          this.pull_data(true);

          $('.wu-tooltip-vue').tipTip();

          const vm = this;

          this.$watch('data', function() {

            if (vm.initialLoading) {

              vm.initialLoading = false;

              return;

            }

            vm.changed = true;

          }, {
            deep: true,
          });

        },
        created() {

          // Create the event.
          const event = document.createEvent('Event');

          // Define that the event name is 'build'.
          event.initEvent('vue_loaded', true, true);

          event.vue = this;

          // target can be any Element or other EventTarget.
          window.dispatchEvent(event);

        },
        computed: {
          selected() {

            return $(this.data[this.tax_category].rates).filter(function(index, item) {

              return item.selected;

            });

          },
        },
        methods: {
          refresh(e) {

            e.preventDefault();

            this.loading = true;

            this.pull_data();

          },
          select_all(event) {

            const toggle = $(event.target).is(':checked');

            this.data[this.tax_category].rates = $.map(this.data[this.tax_category].rates, function(item) {

              item.selected = toggle;

              return item;

            });

          },
          pull_data() {

            const that = this;

            jQuery.getJSON(ajaxurl + '?action=wu_get_tax_rates').done(function(response) {

              that.loading = false;

              that.data = response.data;

            })
              .fail(function(error) {

                that.loading = false;

                that.error = true;

                that.errorMessage = error.statusText;

              });

          },
          add_tax_category() {

            this.data[this.create_name] = {
              name: this.create_name,
              rates: [],
            };

            this.creating = false;

            this.tax_category = this.create_name;

          },
          add_row() {

            Vue.set(this.data[this.tax_category], 'rates', this.data[this.tax_category].rates.concat([
              {
                title: wu_tax_ratesl10n.name,
                country: '',
                state: '',
                tax_rate: '',
                type: 'regular',
                compound: false,
              },
            ]));

            this.$forceUpdate();

          },
          delete_tax_category() {

            // eslint-disable-next-line no-alert
            const are_you_sure = confirm(wu_tax_ratesl10n.confirm_delete_tax_category_message);

            const that = this;

            if (are_you_sure) {

              const cleaned_list = _.filter(this.data, function(item, index) {

                return index !== that.tax_category;

              });

              that.data = cleaned_list.length ? cleaned_list : {
                default: {
                  name: 'Default',
                  rates: [],
                },
              };

              that.tax_category = Object.keys(that.data).shift();

            } // end if

          },
          delete_rows() {

            this.delete = this.delete.concat(this.selected.get());

            // eslint-disable-next-line no-alert
            const are_you_sure = confirm(wu_tax_ratesl10n.confirm_message);

            if (are_you_sure) {

              const cleaned_list = $(this.data[this.tax_category].rates).filter(function(index, item) {

                return ! item.selected;

              });

              Vue.set(this.data[this.tax_category], 'rates', cleaned_list.get());

              this.$forceUpdate();

            } // end if

          },
          save() {

            const that = this;

            that.saving = true;

            if (typeof that.data[that.tax_category].rates !== 'undefined') {

              _.map(that.data[that.tax_category].rates, (item, index) => {

                item.priority = index * 10;

                return item;

              });

            }

            $.post({
              url: ajaxurl + '?action=wu_save_tax_rates&' + $('#nonce_form').serialize(),
              data: JSON.stringify({
                tax_rates: that.data,
                tax_category: that.tax_category,
              }),
              dataType: 'json',
              contentType: 'application/json; charset=utf-8',
            }).success(function(data) {

              that.saving = false;

              that.changed = false;

              that.delete = [];

              that.saveMessage = data.message;

              if (data.code === 'success') {

                that.loading = true;

                that.initialLoading = true;

                that.pull_data();

                that.tax_category = data.tax_category;

              }

              setInterval(function() {

                that.saveMessage = '';

              }, 6000);

            });

          },
        },
      });

    } // end if;

  });

}(jQuery));