import {createElement} from "../../_global/scripts/helpers";
import {createHeader} from "../../components/header/HeaderComponent";
import {createFooter} from "../../components/footer/FooterComponent";
import {createElectionForm} from "../../components/election-form/ElectionFormComponent";
import {createImageText} from "../../components/image-text/ImageTextComponent";
import {createHowToList} from "../../components/howto-list/HowToListComponent";
import {createMagazineHeader} from "../../components/magazine-header/MagazineHeaderComponent";
import {createParticipationStage} from "../../sections/participation-stage/ParticipationStageComponent";

export const createElectionStartPage = ({
  stageWithImage = false,
}) => {
  const page = createElement('div', ['page', 'header-collapsed']);
  const magazineHeader = createMagazineHeader({
    title: 'Eine starke Entscheidung',
    smalltext: 'IHK Musterstadt Wahl 2024',
    logo: './logos/magazine-header-flag.png',
  });

  page.appendChild(createHeader({}));
  page.appendChild(magazineHeader);

  const wrapper = createElement('div', ['page-wrapper'], null, page);
  const pageContent = createElement('div', ['page-content'], null, wrapper);

  pageContent.appendChild(createParticipationStage({
    imageSrc: null,
    kicker: 'IHK Musterstadt Vollversammlung',
    headline: 'Mach’ mit bei der Wahl zur Vollversammlung der IHK Musterstadt!',
    copy: 'Die Vollversammlung ist das demokratische Herzstück der IHK. Hier entscheiden alle wesentlichen Branchen der regionalen Wirtschaft gemeinsam über die Zukunft der Region.',
    moreCta: null,
    buttonCta: {
      label: 'Entdecken Sie Ihre Kandidat:innen',
      link: '#',
      target: '_self',
    },
    showProgress: false,
    progress: null,
    backgroundImage: './logos/election-header.jpg',
    isFirstElement: true,
  }));
  const container = createElement('div', ['container'], null, pageContent);

  container.appendChild(createHowToList({}));
  container.appendChild(createImageText({colored: 'colored'}));
  container.appendChild(createImageText({switched: 'switched'}));
  container.appendChild(createElectionForm({}));

  page.appendChild(createFooter({}))

  return page;
}