const modBdy1 = document.querySelector(".mod-bdy1");
const modBdy2 = document.querySelector(".mod-bdy2");
const bck = document.querySelector(".bck");
const bck2 = document.querySelector(".bck2");
const nxt = document.querySelector(".nxt");
const confirmBtn = document.querySelector(".confirm");
const span1 = document.querySelector(".span1");
const span2 = document.querySelector(".span2");
const span3 = document.querySelector(".span3");
const span4 = document.querySelector(".span4");
const modCls = document.querySelector(".mod-cls");
const modSecs = document.querySelector(".modal-section");
const openLink = document.querySelector(".openLink");
const modalCont = document.querySelector(".modal-cont");
const tt = app.query('#title');
let img = app.query("#file");



nxt.style.display = 'none';
tt.addEventListener('keyup', (e) => {
  if (e.target.value.length > 1) {
    nxt.style.display = 'flex';
  } else {
    nxt.style.display = 'none';
  }
})

// background: #6610f2;

nxt.addEventListener("click", (e) => {
  e.preventDefault();
  resetConts();
  modBdy2.classList.add("active");
  span1.classList.add("active");
});

bck.addEventListener("click", (e) => {
  e.preventDefault();
  resetConts();
  span1.classList.remove("active");
  span2.classList.remove("active");
  modSecs.classList.remove("active");
});

bck2.addEventListener("click", (e) => {
  e.preventDefault();
  resetConts();
  span1.classList.remove("active");
  span2.classList.remove("active");
  modBdy1.classList.add("active");
});


confirmBtn.addEventListener("click", (e) => {
  e.preventDefault();
  span2.classList.add("active");

  let amt = app.query('.az_amount').value;
  const amount = !amt.length > 0 ? 0 : amt;
  let dataObj = {
    title: app.query('#title').value,
    description: app.query('#descrip').value,
    countryIso3: app.query('.currency_type').value,
    amount: amount,
    redirect: app.query('.az_redirect').value,
    token: app.getCookie('azer_token', (e, r) => {
      if (e) return r;
    })
  };

  swal({
    title: 'Loading',
    html: 'Please wait...',
    // type: 'success',
    padding: '2em',
    onOpen: function () {
      swal.showLoading()
    }
  })

  app.client.fetch('../../auth/create_payment_link', 'POST', dataObj).then((r) => {
    if (r.isSuccess) {
      app.client.sweetAlertS(r.icon, r.message, r.title, r.redirectUrl);
    } else {
      app.client.sweetAlertE(r.icon, r.message);
    }
  });
});



function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = () => {
    console.log(reader.result);
  }
  reader.readAsDataURL(file);
  // console.log(reader.result);
}

function getDataUrl(img) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  return canvas.toDataURL('image/jpeg');
}

function PreviewImage(file) {

  if (!['image/jpeg', 'image/png'].includes(file.files[0].type)) {
    // app.query('.upld-sec-1-txt').innerHTML += '<div class="alert alert-danger">Only .jpg and .png image are allowed</div>';
    app.client.sweetAlertE('error', 'Invalid image type', 'Only .jpg and .png image are allowed');
    file.files[0].value = '';
    return;
  }

  // check file size (< 2MB)
  if (file.files[0].size > 1 * 1024 * 1024) {
    app.client.sweetAlertE('error', 'File exceed accepted size', 'File must be less than 1 MB');
    file.files[0].value = '';
    return;
  }

  var oFReader = new FileReader();
  oFReader.readAsDataURL(file.files[0]);
  oFReader.onload = function (oFREvent) {
    app.query("#uploadPreview").src = oFREvent.target.result;
  };

  // console.log(getDataUrl(file));

};

modCls.addEventListener("click", () => {
  resetConts();
  span1.classList.remove("active");
  span2.classList.remove("active");
  modSecs.classList.remove("active");
});
openLink.addEventListener("click", () => {
  modSecs.classList.add("active");
  resetConts();
  modBdy1.classList.add("active");
});

const resetConts = () => {
  modBdy1.classList.remove("active");
  modBdy2.classList.remove("active");
  span1.classList.remove("active");
};

modSecs.addEventListener("click", (e) => {
  var isClickInsideElement = modalCont.contains(e.target);
  if (!isClickInsideElement) {
    span1.classList.remove("active");
    span2.classList.remove("active");
    modSecs.classList.remove("active");
    modSecs.classList.remove("active");
  }
});