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;