import siteHeaderTwig from './site-header.twig';
import siteHeaderData from './site-header.yml';
import './site-header.js';

import '@ui-site-layout/component/menu-toggle/menu-toggle.js';
import '@ui-site-layout/component/site-mode-switcher/site-mode-switcher.js';

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

import { main } from '@ui-navigation/main/component/menu.main.stories';
import { social } from '@ui-navigation/social/component/menu.social.stories';
import { brandingBlock } from '@ui-block/branding-block/component/block.branding-block.stories';

/**
 * Storybook Definition.
 */
export default { title: 'Site Layout/Site Header' };

export const siteHeader = (args) => {
  // Create deep copy of data and merge args.
  let data = JSON.parse(JSON.stringify(siteHeaderData ?? {}));
  data = Object.assign(data, args);

  return `${siteHeaderTwig({
    ...data,
    site_header_branding_block: brandingBlock(),
    site_header_main_menu: fakeDrupalSystemMenuBlock('main', main({showControls: false})),
    site_header_social_menu: fakeDrupalSystemMenuBlock('social', social()),
  })}
  <div style="min-height:102vh;">
    <p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.</p>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
    <p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.</p>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
    <p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
  </div>`;
}
siteHeader.args = siteHeaderData;
