/**
 * MF Layout Component - JavaScript Controller
 * Manages drawer state and provides programmatic control
 */

// Global registry for layout instances
if (typeof window.mfLayoutInstances === 'undefined') {
  window.mfLayoutInstances = {};
}

/**
 * Initialize a layout instance with drawer controls
 * @param {string} layoutId - The unique ID of the layout (mf-layout-xxx)
 */
function initLayout(layoutId) {
  const layoutElement = document.getElementById(layoutId);

  if (!layoutElement) {
    console.error(`Layout with id "${layoutId}" not found`);
    return;
  }

  // Create layout controller object
  const layoutController = {
    layoutId: layoutId,
    element: layoutElement,

    /**
     * Get drawer element by side
     * @param {string} side - 'left' or 'right'
     * @returns {HTMLElement|null} The drawer element
     */
    getDrawer: function (side) {
      if (side !== 'left' && side !== 'right') {
        console.error(`Invalid drawer side: "${side}". Must be "left" or "right".`);
        return null;
      }

      const drawerClass = side === 'left' ? '.mf-layout-left-drawer' : '.mf-layout-right-drawer';
      return this.element.querySelector(drawerClass);
    },

    /**
     * Check if a drawer is currently open
     * @param {string} side - 'left' or 'right'
     * @returns {boolean} True if drawer is open
     */
    isDrawerOpen: function (side) {
      const drawer = this.getDrawer(side);
      return drawer ? !drawer.classList.contains('collapsed') : false;
    },

    /**
     * Open a drawer
     * @param {string} side - 'left' or 'right'
     */
    openDrawer: function (side) {
      const drawer = this.getDrawer(side);
      if (drawer) {
        drawer.classList.remove('collapsed');
      }
    },

    /**
     * Close a drawer
     * @param {string} side - 'left' or 'right'
     */
    closeDrawer: function (side) {
      const drawer = this.getDrawer(side);
      if (drawer) {
        drawer.classList.add('collapsed');
      }
    },

    /**
     * Toggle a drawer between open and closed
     * @param {string} side - 'left' or 'right'
     */
    toggleDrawer: function (side) {
      if (this.isDrawerOpen(side)) {
        this.closeDrawer(side);
      } else {
        this.openDrawer(side);
      }
    },

    /**
     * Initialize event listeners for toggle buttons
     */
    initEventListeners: function () {
      // Get all toggle buttons within this layout
      const toggleButtons = this.element.querySelectorAll('[class*="mf-layout-toggle"]');

      toggleButtons.forEach(button => {
        button.addEventListener('click', (event) => {
          event.preventDefault();
          const side = button.getAttribute('data-side');
          if (side) {
            this.toggleDrawer(side);
          }
        });
      });
    }
  };

  // Initialize event listeners
  layoutController.initEventListeners();

  // Store instance in global registry for programmatic access
  window.mfLayoutInstances[layoutId] = layoutController;

  // Log successful initialization
  console.log(`Layout "${layoutId}" initialized successfully`);
}

// Export for module environments if needed
if (typeof module !== 'undefined' && module.exports) {
  module.exports = {initLayout};
}