import {RcmailDialog, RcmailDialogButton, RcmailDialogChoiceButton} from './js/modal.js';
      import { MelHtml } from './js/MelHtml.js';

      $('#button-item').click(page_1);

      function page_1() {
        var dialog;

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

        dialog = RcmailDialog.DrawChoice('Que faire', button_add, button_clear);
        dialog.update_config('close', () => {
          dialog._$dialog.html('');
          $('.black-screen').hide();
        });
      }

      function page_2(dialog) {
            const button_save = new RcmailDialogButton('Sauvegarder', {
              click: (e) => {
                $('#item-to-add').append($('<div>').text($('#txttoadd').val()));
                dialog._$dialog.html('');
                dialog.hide();
                $('.black-screen').css('display', 'none');
              }
            });
            const button_cancel = new RcmailDialogButton('Annuler', {
              click: (e) => {
                dialog.hide();
                $('#button-item').click();
              }
            });
            
            const html = MelHtml.start
            .div({class:'mel'})
              .input_text({placeholder:'Texte à ajouter', id:'txttoadd', class:'form-control'})
            .end();

            dialog.hide();
            dialog = new RcmailDialog(html, {
              title: 'Ajouter un élément',
              buttons: [button_save, button_cancel],
              options: {
                close() {
                    $('.black-screen').hide();
                }
              }
            });
         
      }

    

      <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>