/**
 * Grab and store references to frequently used elements.
 * These are used throughout the app.
 */
 const swapTemplate = document.querySelector('template');
      const draggableItems = document.querySelectorAll('[data-draggable]');
      const draggableItemsStore = [];
      const toolbarBtns = document.querySelectorAll('.toolbar-btn');
      const widgetsBtns = document.querySelectorAll('.widgets .btn');
      const widgetHolder = document.querySelector('.widgets');
      const widgetsCounter = document.querySelector('.widgets-counter');
      const popupContainer = document.querySelector('.popup-container');
      const popup = document.querySelector('.popup');
      /**
       * Event listeners
       */
      // Draggable items
      draggableItems.forEach((item) => {
        new Drag(item);
      });
      // Toolbar buttons
      toolbarBtns.forEach((btn) => {
        btn.addEventListener('click', (e) => {
          e.stopPropagation();
          toggleEditMode();
        });
      });
      // Widget buttons
      widgetsBtns.forEach((btn) => {
        btn.addEventListener('click', (e) => {
          e.preventDefault();
          addWidget(btn.dataset.widget);
        });
      });
      // Click event to close popup
      document.addEventListener('click', (e) => {
        const target = e.target;
        if (e.target.classList.contains('icon-remove')) {
          const popup = target.closest('.popup');
          popup.classList.remove('show');
        }
      });
      // Add widget to widgetHolder
      const addWidget = (widget) => {
        const el = swapTemplate.content.cloneNode(true);
        el.querySelector('h2').textContent = widget.name;
        el.querySelector('p').innerHTML = widget.description;
        widgetHolder.appendChild(el);
        draggableItemsStore.push(new Drag(el));
        updateWidgetsCounter();
      };
      // Update widgets counter
      const updateWidgetsCounter = () => {
        const counter = widgetsCounter.querySelector('span');
        counter.textContent = `${widgetHolder.children.length || ''} Widgets`;
      };
      // Toggle Edit Mode
      const toggleEditMode = () => {
        popupContainer.classList.toggle('show');
        document.body.classList.toggle('edit');
      };
      /**
       * Init
       */
      const init = () => {
        // Add widgets from array
        const widgets = [
          {
            name: 'Text widget',
            description: 'This is a text widget',
            icon: 'fa-pencil-alt',
          },
          {
            name: 'Photo widget',
            description: 'This is a photo widget',
            icon: 'fa-images',
          },
          {
            name: 'Chart widget',
            description: 'This is a chart widget',
            icon: 'fa-chart-pie',
          },
        ];
        
        // Call addWidget() for each widget
        widgets.forEach((widget) => addWidget(widget));
      };
      init();

</script>