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 {createSurvey} from "../../sections/survey/SurveyComponent";
import {createTextWithHeadline} from "../../components/text-with-headline/TextWithHeadlineComponent";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createSkipButton} from "../../atoms/skip-button/SkipButtonComponent";

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({});

  let skipBtn = createSkipButton();

  page.insertBefore(skipBtn, wrapper);
  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(createTeasersSection({headline: 'Aktuelles', type: 'hero', maxItems: 2}));
  main.appendChild(createTextWithHeadline({}));
  main.appendChild(createSurvey({}));
  main.appendChild(createSlider({slides: sliderData}));
  main.appendChild(createEventsSection({}));
  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 = {};