!function () {
  'use strict';
  var posterApp = {
    locale_ru: new Object({
      direction: "ltr",
      format: "DD.MM.YYYY",
      separator: " - ",
      applyLabel: "Принять",
      cancelLabel: "Отменить",
      weekLabel: "Н",
      customRangeLabel: "Custom Range",

    }),

    locale_en: new Object({
      direction: "ltr",
      format: "DD.MM.YYYY",
      separator: " - ",
      applyLabel: "Apply",
      cancelLabel: "Cancel",
      weekLabel: "W",
      customRangeLabel: "Custom Range",

    }),

    changeLangForDateTimePicker: function () {
      moment.locale(document.documentElement.lang === 'ru' ? 'ru' : 'en');
      return document.documentElement.lang === 'ru' ? this.locale_ru : this.locale_en
    },


    initDatePickerr: function () {
      const _this = this;
      [this._selector.inpDeparture, this._selector.inpArrival].forEach(i => {
        if (!i.length) return
        let date = i.val().trim() ? i.val() : new Date();
        let startDate = null
        if (window.location.href.includes("/ru/")) {
          startDate = moment(date, this._data.formatDateClient, 'ru');
        } else {
          startDate = moment(date, this._data.formatDateClient, 'en');
        }
        if (!i.attr('hidden')) {
          i.daterangepicker({
            "autoapply": true,
            "linkedCalendars": false,
            "singleDatePicker": true,
            "timePicker": false,
            "timePicker24Hour": false,
            "minDate": startDate,
            "locale": _this.changeLangForDateTimePicker(),
          }, function (start, end, label) {
            i.val(start.format('DD.MM.YYYY'));
          });
        }

        i.off('mouseleave.i-disable').on('mouseleave.i-disable', e => {
          i.attr('readonly', false);
          i.blur();
        })
        i.off('mouseover.i-disable').on('mouseover.i-disable', e => {
          i.attr('readonly', true);
        })
        i.off('focus.i-disable').on('focus.i-disable', e => {
          i.blur()
        })
      });

    },


    changeDisabledType: function () {
      let inpTypeAvia = this._selector.typeItems.filter((d, i) => i.value === 'avia');
      let inpTypePassenger = this._selector.cargoItems.filter((d, i) => i.value === 'passenger');
      this._selector.cargoItems.off('change.i-disable').on('change.i-disable', (e) => {
        this.handlerDisabled($(e.target).val(), inpTypeAvia, 'passenger')
      });
      this._selector.typeItems.off('change.i-disable2').on('change.i-disable2', (e) => {
        this.handlerDisabled($(e.target).val(), inpTypePassenger, 'avia')
      });
      // change other type
      this.handlerDisabled(this.getDataForm(true).cargo_type, inpTypeAvia, 'passenger')
      this.handlerDisabled(this.getDataForm(true).type_transport, inpTypePassenger, 'avia')
    },

    handlerDisabled: function (el, el2, text) {
      if (el === text) {
        $(el2).attr('disabled', true);
      } else {
        $(el2).attr('disabled', false);
      }
    },

    createInpCoutryData: function (el, data) {
      el.dataCoutry?.remove();
      let template =
        `<div class="poster__inp-country">
          <img src="${data[4]}" alt="${data[1]}">
          <span>${data[2] || 'BY'}</span>
        </div>`;
      el.after(template);
      el.dataCoutry = el.next('.poster__inp-country');
      el.parent().addClass('is-set')
    },

    initHandlerItemsTowns: function (el) {
      el.list.off('click.item').on('click.item', (e) => {
        let target = $(e.target)
        let item = target.hasClass('poster__towns-item') ? target : target.parents('.poster__towns-item')
        let data = item.data('attrs')
        if (!data.length) return
        let [id, txt] = data;
        this.createInpCoutryData(el, data);

        let inpNames = {
          id: 'from_city',
          txt: 'from_address_point_txt',
        }

        if (el[0].name.match(/to/)) {
          inpNames = {
            id: 'to_city',
            txt: 'to_address_point_txt',
          }
        }

        const collection = this._selector.root[0].elements;
        collection[inpNames.id].value = id;
        collection[inpNames.txt].value = txt;
        this.handlerShowList(el);
        el.prevValue = el.val();
      })
    },

    setDataTowns: function (data, inp) {
      const newSearchlist = data.res_search_list;
      inp.list.html(newSearchlist);
    },

    handlerPageOut: function () {
      let observer = new MutationObserver((e) => {
        for (let mutation of e) {
          for (let node of mutation.addedNodes) {
            if (!(node instanceof HTMLElement)) continue;
            if (node.classList.contains('poster')) {
              posterApp.init()
              observer.disconnect();
            }
          }
        }
      });
      observer.observe(this._selector.wrapper[0], {
        childList: true,
        subtree: false,
        characterDataOldValue: false
      });
    },

    handlerShowList: function (i, isHide) {
      if (!isHide && i.list.text()) {
        i.list.toggleClass('show')
      } else {
        i.list.removeClass('show')
      }
    },

    getDataForm: function (isObj) {
      let formData = new FormData(this._selector.root[0]);
      if (isObj) return Object.fromEntries(formData)
      return formData;
    },

    validForm: function () {
      let elems = this._selector.root[0].elements
      elems.departure_DT.value = elems.departure_DT.value.trim()
      if (!elems.departure_DT.value) {
        this._cl('!elems.departure_DT.value is empty set "          "')
        elems.departure_DT.value = moment(new Date()).format(this._data.formatDate);
      }
    },

    initSubmit: function () {
      const _this = this;
      this._selector.root.off('submit').on('submit', function (e) {
        e.preventDefault();
        _this.validForm();
        let routeId = _this._selector.submitBtn.data('routeId');
        var formData = _this.getDataForm();
        let url = '/routes/create_or_change_route/'
        if (routeId) {
          url = '/routes/change_route/' + routeId + '/'
        }
        _this._cl(_this.getDataForm(true))
        $.ajax({
          headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
          url: url,
          type: "POST",
          cache: false,
          processData: false,
          contentType: false,
          data: formData,
          success: function (data) {
            _this._selector.wrapper.html(data.html);
            _this._cl('data success',data)
            window.location.assign(location.pathname.split('/').slice(0,-2).join('/') + '/my_routes')
          },
          error: function (data, exception) {
            _this._cl('is-error data', data)
            _this._selector.wrapper.html(data.responseJSON.html);
            setTimeout(()=>{
              $('.errorlist>li').parents('.poster__row')[0]?.scrollIntoView({
              behavior: "smooth",
              block: 'nearest',
              inline: 'nearest'
            });
            })
          }
        });
      });
    },

    getTowns: function (el) {
      const _this = this;
      let data = _this.getDataForm(true);
      let getTownData = {
        type_transport: data.type_transport,
        search_str: el.val(),
        ctrl_name: el.attr('name')
      }
      $.ajax({
        headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
        url: '/reference_data/get_address_point/',
        type: "POST",
        cache: false,
        processData: false,
        contentType: false,
        data: JSON.stringify(getTownData),
        success: function (data) {
          el.removeClass('loading');
          const {res_search_list} = data;
          _this.setDataTowns(data, el)
          _this.initHandlerItemsTowns(el)
          _this.handlerShowList(el)
          if (res_search_list.length) {
            el.addClass('is-items')
            el.parent().addClass('is-items')
            el.list.addClass('is-items')
          } else {
            el.parent().removeClass('is-items')
            el.removeClass('is-items')
            el.list.removeClass('is-items')
          }
          _this._cl('fetch', data)
        },
        error: function (data) {

          console.log('Error')

        }
      });
    },

    handlerSearchTown: function (e, i) {
      this._cl('handlerSearchTown');
      let el = i;
      this._cl('handlerSearchTown el prV - elV', [el.prevValue, el.val()])
      if (el.prevValue && el.val().length < el.prevValue.length) {
        // clean input
        el.parent().removeClass('is-set')
        el.next('.poster__inp-country').remove()
        this._cl('', [el, `${el[0].name.split('_')[0]}_city`, this._selector.root[0].elements[`${el[0].name.split('_')[0]}_city`]])
        this._selector.root[0].elements[`${el[0].name.split('_')[0]}_city`].value = ''
        el.val('');
      }

      if (el.val().length > 2) {
        this._cl('in')
        el.addClass('loading');
        clearTimeout(el.timer)
        el.timer = setTimeout(() => {
          this.getTowns(el);
          el.timer = null;
        }, 500)
      } else {
        el.removeClass('loading');
      }
      el.prevValue = el.val();
    },

    initHandlerRoute: function () {
      this._cl('initHandlerRoute');
      const _this = this;
      [this._selector.inpFrom, this._selector.inpTo].forEach(i => {
        if (!i.length) return false
        i.off('input.routes').on('input.routes', (e) => _this.handlerSearchTown(e, i));
        i.parent().off('click.routes').on('click.routes', () => _this.handlerShowList(i));
        i.parent().parent().off('mouseleave.routes').on('mouseleave.routes', () => _this.handlerShowList(i, true));
      });
    },

    _cl: function (description, obj, debug) {
      if (debug || this._data.debug) {
        if (obj === undefined) {
          console.log(description);
        } else {
          console.log(obj, description);
        }
      }
    },

    initData: function (root) {
      window.posterApp = this;
      window.mobileWidth = 768;
      this._data = {
        debug: true,
        formatDate: 'DD.MM.YYYY',
        formatDateClient: window.location.href.includes("/ru/")
          ? "D MMMM YYYY г."
          : "MMMM D, YYYY",

      };
      this._selector = {
        root: root,
        wrapper: $('.info_profile'),
        inpFrom: root.find('#from'),
        inpFromList: root.find('#from').parent().siblings('.poster__towns-list'),
        inpTo: root.find('#to'),
        inpToList: root.find('#to').parent().siblings('.poster__towns-list'),
        cargoItems: root.find('.cargo__inp[name="cargo_type"]'),
        typeItems: root.find('.cargo__inp[name="type_transport"]'),
        inpDeparture: root.find('#departure_DT'),
        inpArrival: root.find('#arrival_DT'),
        submitBtn: root.find('button'),
      };
      this._selector.inpFrom.list = this._selector.inpFromList
      this._selector.inpFrom.date = this._selector.inpDeparture
      this._selector.inpTo.list = this._selector.inpToList
      this._selector.inpTo.date = this._selector.inpArrival
    },

    init: function () {
      let root = $('#poster__form');
      if (!root.length) return false
      this.initData(root);
      this._cl('posterApp init');
      this._cl(this);
      this.handlerPageOut();
      this.initHandlerRoute();
      this.initDatePickerr();
      this.initSubmit();
      this.changeDisabledType();
    },
  };

  $(function () {
    posterApp.init();
  });
}();