'use strict';

function realcommenter_gallery_get_pictures () {
  let gallery_list = document.querySelectorAll(
    realcommenter_get_selector('image_gallery_initer')
    //+ '[data-image-id]'
  );

  gallery_list.reduce = [].reduce;
  return gallery_list;
}

function realcommenter_gallery_ping (image_from_click) {

  let gallery_start_from_image_id = image_from_click.getAttribute(realcommenter_get_selector('image_gallery_initer_attr'));
  if (!gallery_start_from_image_id) {
    return;
  }

  let img_nodes = realcommenter_gallery_get_pictures();

  if (typeof window.itape_gallery_id_pathes === 'undefined') {
    window.itape_gallery_id_pathes = [];
  }

  let id_to_load_pathes = [];

  if (img_nodes.length) {

    img_nodes.reduce = [].reduce;

    id_to_load_pathes = img_nodes.reduce(function (_current_list, item) {

      let pic_id = +item.getAttribute(realcommenter_get_selector('image_gallery_initer_attr'));
      if (!pic_id || isNaN(pic_id)) {
        return _current_list;
      }

      if (window.itape_gallery_id_pathes[pic_id]) {
        return _current_list;
      }

      _current_list.push(pic_id);

      return _current_list;

    }, []);

  }

  /**
   * Формируем аякс-запрос с кодами картинок,
   * для которых нужно прочитать пути к превьюшкам
   */

  if (id_to_load_pathes.length) {
    realcommenter_ajaxion.bind(window, {
      url: '/bitrix/admin/burlakastudio.realcommenter.image_processor.php',
      onsuccess: realcommenter_gallery_thumb_pathes,
      data: {
        request_type: 'thumbs_list',
        file_id: id_to_load_pathes,
        thumb_size: 'gallery',
        gallery_start_from_image_id: gallery_start_from_image_id
      }
    })();
  } else {
    realcommenter_gallery_start(gallery_start_from_image_id);
  }

}

function realcommenter_gallery_thumb_pathes (result) {

  if (typeof result['ERROR'] !== 'undefined' && Object.keys(result['ERROR']).length) {
    console.log(result['ERROR']);
    return;
  }

  if (result['file_info']) {

    if (typeof window.itape_gallery_id_pathes === 'undefined') {
      window.itape_gallery_id_pathes = [];
    }

    result['file_info'].forEach(function (item) {
      window.itape_gallery_id_pathes[item['file_id']] = item['THUMB'];
    });

    realcommenter_gallery_start(result['request']['gallery_start_from_image_id']);

  }
}

function realcommenter_gallery_start (gallery_start_from_image_id) {

  /**
   * Инициализируем интерфейс:
   * - собираем каркас
   * - обеспечиваем его появление
   * - постим картинки
   */

  window.gallery_image_nodes = realcommenter_gallery_get_pictures();
  if (!window.gallery_image_nodes.length) {
    return;
  }

  let interface_obj;

  interface_obj = document.querySelector('.itape_gallery_monitor');
  if (interface_obj) {
    realcommenter_gallery_interface_remove.bind(interface_obj)();
  }

  interface_obj = document.createElement('div');
  interface_obj.className = 'itape_gallery_monitor';
  interface_obj.innerHTML =
    //'<div class="igm_shadow"></div>\n' +
    '<div class="igm_monitor">\n' +
    '\t<div class="imt_nav">\n' +
    '\t\t<span class="itn_left"></span>\n' +
    '\t\t<span class="itn_right"></span>\n' +
    '\t</div>\n' +
    '</div>\n' +
    '<del></del>';

  document.body.appendChild(interface_obj);
  realcommenter_gallery_tools_init(interface_obj);

  setTimeout(function () {
    this.classList.toggle('_show', true);
  }.bind(interface_obj), 50);

  let gallery_current_picture_pos = window.gallery_image_nodes.reduce(function (_current_value, item, index) {

    let data_image_id = item.getAttribute(realcommenter_get_selector('image_gallery_initer_attr'));
    if (data_image_id == gallery_start_from_image_id) {
      _current_value = index;
    }

    return _current_value;

  }, '');

  interface_obj.setAttribute('data-current-image', gallery_current_picture_pos);

  realcommenter_gallery_roll.bind({
    interface: interface_obj,
    shift: 0
  })();

}

function realcommenter_gallery_tools_init (interface_obj) {

  // Крестик на закрытие
  let del_obj = interface_obj.querySelector('del');
  if (!del_obj) {
    return;
  }

  /**
   * Заряжаем в стек хеш и колбэк, который будет срабатывать на back браузера
   *
   * !!! Важно.
   * Нам нужно и колбэк history браузера и клик на кнопку закрытия интерфейса
   * и клик на тень и отписываеть хеша браузера
   * ...привязать к одинаковой ячейке памяти.
   *
   * Вот почему мы делаем отдельную функцию, с забинденым интерфейсом.
   * Чтобы она была одна на всех.
   */

  let realcommenter_gallery_hider = realcommenter_gallery_interface_hide.bind(interface_obj);
  browser_hash_CPU('#itape_gallery', realcommenter_gallery_hider);

  del_obj.addEventListener('click', realcommenter_gallery_hider);
  del_obj.addEventListener('click', browser_hash_unregister_callback_from_stack.bind(this, realcommenter_gallery_hider));

  // Монитор (закрытие окна)
  let monitor_obj = interface_obj.querySelector('.igm_monitor');
  if (!monitor_obj) {
    return;
  }

  let arrows_list = interface_obj.querySelectorAll('.imt_nav span');
  arrows_list.forEach(function (item) {

    if (window.gallery_image_nodes.length <= 1) {
      item.parentNode.removeChild(item);
      return;
    }

    let _shift = (~item.className.indexOf('right')) ? 1 : -1;

    item.addEventListener('click', realcommenter_gallery_roll.bind({
      interface: interface_obj,
      shift: _shift
    }));
  });

  monitor_obj.addEventListener('click', realcommenter_gallery_hider);
  monitor_obj.addEventListener('click', browser_hash_unregister_callback_from_stack.bind(this, realcommenter_gallery_hider));

}

function realcommenter_gallery_roll (event) {

  /**
   * this:
   * объект вида:
   *  {
			interface: interface_obj,
			shift: 0|1|-1
		}
   */

  if (typeof this !== 'object' || !this.interface) {
    return;
  }

  if (event) {
    event.stopPropagation();
  }

  if (typeof window.gallery_image_nodes === 'undefined' || !window.gallery_image_nodes || !window.gallery_image_nodes.length) {
    return;
  }

  let gallery_current_picture_pos = +this.interface.getAttribute('data-current-image');

  let next_picture_pos = gallery_current_picture_pos + this.shift;

  if (next_picture_pos >= window.gallery_image_nodes.length) {
    next_picture_pos = 0;
  }

  if (next_picture_pos < 0) {
    next_picture_pos = window.gallery_image_nodes.length - 1;
  }

  let picture_id = +window.gallery_image_nodes[next_picture_pos].getAttribute(realcommenter_get_selector('image_gallery_initer_attr'));

  if (!window.itape_gallery_id_pathes[picture_id]) {
    return;
  }

  this.interface.setAttribute('data-current-image', String(next_picture_pos));

  let inner_monitor = this.interface.querySelector('.igm_monitor');
  if (!inner_monitor) {
    return;
  }

  let img_in_monitor = inner_monitor.querySelector('img');
  if (!img_in_monitor) {
    img_in_monitor = document.createElement('img');
    inner_monitor.appendChild(img_in_monitor);
    img_in_monitor.addEventListener('load', function (inner_monitor) {
      inner_monitor.classList.toggle('ncli_tinter', false);
      this.classList.toggle('_show', true);
    }.bind(img_in_monitor, inner_monitor));

    drag_and_fire(
      img_in_monitor,
      'left',
      false,
      false,
      false,
      function (obj) {
        let _shift = (obj.drag_shift > 0) ? -1 : 1;

        realcommenter_gallery_roll.bind({
          interface: this,
          shift: _shift
        })();

      }.bind(this.interface)
    );

    img_in_monitor.addEventListener('click', function (event) {
      event.stopPropagation();
    });
  }

  inner_monitor.classList.toggle('ncli_tinter', true);
  img_in_monitor.classList.toggle('_show', false);

  setTimeout(function () {
    this.src = window.itape_gallery_id_pathes[picture_id];
  }.bind(img_in_monitor), 300);

}

function realcommenter_gallery_interface_hide () {

  // this - наш монитор
  if (!this) {
    return;
  }

  this.classList.toggle('_show', false);
  setTimeout(realcommenter_gallery_interface_remove.bind(this), 350);
}

function realcommenter_gallery_interface_remove () {

  // this - наш монитор
  if (!this) {
    return;
  }

  this.parentNode.removeChild(this);

}