import {createElement, createSidebarPage} from "../../_global/scripts/helpers";
import {createContact} from "../../components/contact/ContactComponent";
import {SingleContactData} from "../../components/contact/ContactData";
import {createPagination} from "../../atoms/pagination/PaginationComponent";
import {createTabs} from "../../atoms/tabs/TabsComponent";
import {createPrintShare} from "../../components/print-share/PrintShareComponent";
import {ParticipationTeasersData} from "../../sections/participation-teasers/ParticipationTeasersData";
import {createParticipationListItem} from "../../components/participation-list-item/ParticipationListItemComponent";

export const createParticipationListPage = ({
  items = ParticipationTeasersData,
}) => {
  const page = createSidebarPage({breadcrumb: ['Start', 'Mitmachen', 'Aktuelle Beteiligungen']});
  const main = page.main;
  const aside = page.aside;

  createElement('h1', [], 'Aktuelle Beteiligungen', main);

  main.appendChild(createTabs({
    data: [
      {
        label: 'Alle <strong>(47)</strong>',
        link: '#',
      },
      {
        label: 'Eine Rubrik <strong>(9)</strong>',
        link: '#',
      },
      {
        label: 'Eine andere Rubrik <strong>(19)</strong>',
        link: '#',
      }
    ]
  }))

  const list = createElement('div', ['participation-list'], null, main);
  items.map((item) => {
    item.isListItem = true;
    list.appendChild(createParticipationListItem({
      ...item,
    }));
  })

  main.appendChild(createPagination({}));
  main.appendChild(createPrintShare({}));

  aside.appendChild(createContact({headline: 'Kontakt', contacts: SingleContactData}));

  return page.page;
}