/* global jQuery */
(function ($) {
  'use strict';

  function getRow($el) {
    return $el.closest('.gsw-row');
  }

  function toggleMarkup($row) {
    if (!$row.length) return;
    var on = $row.find('.js-use-markup').is(':checked');
    $row.find('.js-markup-wrap').toggle(on);
  }

  function toggleImages($row) {
    if (!$row.length) return;
    var on = $row.find('.js-use-images').is(':checked');
    $row.find('.js-images-wrap').toggle(on);
  }

  function rebuildSizeCols($row) {
    if (!$row.length) return;

    var on = $row.find('.js-use-sizes').is(':checked');
    var $wrap = $row.find('.js-sizes-wrap');
    $wrap.toggle(on);

    var idx = parseInt($row.attr('data-index') || '0', 10);
    var saved = [];
    var savedRaw = $row.find('.js-size-cols-saved').val();

    if (savedRaw) {
      try {
        saved = JSON.parse(savedRaw);
      } catch (e) {
        saved = [];
      }
    }

    if (!Array.isArray(saved)) saved = [];

    var count = parseInt($row.find('.js-sizes-count').val() || '0', 10);
    count = Math.max(0, Math.min(20, count));

    var $container = $row.find('.js-size-cols');
    var current = [];

    $container.find('input').each(function (i) {
      current[i] = $(this).val();
    });

    $container.empty();

    for (var i = 0; i < count; i++) {
      var name = 'gsw_import_configs[' + idx + '][size_cols][' + i + ']';
      var val = current[i] ? current[i] : (saved[i] ? saved[i] : '');
      var $inp = $('<input>', {
        type: 'number',
        min: 1,
        class: 'col-small js-size-col',
        name: name,
        value: val
      });

      var $lbl = $('<label>').append($('<span>').text('#' + (i + 1) + ' ')).append($inp);
      $container.append($lbl);
    }

    $row.find('.js-size-col, .js-sizes-count').prop('disabled', !on);
  }

  function renumberIndexes() {
    $('#gsw-rows tbody .gsw-row').each(function (i) {
      var $row = $(this);
      $row.attr('data-index', i);

      $row.find('[name]').each(function () {
        var name = $(this).attr('name');
        name = name.replace(/gsw_import_configs\[[^\]]+\]/g, 'gsw_import_configs[' + i + ']');
        $(this).attr('name', name);
      });
    });
  }

  function addRow() {
    var idx = $('#gsw-rows tbody tr').length;
    var tpl = document.getElementById('gsw-row-template');
    if (!tpl) return;

    var html = (tpl.innerHTML || '').replace(/__i__/g, idx);
    var $row = $(html.trim());

    $('#gsw-rows tbody').append($row);

    toggleMarkup($row);
    rebuildSizeCols($row);
    toggleImages($row);
  }

  function openPreviewLightbox(src, title) {
    var $box = $('#gsw-preview-lightbox');
    if (!$box.length || !src) return;

    $box.find('.gsw-preview-lightbox-image').attr({
      src: src,
      alt: title || ''
    });
    $box.find('.gsw-preview-lightbox-caption').text(title || '');
    $box.prop('hidden', false);
    $('body').addClass('gsw-preview-lightbox-open');
  }

  function closePreviewLightbox() {
    var $box = $('#gsw-preview-lightbox');
    if (!$box.length) return;

    $box.prop('hidden', true);
    $box.find('.gsw-preview-lightbox-image').attr({
      src: '',
      alt: ''
    });
    $box.find('.gsw-preview-lightbox-caption').text('');
    $('body').removeClass('gsw-preview-lightbox-open');
  }

  function syncStickyToolbarLayout() {
    var $toolbar = $('.gsw-editor-actions--sticky').first();
    var $shell = $('.gsw-editor-shell').first();
    if (!$toolbar.length || !$shell.length) return;

    var shell = $shell.get(0);
    if (!shell || typeof shell.getBoundingClientRect !== 'function') return;

    var rect = shell.getBoundingClientRect();
    var left = Math.max(10, Math.round(rect.left));
    var right = Math.max(10, Math.round(window.innerWidth - rect.right));

    document.documentElement.style.setProperty('--gsw-sticky-toolbar-left', left + 'px');
    document.documentElement.style.setProperty('--gsw-sticky-toolbar-right', right + 'px');
  }

  $(document)
    .on('click', '.js-add-row', function (e) {
      e.preventDefault();
      addRow();
    })
    .on('click', '.js-remove-row', function (e) {
      e.preventDefault();
      getRow($(this)).remove();
      renumberIndexes();
    })
    .on('change', '.js-use-markup', function () {
      toggleMarkup(getRow($(this)));
    })
    .on('change', '.js-use-sizes, .js-sizes-count', function () {
      rebuildSizeCols(getRow($(this)));
    })
    .on('change', '.js-use-images', function () {
      toggleImages(getRow($(this)));
    })
    .on('click', '.js-gsw-preview-lightbox', function (e) {
      e.preventDefault();
      openPreviewLightbox(
        String($(this).attr('href') || ''),
        String($(this).data('lightbox-title') || '')
      );
    })
    .on('click', '.js-gsw-preview-lightbox-close', function (e) {
      e.preventDefault();
      closePreviewLightbox();
    })
    .on('click', '#collapse-menu', function () {
      window.setTimeout(syncStickyToolbarLayout, 60);
    });

  $(document).on('keydown', function (e) {
    if (e.key === 'Escape') {
      closePreviewLightbox();
    }
  });

  $(function () {
    $('.gsw-row').each(function () {
      var $row = $(this);
      toggleMarkup($row);
      rebuildSizeCols($row);
      toggleImages($row);
    });

    syncStickyToolbarLayout();
  });

  $(window).on('resize orientationchange', syncStickyToolbarLayout);
  $(window).on('load', syncStickyToolbarLayout);
})(jQuery);
