class T092M {
  constructor() {
    this.newFilterAndOrderButton();
  }

  newFilterAndOrderButton() {
    const refElem = document.querySelector(".department__top");

    const html = `
      <div class="juni-new-btns">
        <button type="button" class="btn-juni-1" id="open-filter-menu">
          Filtrar
          <span id="filterAmount"></span>
        </button>
        <div id="move-old-order"></div>
      </div>
      <div id="filter-control-cat-page"></div>
    `;

    refElem.insertAdjacentHTML("afterend", html);

    // Move o atual botão de ordenar para a nova posição
    const [, originalOrderBtn] = document.querySelectorAll(".refinar-busca");
    $("#move-old-order").append(originalOrderBtn);
  }
}

new T092M();

class SliderMenu {
  constructor(triggerElement) {
    this.trigger = triggerElement;
    this.opts = this.defineFilterOptions();
    this.open = false;

    // { category: "Tamanho", param: "fq=specificationFilter_27:35", labelName: "35" }
    this.params = [];

    this.init();
  }

  init() {
    const { trigger } = this;
    trigger.addEventListener("click", () => {
      const { openMenu } = this;
      openMenu.bind(this)();
    });

    this.buildMenu();
    this.buildMenuItens();
  }

  buildMenu() {
    const html = `
      <div class="slider-menu">
        <div class="slider-menu-overlay"></div>
        <main class="slider-menu-content">
          <div id="content"></div>
          <footer>
            <button id="bt-limpar" type="button" class="clean-filter-btn">Limpar filtros</button>
            <button id="bt-filtrar" type="button">OK</button>
          </footer>
        </main>
      </div>
    `;

    document.body.insertAdjacentHTML("afterbegin", html);

    const overlay = document.querySelector(".slider-menu-overlay");
    overlay.addEventListener("click", this.closeMenu);

    // Filtrar
    document.getElementById("bt-filtrar").addEventListener("click", () => {
      // Faz a requisição
      this.fetchItens();

      // Fecha o menu
      this.closeMenu();
    });

    // Limpar filtros
    document.getElementById("bt-limpar").addEventListener("click", e => {
      this.limparFiltros();
    });
  }

  buildMenuItens() {
    // Pega as opções que vão estar no menu
    const { opts } = this;
    const sliderContent = document.querySelector(
      ".slider-menu-content #content"
    );

    // Header escrito "Filtros"
    const filterHeader = document.createElement("header");
    filterHeader.classList.add("slider-header");
    filterHeader.innerHTML = "<span>Filtros</span>";

    // Botão de fechar o filtro
    const closeFilterMenuBtn = document.createElement("button");
    closeFilterMenuBtn.innerText = "<";
    closeFilterMenuBtn.addEventListener("click", this.closeMenu);

    // Appenda o Titulo e o botão de fechar na tag <header>
    filterHeader.insertAdjacentElement("beforeend", closeFilterMenuBtn);
    sliderContent.insertAdjacentElement("beforebegin", filterHeader);

    // Define as categorias de filtro COR, TAMANHO e FAIXA DE PREÇO
    opts.forEach(opt => {
      const { title, opts: filtersOpts, _class } = opt;

      const div = document.createElement("div");

      // Define um id pra div que vai conter os filtros aplicados da respectiva categoria
      // COR, TAMANHO E PREÇO
      const idFiltersAplied = title
        .split(" ")
        .join("_")
        .toLocaleLowerCase();

      div.role = "button";
      div.classList.add("slider-item");
      div.innerHTML = `
        <div class="title">
          <h2>${title}</h2>
          <span id="${idFiltersAplied}-cat-aplied" class="filters-cat-aplied"></span>
          <span class="arrow"></span>
        </div>
      `;

      // Cria a div que vai conter todas as opções de filtro da respectiva categoria
      const sliderSubs = document.createElement("div");
      sliderSubs.classList.add("slider-item-subs");
      if (_class) {
        sliderSubs.classList.add("price-filter-style");
      }

      // Cria as opções de filtro de cada categoria ex: (Tamanho: [41,40,42], cor: [verde, amarelo])
      filtersOpts.forEach(filter => {
        const { name, rel, background } = filter;
        sliderSubs.insertAdjacentElement(
          "beforeend",
          this.buildCustomCheckBox(name, rel, background, title)
        );
      });

      div.insertAdjacentElement("beforeend", sliderSubs);

      sliderContent.insertAdjacentElement("beforeend", div);
    });

    // add a div que vai conter os botões para remover os filtros
    sliderContent.insertAdjacentHTML(
      "beforeend",
      `<div id="filters-btns-bottom"></div>`
    );

    // Adiciona o dropdown nas categorias de filtros
    document.querySelectorAll(".slider-item").forEach(slider => {
      const subs = slider.querySelector(".slider-item-subs");
      let clicked = false;
      slider.querySelector(".title").addEventListener("click", () => {
        if (!clicked) {
          $(subs).addClass("visible");
          $(subs).slideDown();
          clicked = true;
        } else {
          $(subs).removeClass("visible");
          $(subs).slideUp();
          clicked = false;
        }
      });
    });
  }

  // label: Nome que vai aparecer
  // parametro: valor a ser mandado para requisição
  // categoria: cor, preço, valor
  buildCustomCheckBox(labelName, parametro, background, category) {
    const checkBoxGroup = document.createElement("div");
    checkBoxGroup.classList.add("checkbox-group");

    // insere o input, input fake e o nome que deve aparecer pro usuário
    const input = document.createElement("input");
    input.type = "checkbox";
    input.name = parametro;

    // Input fake
    const inputFake = document.createElement("span");
    inputFake.classList.add("fake-checkbox");
    inputFake.setAttribute("rel", parametro);
    inputFake.addEventListener("click", e => {
      const { target } = e;
      const param = target.getAttribute("rel");

      const checked = target.classList.contains("checked");
      if (checked) {
        target.classList.remove("checked");
        this.removeParam(param);
      } else {
        target.classList.add("checked");
        this.addParam(param, category, labelName);
        console.log(this.params);
      }
    });

    // label com o nome
    const label = document.createElement("label");
    label.innerText = labelName;

    // Adiciona todos os elementos acima ao container checkBoxGroup
    checkBoxGroup.insertAdjacentElement("beforeend", inputFake);
    if (background) {
      const spanColor = document.createElement("span");
      spanColor.classList.add("span-color");
      spanColor.style.background = background;
      checkBoxGroup.insertAdjacentElement("beforeend", spanColor);
    }
    checkBoxGroup.insertAdjacentElement("beforeend", label);
    checkBoxGroup.insertAdjacentElement("beforeend", input);

    return checkBoxGroup;
  }

  addParam(param, category, labelName) {
    const { params, renderOnParamChange } = this;
    const exsist = params.find(p => p.param === param);

    if (!exsist) {
      this.params.push({ category, param, labelName });
    }
    renderOnParamChange.bind(this)();
  }

  removeParam(param) {
    const { params, renderOnParamChange, removeCheckMark } = this;
    const newParams = params.filter(p => p.param !== param);

    this.params = newParams;
    renderOnParamChange.bind(this)();
    removeCheckMark(param);
  }

  removeCheckMark(param) {
    document.querySelectorAll(".fake-checkbox.checked").forEach(cb => {
      const is = cb.getAttribute("rel") === param;

      if (is) cb.classList.remove("checked");
    });
  }

  updateFilterAmount() {
    document.getElementById("filterAmount").innerText = this.params.length
      ? `(${this.params.length})`
      : "";
  }

  limparFiltros() {
    const { params } = this;
    this.params = [];

    this.renderOnParamChange();
    params.forEach(p => this.removeCheckMark(p.param));
    this.fetchItens();

    this.closeMenu();
  }

  // Vou pegar todas as opções de filtro da páginas e setar numa propriedade da classe
  // a propriedade vai ser um objeto no seguinte formato:
  // { title: string, opts: [{ rel, name }] }
  defineFilterOptions() {
    const fieldsets = document.querySelectorAll(
      ".search-multiple-navigator fieldset"
    );

    const itens = [...fieldsets].map(fieldset => {
      // Pega o tab com o titulo da categoria do filtro original
      const h5 = fieldset.querySelector("h5").innerText;

      // Se for o item de cores
      const isColorItem = h5 === "Cores Filtráveis";

      // Define o titulo
      const title = isColorItem ? "Cores" : h5;
      let opts = [];

      const inputs = fieldset.querySelectorAll("div > label > input");
      inputs.forEach(input => {
        const rel = input.getAttribute("rel");
        const name = input.getAttribute("name");
        const { background } = window.getComputedStyle(
          input.nextElementSibling,
          ":before"
        );

        // insere os inputs
        opts.push({
          rel,
          name,
          background: isColorItem ? background : null
        });
      });

      return { title, opts };
    });

    const filteredFilterOptions = itens.filter(item => {
      const { title } = item;

      return title === "Cores" || title === "Tamanho";
    });

    return [
      ...filteredFilterOptions,
      {
        title: "Preço",
        _class: "price-filter-style",
        opts: [
          { rel: "fq=P:0.00+TO+200.00", name: "até R$200" },
          { rel: "fq=P:200.00+TO+800.00", name: "R$200 - R$800" },
          { rel: "fq=P:800.00+TO+1500.00", name: "R$800 - R$1.500" }
        ]
      }
    ];
  }

  // Define o primeiro parametro que vai na requisição com base no dataLayer da página
  defineCategoryParameter() {
    const [, category] = dataLayer[0].pageFacets[1].split("/");
    const parsedCategory = parseInt(category);

    const subCategory = dataLayer[0].categoryId;

    // Se forem iguais, quer dizer que não tem subcategoria na pagina
    // Ex: joias/brinco.
    if (parsedCategory === subCategory) {
      return `C:/${category}/`;
    }
    return `C:/${category}/${subCategory}/`;
  }

  /**
   * @param {{ sizes: Array, colors: Array, prices: Array }} filtersSelected
   */
  async fetchItens() {
    const { params } = this;
    const categoryParameter = this.defineCategoryParameter();

    let defaultBody = {

    }

    const defaultBody = {
      O: "OrderByReleaseDateDESC",
      PS: 24,
      sl: "c534df6b-b28d-1d0e-d68f-3efaf8c2db36",
      cc: 24,
      sm: 0,
      PageNumber: 1,
      fq: categoryParameter
    };

    const urlParams = params.map(p => p.param);

    const url = `https://www.abrand.com.br/buscapagina?${$.param(
      defaultBody
    )}&${urlParams.join("&")}`;
    fetch(url)
      .then(res => res.text())
      .then(data => {
        const [, ref] = document
          .querySelector(".pager.top")
          .getAttribute("id")
          .split("_");
        const container = document.querySelector(`#ResultItems_${ref}`);
        container.innerHTML = data;
      });

    this.exibeFiltrosNoHeaderDaCategoria();
    this.buildApliedFiltersBtnsOnBottom();
    // Bota os filtros aplicados na página de categoria
    this.buildFiltersApliedOnCatPage();
    this.updateFilterAmount();
  }

  exibeFiltrosNoHeaderDaCategoria() {
    const { params } = this;

    const priceItens = params.filter(item => item.category === "Preço");
    const sizeItens = params.filter(item => item.category === "Tamanho");
    const colorItens = params.filter(item => item.category === "Cores");

    // PRICE
    const pricesContainer = document.getElementById("preço-cat-aplied");
    let pricesHTML = "";
    if (priceItens.length) {
      pricesHTML = `(${priceItens
        .map((price, index, arr) => {
          if (index === 0) {
            return price.labelName;
          }

          if (index < 2) {
            return `, ${price.labelName}`;
          }

          if (index === 2) {
            return `, +${arr.length - 2}`;
          }
        })
        .join("")})`;
    }

    pricesContainer.innerHTML = pricesHTML;

    // TAMANHO
    const sizesContainer = document.getElementById("tamanho-cat-aplied");
    let sizesHTML = "";
    if (sizeItens.length) {
      sizesHTML = `(${sizeItens
        .map((size, index, arr) => {
          if (index === 0) {
            return size.labelName;
          }

          if (index < 2) {
            return `, ${size.labelName}`;
          }

          if (index === 2) {
            return `, +${arr.length - 2}`;
          }
        })
        .join("")})`;
    }

    sizesContainer.innerHTML = sizesHTML;

    // CORES
    const colorContainer = document.getElementById("cores-cat-aplied");
    let colorHtml = "";
    if (colorItens.length) {
      colorHtml = `(${colorItens
        .map((color, index, arr) => {
          if (index === 0) {
            return color.labelName;
          }

          if (index < 2) {
            return `, ${color.labelName}`;
          }

          if (index === 2) {
            return `, +${arr.length - 2}`;
          }
        })
        .join("")})`;
    }

    colorContainer.innerHTML = colorHtml;
  }

  /**
   * Exibe os filtros aplicados como botões no final do menu lateral
   */
  buildApliedFiltersBtnsOnBottom() {
    // {category: "Tamanho", param: "fq=specificationFilter_27:35", labelName: "35"}
    const { params } = this;
    const container = document.getElementById("filters-btns-bottom");
    container.innerHTML = "";

    params.forEach(param => {
      const { category, param: rel, labelName } = param;

      const button = document.createElement("button");
      button.type = "button";
      button.innerHTML = `<span class="close-icon"></span><span class="btn-filter-bottom-ttl">${labelName}</span>`;
      button.title = labelName;
      button.classList.add("btn-filter-selected");

      button.addEventListener("click", e => {
        this.removeParam(rel);
      });

      container.insertAdjacentElement("beforeend", button);
    });
  }

  /**
   * Monta os filtros aplicados na página de categoria
   */
  buildFiltersApliedOnCatPage() {
    const { params } = this;

    const container = document.getElementById("filter-control-cat-page");
    container.innerHTML = `
      <button class="clean-filter-btn cat" type="button">Limpar filtros</button>
      <div class="aplied-filters-cat"></div>
    `;
    if (!!params.length) {
      params.forEach(p => {
        const { param: rel, labelName } = p;
        const button = document.createElement("button");
        button.type = "button";
        button.innerHTML = `<span class="close-icon"></span><span class="btn-filter-bottom-ttl">${labelName}</span>`;
        button.title = labelName;
        button.classList.add("btn-filter-selected");

        button.addEventListener("click", e => {
          this.removeParam(rel);
          this.buildFiltersApliedOnCatPage();
          this.fetchItens();
        });

        container
          .querySelector(".aplied-filters-cat")
          .insertAdjacentElement("beforeend", button);

        // Clique no botão de limpar filtros na categoria
        document
          .querySelector(".clean-filter-btn.cat")
          .addEventListener("click", e => {
            this.limparFiltros();
          });
      });
    } else {
      container.querySelector(".clean-filter-btn.cat").style.display = "none";
      container.querySelector(".aplied-filters-cat").style.display = "none";
    }
  }

  // Toda vez que um parametro for adicionado ou removido executa esse método
  // Para atualizar tudo.
  renderOnParamChange() {
    this.buildApliedFiltersBtnsOnBottom();
    this.exibeFiltrosNoHeaderDaCategoria();
  }

  openMenu() {
    this.open = true;
    const menu = document.querySelector(".slider-menu");

    menu.classList.add("visible");
    document.body.classList.add("overflow-hidden");
  }

  closeMenu() {
    this.open = false;
    const menu = document.querySelector(".slider-menu");

    menu.classList.remove("visible");
    document.body.classList.remove("overflow-hidden");
  }
}

const cara = new SliderMenu(document.getElementById("open-filter-menu"));

// new MenuFilter(document.querySelector(".helper-chat__help"));