(function () {
  'use strict';

  const cardSelector = '[data-shared-editable-action-card]';

  const getCard = (element) => element.closest(cardSelector);

  const setEditMode = (card, enabled) => {
    if (!card) {
      return;
    }

    const readView = card.querySelector('[data-shared-editable-card-read]');
    const editView = card.querySelector('[data-shared-editable-card-form]');

    if (readView) {
      readView.hidden = enabled;
    }
    if (editView) {
      editView.hidden = !enabled;
    }
  };

  const resetDeleteConfirmation = (card) => {
    const confirmation = card?.querySelector('[data-shared-editable-card-delete-confirmation]');
    const input = card?.querySelector('[data-shared-editable-card-delete-input]');
    const submit = card?.querySelector('[data-shared-editable-card-delete-submit]');

    if (input) {
      input.value = '';
    }
    if (submit) {
      submit.disabled = true;
      submit.setAttribute('aria-disabled', 'true');
      submit.classList.add('sg-button--process-inactive');
    }
    if (confirmation) {
      confirmation.hidden = true;
    }
    if (card) {
      card.dataset.dialogOpen = 'false';
    }
  };

  const openDeleteConfirmation = (card) => {
    const confirmation = card?.querySelector('[data-shared-editable-card-delete-confirmation]');
    const input = card?.querySelector('[data-shared-editable-card-delete-input]');

    if (input) {
      input.value = '';
      input.focus();
    }
    if (confirmation) {
      confirmation.hidden = false;
    }
    if (card) {
      card.dataset.dialogOpen = 'true';
    }
  };

  const updateDeleteButton = (input) => {
    const card = getCard(input);
    const submit = card?.querySelector('[data-shared-editable-card-delete-submit]');
    const token = card?.dataset.sharedEditableDeleteToken || 'DELETE';
    const valid = input.value === token;

    if (submit) {
      submit.disabled = !valid;
      submit.setAttribute('aria-disabled', String(!valid));
      submit.classList.toggle('sg-button--process-inactive', !valid);
    }
  };

  const init = (root) => {
    if (!root || root.dataset.sharedEditableActionCardsInitialized === 'true') {
      return;
    }

    root.dataset.sharedEditableActionCardsInitialized = 'true';
    root.addEventListener('click', (event) => {
      const edit = event.target.closest('[data-shared-editable-card-edit]');
      if (edit && root.contains(edit)) {
        setEditMode(getCard(edit), true);
        return;
      }

      const cancel = event.target.closest('[data-shared-editable-card-cancel]');
      if (cancel && root.contains(cancel)) {
        const card = getCard(cancel);
        resetDeleteConfirmation(card);
        setEditMode(card, false);
        return;
      }

      const deleteButton = event.target.closest('[data-shared-editable-card-delete]');
      if (deleteButton && root.contains(deleteButton)) {
        openDeleteConfirmation(getCard(deleteButton));
        return;
      }

      const deleteCancel = event.target.closest('[data-shared-editable-card-delete-cancel]');
      if (deleteCancel && root.contains(deleteCancel)) {
        resetDeleteConfirmation(getCard(deleteCancel));
      }
    });

    root.addEventListener('input', (event) => {
      const input = event.target.closest('[data-shared-editable-card-delete-input]');
      if (input && root.contains(input)) {
        updateDeleteButton(input);
      }
    });
  };

  window.SharedEditableActionCard = { init, resetDeleteConfirmation, setEditMode };
}());