import $ from 'jquery';
import { Rails } from '~/lib/utils/rails_ujs';
import { rstrip } from './lib/utils/common_utils';

function openConfirmDangerModal($form, $modal, text) {
  const $input = $('.js-confirm-danger-input', $modal);
  $input.val('');

  $('.js-confirm-text', $modal).text(text || '');
  $modal.modal('show');

  const confirmTextMatch = $('.js-confirm-danger-match', $modal).text();
  const $submit = $('.js-confirm-danger-submit', $modal);
  $submit.disable();
  $input.focus();

  // eslint-disable-next-line @gitlab/no-global-event-off
  $input.off('input').on('input', function handleInput() {
    const confirmText = rstrip($(this).val());
    if (confirmText === confirmTextMatch) {
      $submit.enable();
    } else {
      $submit.disable();
    }
  });

  // eslint-disable-next-line @gitlab/no-global-event-off
  $('.js-confirm-danger-submit', $modal)
    .off('click')
    .on('click', () => {
      if ($form.data('remote')) {
        Rails.fire($form[0], 'submit');
      } else {
        $form.submit();
      }
    });
}

function getModal($btn) {
  const $modal = $btn.prev('.modal');

  if ($modal.length) {
    return $modal;
  }

  return $('#modal-confirm-danger');
}

export default function initConfirmDangerModal() {
  $(document).on('click', '.js-confirm-danger', (e) => {
    const $btn = $(e.target);
    const checkFieldName = $btn.data('checkFieldName');
    const checkFieldCompareValue = $btn.data('checkCompareValue');
    const checkFieldVal = parseInt($(`[name="${checkFieldName}"]`).val(), 10);

    if (!checkFieldName || checkFieldVal < checkFieldCompareValue) {
      e.preventDefault();
      const $form = $btn.closest('form');
      const $modal = getModal($btn);
      const text = $btn.data('confirmDangerMessage');
      openConfirmDangerModal($form, $modal, text);
    }
  });
}