import {createSlider} from "../../../sections/slider/SliderComponent";
import {createElement} from "../../../_global/scripts/helpers";
import {createHeader} from "../../../components/header/HeaderComponent";
import {sliderData} from "../../../sections/slider/SliderData";
import {createSearch} from "../../../sections/search/SearchComponent";
import {createGlobalMessage} from "../../../components/global-message/GlobalMessageComponent";
import {createFeature} from "../../../sections/feature/FeatureComponent";
import {createInfoBanner} from "../../../sections/infobanner/InfoBannerComponent";
import {createFooter} from "../../../components/footer/FooterComponent";
import {createTopicTeasersSection} from "../../../sections/topic-teasers/TopicTeasersComponent";
import {createEventsSection} from "../../../sections/events/EventsComponent";
import {createSocialSection} from "../../../sections/social/SocialComponent";
import {createTeasersSection} from "../../../sections/teasers/TeasersComponent";
import {createFlockler} from "../../../components/flockler/FlocklerComponent";

export const createHomePage = ({
  globalMessageType = 'light',
  globalMessage = 'Leider kommt es durch <a href="#">technische Wartungsmaßnahmen</a> am 2. Mai in der Zeit von 17:30–23:00 zu einer eingeschränkten Verfügbarkeit unserer Internetseite',
  globalMessageIcon = '',
}) => {
  const page = createElement('div', ['page']);
  const header = createHeader({});
  const wrapper = createElement('div', ['page-wrapper'], null, page);
  const main = createElement('main', ['page-content'], null, wrapper);
  const footer = createFooter({});

  page.insertBefore(header, wrapper);
  page.appendChild(footer);

  main.appendChild(createGlobalMessage({type: globalMessageType, message: globalMessage}));
  main.appendChild(createSearch({}));
  main.appendChild(createInfoBanner({imageSrc: null, isCommercial: false}));
  //main.appendChild(createTopicTeasersSection({}));

  main.appendChild(createFlockler({}));

  main.appendChild(createTeasersSection({headline: 'Aktuelles', type: 'hero', maxItems: 2}));
  main.appendChild(createSlider({slides: sliderData}));

  // main.appendChild(createEventsSection({}));

  main.appendChild(createFlockler({isCarousel: false}));

  main.appendChild(createTeasersSection({headline: 'Weitere Themen'}));
  main.appendChild(createSocialSection({}));
  main.appendChild(createTeasersSection({type: 'text'}));
  main.appendChild(createFeature({}));

  return page;
}

const Template = ({...args}) => {
  return createHomePage({...args});
};

export const RegularSlider = Template.bind({});
RegularSlider.args = {};