import documentReady from '@assets/js/documentReady';
import axiosApi from '@assets/js/axios-api';
import param from '@assets/js/param';

documentReady(async () => {
  const section = document.querySelectorAll('.mini-card');
  const openCloseModal = document.querySelectorAll('.open-close-modal');
  const input = document.querySelector('input[type="file"]');
  const imgPic = document.querySelector('.img-pic');
  const userIcon = document.querySelector('.user-icon');
  const imgProfile = document.querySelector('.img-profile');
  const savePicture = document.querySelector('.save-picture');
  const floppyIcon = document.querySelector('.fa-floppy-disk');
  const checkIcon = document.querySelector('.fa-check');
  const configPicture = document.querySelector('.config-picture');
  const finishPicture = document.querySelector('.finish-picture');
  const deletePicture = document.querySelector('.delete-picture');
  const baseImg = imgProfile?.getAttribute('src');

  let saved = false;
  let time;
  let lastImg;

  openCloseModal.forEach(item => {
    if (imgProfile) saved = true;
    item.onclick = function(event) {
      clearTimeout(time);
      configPicture.classList.toggle('show-configImg');
      if (userIcon && !saved) {
        deletePicture.classList.add('disable-delete');
        display('flex', 'none');
      } else {
        deletePicture.classList.remove('disable-delete');
        lastImg ? imgProfile?.setAttribute('src', lastImg) : imgProfile?.setAttribute('src', baseImg);
        imgPic?.setAttribute('src', lastImg);
        display('none', 'flex');
      }
      if (document.querySelector('.show-finishImg')) finishPicture.classList.toggle('show-finishImg');
      if (document.querySelector('.show-configImg')) {
        time = setTimeout(() => {
          configPicture.classList.toggle('show-configImg');
          if (document.querySelector('.show-finishImg')) finishPicture.classList.toggle('show-finishImg');
        }, 5000);
      }
    };
  });

  deletePicture.onclick = function(event) {
    if (!document.querySelector('.disable-delete')) {
      configPicture.classList.toggle('show-configImg');
      finishPicture.classList.add('show-finishImg');
      display('flex', 'none');
      clearTimeout(time);

      savePicture.onclick = function() {
        save(null);
        saved = false;
      };
    }
  };

  section.forEach(item => {
    if (window.location.href.includes(item.getAttribute('data'))) item.classList.add('sectionSelect')
    if ((window.location.href.includes('account/home') ||
        window.location.href.includes('account/password') ||
        window.location.href.includes('account/edit')) &&
        item.getAttribute('data') == 'account/account') item.classList.add('sectionSelect');
  });

  input.onclick = function() {
    clearTimeout(time);
    input.value = '';
  };

  input.addEventListener('change', () => {
    const file = input.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', () => {
      finishPicture.classList.add('show-finishImg');
      const base64String = btoa(reader.result);
      const imgBase64 = `data:${file.type};base64,${base64String}`;
      var img = new Image();
      img.src = imgBase64;

      img.onload = function() {
        var newWidth = 250;
        var newHeight = 250;
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = newWidth;
        canvas.height = newHeight;
        ctx.drawImage(img, 0, 0, newWidth, newHeight);
        var newBase64String = canvas.toDataURL('image/jpeg');
        imgPic?.setAttribute('src', newBase64String);
        imgProfile?.setAttribute('src', newBase64String);
        display('none', 'flex');
        configPicture.classList.remove('show-configImg');

        savePicture.onclick = function() {
          save(newBase64String);
          saved = true;
          lastImg = newBase64String;
        };
      };
    });
    if (file) reader.readAsBinaryString(file);
  });

  function update(value) {
    const { data } = axiosApi.post(
      'index.php?route=account/account/setImageCustomer',
      param({
        imgCostumer: value,
      })
    );
  }

  function save(value) {
    update(value);
    floppyIcon.classList.toggle('floppy-icon');
    checkIcon.classList.toggle('check-icon');

    setTimeout(() => {
      finishPicture.classList.toggle('show-finishImg');
      floppyIcon.classList.toggle('floppy-icon');
      checkIcon.classList.toggle('check-icon')
    }, 1000);
  }

  function display(value1, value2) {
    userIcon ? (userIcon.style.display = value1) : '';
    imgPic ? (imgPic.style.display = value2) : '';
    imgProfile ? (imgProfile.style.display = value2) : '';
  }
});
