import { productsData, catsData, servData } from "../data";
let Swiper = require("swiper");

const create = (tagName) => {
  return (className) => {
    let element = document.createElement(tagName);
    element.className = className;
    return element;
  };
};
const article = create("article");
const div = create("div");
const img = create("img");
const btn = create("button");
const h1 = create("h1");
const span = create("span");

const add = (parent, ...args) => {
  args.forEach((node) => {
    parent.appendChild(node);
  });
};

const addCards = (className, data) => {
  let container = div(`${className}-container swiper-container`);
  return (cardGenerator) => {
    add(
      container,
      data.reduce((cards, item) => {
        cardGenerator(className, cards, item);
        return cards;
      }, div(`${className}-wrapper cards swiper-wrapper`)),
      div("swiper-pagination")
    );

    return container;
  };
};
const renderCards = (className, cards, generator) => {
  document
    .querySelector(`.${className}-head`)
    .insertAdjacentElement("afterend", cards(generator));
};

const expandAdd = (className) => {
  document
    .querySelector(`.expand`)
    .addEventListener("click", expand(`${className}`));
};

const brandCard = (logoSrc, name, className) => {
  let card = article(`${className}-card card`);
  let cardImg = img(`${className}-img`);
  [cardImg.src, cardImg.alt] = [logoSrc, name];
  add(card, cardImg, btn(`${className}-btn btn btn--card`));
  return card;
};
const brandCards = addCards("main__brands", productsData);
const brandsGenerator = (className, cards, item) => {
  let slide = div("swiper-slide");
  add(slide, brandCard(item.logoSrc, item.name, className));
  add(cards, slide);
  return cards;
};

const catCard = (text, className) => {
  let card = article(`${className}-card card`);
  let cardText = h1(`${className}-card-title`);
  cardText.textContent = text;

  add(card, cardText, btn(`${className}-card-btn btn btn--card`));

  return card;
};
const catsCards = addCards("main__cats", catsData);
const catsGenerator = (className, cards, item) => {
  let slide = div("swiper-slide");
  add(slide, catCard(item, className));
  add(cards, slide);
  return cards;
};

const servCard = (name, price, time, className) => {
  let card = article(`${className}-card card`);
  let cardName = h1(`${className}-card-title`);
  let cardPrice = span(`${className}-price`);
  let cardTime = span(`${className}-time`);
  let cardBtn = btn(`${className}-btn btn btn--card`);
  [
    cardName.textContent,
    cardPrice.textContent,
    cardTime.textContent,
    cardBtn.textContent,
  ] = [name, price, time, "Заказать"];
  add(card, cardName, cardPrice, cardTime, cardBtn);
  return card;
};
const servCards = addCards("main__serv", servData);
const servGenerator = (className, cards, item) => {
  let slide = div("swiper-slide");
  add(slide, servCard(item.name, item.price, item.time, className));
  add(cards, slide);
  return cards;
};

renderCards("main__brands", brandCards, brandsGenerator);

renderCards("main__cats", catsCards, catsGenerator);

renderCards("main__serv", servCards, servGenerator);