function createOfferItem(data) {
  const allOfferItems = document.createDocumentFragment();

  data.forEach(offerItemData => {
    console.log(offerItemData);
    const { id, name, start, description, image } = offerItemData;

    const offerContainer = document.createElement("div");
    offerContainer.className = "pilgrimage__box";
    offerContainer.innerHTML = `
            <div class="pilgrimage__imgContainer">
                <img src="${
                  image != null
                    ? image
                    : "https://www.widzialni.pl/blog/wp-content/uploads/2017/10/google-grafika.jpg"
                }" alt="offerImage" />
            </div>
            <div class="pilgrimage__content">
                <div class="pilgrimage__title">
                    <div class="title__description"></div>
                    <span>
                        ${name}
                    </span>
                </div>
                <span class="pilgrimage__date">
                    ${start}
                </span>
                <span class="pilgrimage__description">
                    ${description}
                    w drodze do Medjugorje i nie tylko
                </span>
                <a href="http://kosciol.test/public/api/eventPaginate?page=${id}">
                    SPRAWDŹ
                </a>
            </div>
        `;

    allOfferItems.appendChild(offerContainer);
  });

  return allOfferItems;
}

function createCommentItem(data) {
  const allCommentItem = document.createDocumentFragment();

  data.forEach((commentItemData, index) => {
    const {} = commentItemData;

    const commentContainer = document.createElement("div");
    commentContainer.className = "commentary__container";
    commentContainer.innerHTML = `
            <div class="commentaryDecorationA commentaryDecorationA--${index +
              1}">
                <div class="commentaryDecorationB commentaryDecorationB--${index +
                  1}">
                    <div class="commentary__header">
                        <h3>Jan Kowalski</h3>
                        <span>10.10.2010</span>
                    </div>
                    <div class="commentary__content">
                        <h3 class="commentary__title">Temat wiadomości</h3>
                        <div class="commentary__text">
                            <span>
                                Lorem ipsum lorem ipsum lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                Lorem ipsum lorem ipsum lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                                lorem ipsum lorem ipsum Lorem ipsum, lorem ipsum lorem ipsum
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        `;

    allCommentItem.appendChild(commentContainer);
  });

  return allCommentItem;
}

class Pagination {
  constructor(
    paginationBox,
    prevButton,
    nextButton,
    itemsType,
    prePlaceForItems,
    placeForItems
  ) {
    this.paginationBox = paginationBox;
    this.prevButton = prevButton;
    this.nextButton = nextButton;
    this.prePlaceForItems = prePlaceForItems;
    this.placeForItems = placeForItems;
    this.itemsType = itemsType; //offerItem or comment
  }

  getNewData = async href => {
    try {
      const data = await axios.get(href, {
        headers: {
          Authorization:
            "Bearer vdO1uZbmSLwlAMsgJGV41HCET44JF6jTeJZbrcMylFgj9pI0Fw1bY6vXL6OC"
        }
      });
      return data;
    } catch {
      PopUp.createPopup(
        "INFORMACJA",
        "Wystąpił błąd podczas pobierania nowych ofert."
      );
    }
  };

  createNewElements = (data, initial = false) => {
    const newElements =
      this.itemsType === "offerItem"
        ? createOfferItem(data)
        : createCommentItem(data);

    if (!initial) {
      console.log(this.placeForItems);
      let height = this.prePlaceForItems.height;
      this.placeForItems.style.height = height + "px";
      this.placeForItems.style.maxHeight = height + "px";
    }

    this.placeForItems.innerHTML = null;
    this.placeForItems.appendChild(newElements);

    if (!initial) {
      height = this.prePlaceForItems.height;
      this.placeForItems.style.maxHeight = height + "px";
      this.placeForItems.style.height = null;
    }
  };

  putNewHrefs = links => {
    const { prev, next } = links;

    if (prev !== null) {
      this.prevButton.dataset.prev = prev;
      if (
        this.prevButton.classList.contains("paginationBar__element--inactive")
      )
        this.prevButton.classList.remove("paginationBar__element--inactive");
    } else {
      this.prevButton.dataset.prev = "";
      this.prevButton.classList.add("paginationBar__element--inactive");
    }

    if (next !== null) {
      this.nextButton.dataset.next = next;
      if (
        this.nextButton.classList.contains("paginationBar__element--inactive")
      )
        this.nextButton.classList.remove("paginationBar__element--inactive");
    } else {
      this.nextButton.dataset.next = "";
      this.nextButton.classList.add("paginationBar__element--inactive");
    }
  };

  newElementsHandler = event => {
    const href = event.target.dataset.controls;

    this.getNewData(href).then(newData => {
      console.log(newData);
      const { data, links } = newData;
      this.putNewHrefs(links);
      this.createNewElements(data);
    });
  };

  addListeners = () => {
    this.prevButton.addEventListener("click", this.newElementsHandler);
    this.nextButton.addEventListener("click", this.newElementsHandler);
  };

  initial(type) {
    const baseURL = "/api";
    this.getNewData(`${baseURL}/${type}`).then(initialData => {
      // console.log(initialData);
      const { data, links } = initialData.data;
      console.log(links);
      this.putNewHrefs(links);
      this.createNewElements(data, true);
    });
  }
}