import menuTwig from '@ui-navigation/menu.html.twig';

import mainData from './menu.main.yml';
import './menu.main.js';

import { setMenuItemAttribues } from '.storybook/utils';

import drupalAttribute from 'drupal-attribute';

/**
 * Storybook Definition.
 */
export default { title: 'Navigation/Menus/Main' };

mainData.items.forEach(item => {
  setMenuItemAttribues(item);
});
export const main = (args) => {
  let showControls = args.showControls ?? true;

  return `${menuTwig({
    ...mainData,
    attributes: new drupalAttribute(),
  })}
  ${ (showControls)
    ? `
      <div style="position:absolute; bottom: 0;">
        <button onClick="window.dispatchEvent(new CustomEvent('main-menu:animate-in:start'))">Show Menu</button>
        <br>
        <button onClick="window.dispatchEvent(new CustomEvent('main-menu:animate-out:start'))">Hide Menu</button>
      </div>
    `
    : ''
  }`;
}
