/*
  -------------------------------------------------------------------------------------
  Dreamgest Framework v2
  -------------------------------------------------------------------------------------

  Copyright 2024 ~ 2025 Dreamgest ltd.
  All rights reserved.
  Reproduction, even partial, by any means is prohibited without written authorization.

  Author: Dreamgest ltd 
  Email: help@dreamgest.com
  Website: https://dreamgest.com
  -------------------------------------------------------------------------------------

*/

document.addEventListener('DOMContentLoaded', () => {
  // datatables
  window.appTables ??= [];

  // datatable simple
  document.querySelectorAll('table[data-table]').forEach(el => {
    window.appTables.push(new window.DataTable(el));
  });
  // datatable complex
  document.querySelectorAll('table[data-datatable]').forEach(e => {
    try {
      e.style.width = '100%';
      let buttons = JSON.parse(e.dataset.buttons ?? '["csv","excel","pdf","print"]');
      const options = {
        dom: 'Bfrtip',
        buttons: buttons,
        colReorder: true,
        scrollX: true,
        scrollY: '50vh',
        scrollCollapse: true,
        scroller: true,
      };
      if (language_ext.substr(0, 2) !== 'en') {
        options.language = {
          url: `//cdn.datatables.net/plug-ins/1.13.7/i18n/${language_ext}.json`
        }
      }
      let t = new DataTable(e, options);
      t.on('draw', () => {
        e.querySelector('tbody').classList.toggle('d-none', false);
      })
      window.appTables.push(t);
    } catch (error) {
      console.log(error);
      e.querySelector('tbody').classList.toggle('d-none', false);
    }

  });


  // Autosave
  async function autosave(el) {

    const url = el.dataset.autosave ?? `${APP_BASE_URL}/ajax/${MODULE_ID}`;
    const method = el.dataset.method ?? 'PATCH';

    if (!el.dataset.recordid || el.dataset.recordid === 'new') {
      console.log("Not recordid defined. Autosave aborted");
      return new Promise.resolve();
    }

    try {
      // const res = await DGFramework.ajax(method, url, {id:el.id, value:el.value});
      const data = {
        id: el.dataset.recordid,
      }
      data[el.id] = el.value;
      const res = await DGFramework.ajax(method, url, data);

      if (!el.classList) {
        // Editor Summernote
        return Promise.resolve(true);
      }

      el.classList.toggle('is-invalid', false);
      el.classList.toggle('is-valid', true);

      return Promise.resolve(true);

    } catch (error) {
      console.log(error);

      if (!el.classList) {
        // Editor Summernote
        return Promise.reject(error);
      }

      el.classList.toggle('is-invalid', true);
      el.classList.toggle('is-valid', false);
      return Promise.reject(error);
    } finally {
      if (!el.classList) {
        return;
      }
      setTimeout(() => {
        el.classList.toggle('is-invalid', false);
        el.classList.toggle('is-valid', false);
      }, 5000);
    }
  }

  document.querySelectorAll('[data-autosave]').forEach(el => {
    if (el.dataset.form !== undefined) {
      el.querySelectorAll('input,select,textarea').forEach(e => {
        e.addEventListener('change', ev => autosave(e));
      })
    } else {
      el.addEventListener('change', ev => autosave(el));
    }
  });

  document.querySelectorAll('[data-editor]').forEach(el => {
    $(el).summernote();

    let editorChanged = false;

    // onChange callback
    $(el).on('summernote.change', function (we, contents, $editable) {
      editorChanged = true;
    });

    // onBlur
    $(el).on('summernote.blur', function () {
      if (editorChanged) {
        let e = {
          id: el.id,
          value: $(el).summernote('code'),
          dataset: el.dataset,
        }
        const label = document.querySelector(`[for="${el.id}"]`);
        autosave(e)
          .then(() => {
            if (label) {
              label.classList.toggle('text-save-success', true);
              label.classList.toggle('text-save-danger', false);
            }
          })
          .catch((err) => {
            if (label) {
              label.classList.toggle('text-save-success', false);
              label.classList.toggle('text-save-danger', true);
            }
          })
          .finally(() => {
            editorChanged = false;
            setTimeout(() => {
              const label = document.querySelector(`[for="${el.id}"]`);
              if (label) {
                label.classList.toggle('text-save-success', false);
                label.classList.toggle('text-save-danger', false);
              }
            }, 5000);
          })
      }
    });

    // onEnter -> [ENTER] Key
    $(el).on('summernote.enter', function () {

      if (editorChanged) {
        let e = {
          id: el.id,
          value: $(el).summernote('code'),
          dataset: el.dataset,
        }
        const label = document.querySelector(`[for="${el.id}"]`);
        autosave(e)
          .then(() => {
            if (label) {
              label.classList.toggle('text-save-success', true);
              label.classList.toggle('text-save-danger', false);
            }
          })
          .catch((err) => {
            if (label) {
              label.classList.toggle('text-save-success', false);
              label.classList.toggle('text-save-danger', true);
            }
          })
          .finally(() => {
            editorChanged = false;
            setTimeout(() => {
              const label = document.querySelector(`[for="${el.id}"]`);
              if (label) {
                label.classList.toggle('text-save-success', false);
                label.classList.toggle('text-save-danger', false);
              }
            }, 5000);
          })
      }
    });

    // Window: onBeforeUnload
    window.addEventListener("beforeunload", (event) => {
      if (editorChanged) event.preventDefault();
    });


  });

});