!function () {
  'use strict';

  var posterApp = {

    initDatePickerr: function () {
      const _this = this;
      [this._selector.inpDeparture, this._selector.inpArrival].forEach(i => {
        let date = i.val();

        if (!i.length) return false
        let startDate = null
        if (window.location.href.includes("/ru/")) {
          startDate = moment(date, "D MMMM YYYY г. HH:mm", 'ru');
        } else {
          startDate = moment(date, "MMMM D, YYYY, h:mm a", 'en');
        }
        if (!i.attr('hidden')) {

          i.daterangepicker({
            "autoapply": true,
            "linkedCalendars": false,
            "singleDatePicker": true,
            "timePicker": true,
            "timePicker24Hour": true,
            "minDate": startDate,
            "locale": changeLangForDateTimePicker(),
          }, function (start, end, label) {
            i.val(start.format('DD.MM.YYYY HH:mm'));
          });
        }
      });
    },

    changeCargoType: 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,inpTypeAvia,'passenger')
      })
      // change other type
      this.handlerDisabled(inpTypePassenger,inpTypeAvia,'passenger')
    },

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

    changeTransportType: function () {
      let inpTypePassenger = this._selector.cargoItems.filter((d,i)=>i.value === 'passenger');
      this._selector.typeItems.off('change.i-disable').on('change.i-disable', (e)=>{
        this.handlerDisabled(e.target,inpTypePassenger,'avia')
      })
    },

    initHandlerItemsTowns: function (el) {
      el.list.off('click.item').on('click.item', (e) => {
        let target = $(e.target)
        let item = target.hasClass('autocomplete-result') ? target : target.parents('.autocomplete-result')
        let dataStr = item.data('attr')
        if (!dataStr.length) return
        dataStr = dataStr.slice(1, -1).replace(/"/g, '');

        let [id, txt, name, date] = dataStr.split(', ');
        let inpNames = {
          id: 'from_address_point',
          txt: 'from_address_point_txt',
          date: 'departure_DT'
        }

        if (name.match(/to/)) {
          inpNames = {
            id: 'to_address_point',
            txt: 'to_address_point_txt',
            date: 'arrival_DT'
          }
        }

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

    setDataTowns: function (data, inp) {
      if (!data.res_search_list.length) return
      const newSearchlist = data.res_search_list.replace(/onmousedown=\'selectItemAddrPoint/g, 'data-attr=\'')
      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;
    },

    initSubmit: function () {
      const _this = this;
      this._selector.root.off('submit').on('submit', function (e) {
        e.preventDefault();
        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 + '/'
        }
        $.ajax({
          headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
          url: url,
          type: "POST",
          cache: false,
          processData: false,
          contentType: false,
          data: formData,
          success: function (data) {
            return
            let data_route_id = data.route_id
            document.querySelector(".info_profile").innerHTML = data.html

            let el_route = document.querySelector(`[data-number-of-route="${data_route_id}"]`);
            if (routeId) {
              el_route = document.querySelector(`[data-number-of-route="${routeId}"]`);
            }
            if(el_route) {
              el_route.scrollIntoView({
                behavior: "smooth",
                block: 'start',
                inline: 'start'
              });
            }
            let currentUrl = window.location.pathname;
            let newUrl = '';

            if (currentUrl.includes('/create_route_for_customer')) {
              newUrl = currentUrl.replace('/create_route_for_customer', '/my_routes');
            } else if (currentUrl.includes('/create_route_for_mover')) {
              newUrl = currentUrl.replace('/create_route_for_mover', '/my_routes');
            }
            window.history.replaceState(null, '', newUrl);
          },
          error: function (data, exception) {
            document.querySelector(".info_profile").innerHTML = data.responseJSON.html;
            document.getElementById('departure_DT')?.scrollIntoView({
              behavior: "smooth",
              block: 'nearest',
              inline: 'nearest'
            });
          }
        });
      });
    },

    getTowns: function (el) {
      const _this = this;
      let timer = null
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        timer = null;
        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, unanswered_msgs_count} = 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')
            }
            console.log('fetch', data)
          },
          error: function (data) {

            console.log('Error')

          }
        });
      }, 500);
    },

    handlerSearchTown: function (e, i) {
      this._cl('handlerSearchTown');
      let el = i;

      if (el.val().length > 2) {
        el.addClass('loading');
        this.getTowns(el);
      } else {
        el.removeClass('loading');
      }
    },

    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.off('click.routes').on('click.routes', () => _this.handlerShowList(i));
        i.list.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;
      this._data = {
        debug: true
      };
      this._selector = {
        root: root,
        wrapper: $('.info_profile'),
        inpFrom: root.find('#from'),
        inpFromList: root.find('#from').siblings('.poster__towns-list'),
        inpTo: root.find('#to'),
        inpToList: root.find('#to').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.changeCargoType();
      this.changeTransportType()
    },
  };

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