import {MelDialog, DialogPage, RcmailDialogButton, RcmailDialogChoiceButton} from './js/modalv2.js';
      import { MelHtml } from './js/MelHtml.js';



      function generate_dialog() {
        const button_add = new RcmailDialogChoiceButton('Ajouter', 'add', {
          click: (e) => {
            dialog.switch_page('page2');
            $('#txttoadd').val('');
          }
        });

        const button_clear = new RcmailDialogChoiceButton('Vider', 'clear', {click: (e) => {
          dialog.hide();
          $('#item-to-add').text('');
        }});

        const button_save = new RcmailDialogButton('Sauvegarder', {
          click: (e) => {
            $('#item-to-add').append($('<div>').text($('#txttoadd').val()));
            dialog.hide();
          }
        });
        const button_cancel = new RcmailDialogButton('Annuler', {
          click: (e) => {
            dialog.switch_page('index');
          }
        });

        const page1 = DialogPage.DrawChoice('Que faire ?', button_add, button_clear, 'index')
        let page2 = new DialogPage('page2', {title:'Ajouter un élément', buttons: [button_save, button_cancel]});
        page2.start_update_content({force_restart:true})            
          .div({class:'mel'})
            .input_text({placeholder:'Texte à ajouter', id:'txttoadd', class:'form-control'})
          .end();

        let dialog = new MelDialog(page1, {
          close() {
              doc_actions();
              dialog.switch_page('index');
          }
        });

        dialog.add_page(page2, {});

        return dialog;
      }

      let inter;
      let last_date = new Date();
      let dialog = null;

      $('#button-item').click(() => {
        if (!dialog) {
          console.log('Création de la dialog....');
          dialog = generate_dialog();
        }

        last_date = new Date();
        dialog.show();
        console.log('Redémarrer le chrono....');

        if (!inter) {
          //Détruit la dialog pour libérer de la mémoire au bout de 2 minutes de non utilisation
          inter = setInterval(() => {
            console.log('Vérification....');
            if (new Date() - last_date > 60*1000*2) {
              console.log('Suppression de la modale !');
              dialog.destroy();
              dialog = null;
              clearInterval(inter);
              inter = null;
            }
            else if (dialog._$dialog.dialog('isOpen')) {
              last_date = new Date();
              console.log('Toujours en vie !')
            }
            else console.log('Pas de signes de vie...');
          }, 60*1000);
        }
      });
    

      <button id="button-item" class="btn btn-primary">
        Ouvrir la modale
        <span class="material-symbols-outlined" id="item-to-modify">ads_click</span>
      </button>
      <div id="item-to-add"></div>