import ModalService from '~/services/modal.service';

async function validate() {
  console.log('==> VALIDATE');
  const modalservice = await ModalService.getInstance();
  modalservice.closeValidationModal();
}

export async function initValidationModal(processDiffs: any) {
  console.log('🚀 ~ initValidationModal ~ processDiffs:', processDiffs);
  for (const diff of processDiffs.diffs) {
    let diffs = '';
    for (const value of diff) {
      diffs += `
    <div class="radio-buttons">
    <label>
    <input type="radio" name="validation1" value="old" />
    Keep Old
    </label>
    <label>
    <input type="radio" name="validation1" value="new" />
    Keep New
    </label>
    </div>
    <div class="diff">
    <div class="diff-side diff-old">
    <pre>-${value.previous_value}</pre>
    </div>
    <div class="diff-side diff-new">
    <pre>+${value.new_value}</pre>
    </div>
    </div>
    `;
    }

    const state = `
 <div class="expansion-panel">
        <div class="expansion-panel-header">State ${diff[0].new_state_merkle_root}</div>
        <div class="expansion-panel-body">
          ${diffs}
          </div>
          </div>
          `;
    const box = document.querySelector('.validation-box');
    if (box) box.innerHTML += state;
  }
  document.querySelectorAll('.expansion-panel-header').forEach((header) => {
    header.addEventListener('click', function (event) {
      const target = event.target as HTMLElement;
      const body = target.nextElementSibling as HTMLElement;
      if (body?.style) body.style.display = body.style.display === 'block' ? 'none' : 'block';
    });
  });
}

(window as any).validate = validate;