/**
 * Interactive behavior for duplicate reports.
 */

import { $, $$, showEl } from './utils/dom';

const selectedDupeReports = [];

function setupDupeReports() {
  const [ onion, slider ] = $$('.onion-skin__image, .onion-skin__slider');
  const swipe = $('.swipe__image');

  if (swipe) setupSwipe(swipe);
  if (onion) setupOnionSkin(onion, slider);

  setupMassSelection();
}

function setupSwipe(swipe) {
  const [ clip, divider ] = $$('#clip rect, #divider', swipe);
  const { width } = swipe.viewBox.baseVal;

  function moveDivider({ clientX }) {
    // Move center to cursor
    const rect = swipe.getBoundingClientRect();
    const newX = (clientX - rect.left) * (width / rect.width);

    divider.setAttribute('x', newX);
    clip.setAttribute('width', newX);
  }

  swipe.addEventListener('mousemove', moveDivider);
}

function setupOnionSkin(onion, slider) {
  const target = $('#target', onion);

  function setOpacity() {
    target.setAttribute('opacity', slider.value);
  }

  setOpacity();
  slider.addEventListener('input', setOpacity);
}

function setupMassSelection() {
    const submitForm = $(".js-mass-dupe-submit");

    if (!submitForm) return;

    const submitButton = $('a', submitForm);
    const hiddenField = $('input[name=duplicate_report_ids]', submitForm);

    submitButton.addEventListener('click', evt => {
        submitForm.submit();
        evt.preventDefault();
    });

    [].forEach.call($$(".js-mass-dupe-reject"), elem => {
        elem.addEventListener('change', evt => {
            const dupeReportId = evt.currentTarget.dataset.dupeReportId;

            if (evt.currentTarget.checked) {
                selectedDupeReports.push(dupeReportId);
            } else {
                selectedDupeReports.splice(selectedDupeReports.indexOf(dupeReportId), 1);
            }

            hiddenField.setAttribute('value', selectedDupeReports.join(','));
        });

        showEl(elem);
    });

    showEl(submitForm);
}

export { setupDupeReports };