// resources\assets\ts\form.ts
import { PunktExt } from '~/js/forms';

// window.formargs = { byid, resid, ergid };
declare global {
  interface Window {
    formargs: any;
  }
}


function attachButton(agb) {
  var btSave = document.getElementById('btSave');
  agb.pktChange = function () {
    var ok = agb.istrue();
    btSave.disabled = !ok;
    btSave.children[0].hidden = !ok;
    btSave.children[1].hidden = ok;
  };
  agb.pktChange();
  btSave.onclick = function () {
    btSave.hidden = true;
    try {
      agb.save();            
      const targetWindow = window.opener || window.parent;
      if (targetWindow && targetWindow !== window) {
        targetWindow.postMessage({
          type: 'CARD_MOVED',
          payload: { id: window.formargs?.byid || null }
        }, window.location.origin);
      }
      window.close();
      
    } catch (err) {
      alert(err);
      btSave.hidden = false;
    }
  };
}


function attachManyEditButton(forms: any[]) {
  var btSave = document.getElementById('btSave');
  let validationArr = new Array(forms.length).fill(false);
  for (let i = 0; i < forms.length; i++) {
    const agb = forms[i];
    agb.pktChange = function () {
      var ok = agb.istrue();
      validationArr[i] = ok;

      if (validationArr.includes(false)) {
        btSave.disabled = true;
        btSave.children[0].hidden = true;
        btSave.children[1].hidden = false;
      } else {
        btSave.disabled = false;
        btSave.children[0].hidden = false;
        btSave.children[1].hidden = true;
      }
    };
    agb.pktChange();
  }

  btSave.onclick = function () {
    btSave.hidden = true;
    setTimeout(function () {
      try {
        forms.forEach(function (agb) {
          agb.save();
        });
        
        // Wait for backend to persist the data before refreshing
        setTimeout(function () {
          const targetWindow = window.opener || window.parent;
          if (targetWindow && targetWindow !== window) {
            targetWindow.postMessage({
              type: 'CARD_MOVED',
              payload: { id: window.formargs?.byid || null }
            }, window.location.origin);
          }
          window.close();
        }, 500); // 500ms delay to ensure backend persistence
        
      } catch (err) {
        alert(err);
        btSave.hidden = false;
      }
    }, 100);
  };
}


function startForm() {
  const args = window.formargs;
  let form;

  if (args.byid !== null) {
    form = PunktExt({ 'by.id': args.byid });
    document.getElementById('attach-form').appendChild(form);
    attachButton(form);
    return;
  }

  const isMultipleFormEdit = args.multi.length > 1;
  if (isMultipleFormEdit) {
    let forms = [];
    for (let ticket of args.multi) {
      const lngID = ticket.ticket_id;
      const form = PunktExt({
        'by.id': 0,
        d: { resid: lngID },
        ergID: args.ergid,
      });
      //console.log("log: ", args.multi.ergid);
      forms.push(form);

      let formcontainer = document.createElement('div');

      const formtitle = document.createElement('h3');
      formtitle.textContent = `${ticket.agb_name}`;

      formcontainer.appendChild(formtitle);
      formcontainer.appendChild(form);

      formcontainer.style.marginBottom = '2rem';
      formcontainer.style.border = '3px solid #ccc';
      document.getElementById('attach-form').appendChild(formcontainer);
    }
    attachManyEditButton(forms);

    return;
  }

  form = PunktExt({
    'by.id': 0,
    d: { resid: args.resid },
    ergID: args.ergid,
  });

  document.getElementById('attach-form').appendChild(form);
  attachButton(form);
}

startForm();