import AdmVue from "@assets/js/adm-vue.js";
import axiosApi from "@assets/js/axios-api";

const vm = new AdmVue({
  data() {
    return {
      categories: [],
      searchbar_form: null,
      product: {},
      token: "",
      slideSettings: {
        itemsToShow: 5,
        trimWhiteSpace: true,
        transition: 400
      },
      updateComponent: 0,
      asideSlideSettings: {
        itemsToShow: 5,
        vertical: true,
        trimWhiteSpace: true,
        transition: 400
      },
      text: "",
      configurations: {
        wg24_quick: "disable",
        wg24_l_sale_icon_style: "default",
        wg24_home_redir_carrinho: 1,
        wg24_futura_prod_exibe_selo: 0,
        wg24_productbox_border: 1,
        wg24_productbox_size: 2,
        wg24_prod_efec_img: 0,
        wg24_futura_prod_qtd_dias_novo: 30
      },
      fontGoogle: [],
      fontSystem: [
        { "Lato,sans-serif": '"Lato",sans-serif' },
        { "Open+Sans": "Open Sans" },
        { "Arial,Helvetica": "Arial, Helvetica" },
        { Geneva: "Geneva" },
        { "Helvetica,sans-serif": "Helvetica, sans-serif" },
        { "Times+New+Roman": "Times New Roman" },
        { "Times,serif": "Times, serif" },
        { "PT+Sans": "PT Sans" },
        { monospace: "monospace" },
        { "Georgia,serif": "Georgia,Times, serif" },
        { Verdana: "Verdana" },
        { Oswald: "Oswald" },
        { Telex: "Telex" },
        { Iceberg: "Iceberg" },
        { "Yanone+Kaffeesatz": "Yanone Kaffeesatz ExtraLight" },
        { tahoma: "Tahoma, Geneva" },
        { Amethysta: "Amethysta" },
        { "Courier+New,Courier": "Courier New, Courier" },
        { Gudea: "Gudea" },
        { "Duru+Sans": "Duru Sans" },
        { "Germania+One": "Germania One" },
        { "Macondo+Swash+Caps": "Macondo Swash Caps" }
      ],
      selectedVisual: {},
      visual: [
        {
          group: "Barra de pesquisa",
          fields: [
            {
              label: "Forma",
              name: "searchbar_form",
              type: "select",
              options: "Type_SearchBarForm"
            },
            {
              label: "Fundo do botão",
              name: "searchbar_button_background",
              type: "select",
              options: "Type_SearchBarButtonBackground"
            }
          ]
        },
        {
          group: "Box de produtos",
          fields: [
            {
              label: "Visualização Rápida",
              name: "wg24_quick",
              type: "select",
              options: "Type_StatusEn",
              description:
                "Ao passar o mouse em cima do produto, aparece um botão para visualizar mais detalhes do produto sem sair da página."
            },
            {
              label: "Exibir código na listagem de produtos",
              name: "config_code_list_product",
              description:
                "Código que será exibido acima do título dos produtos nas páginas com listagem de produto.",
              type: "select",
              options: "Type_DsimDnao"
            },
            {
              label: "Estilo para produtos em promoção",
              name: "wg24_l_sale_icon_style",
              type: "select",
              options: "Type_ProductBoxPromotionStyle"
            },
            {
              label: "Redirecionar ao carrinho no botão comprar",
              name: "wg24_home_redir_carrinho",
              description:
                "Define se ao clicar no botão de adicionar produto ao carrinho, irá sair da página atual e ir para a página de carrinho de compras.",
              type: "select",
              options: "Type_DsimDnao"
            },
            {
              label: "Selo de novos produtos",
              name: "wg24_futura_prod_exibe_selo",
              type: "select",
              options: "Type_Status"
            },
            {
              label: "Quantidade de dias que um produto é considerado novo",
              name: "wg24_futura_prod_qtd_dias_novo",
              description:
                "Define quando dias desde a criação do produto, para que seja considerado novo para exibir o selo de Novo Produto.",
              type: "text",
              mask: "integer"
            },
            {
              label: "Exibir produto em card",
              name: "wg24_productbox_border",
              type: "select",
              options: "Type_DsimDnao"
            },
            {
              label: "Tamanho do box de produtos",
              name: "wg24_productbox_size",
              type: "select",
              options: "Type_Tamanho",
              customOptions: true
            },
            {
              label: "Efeito aplicado as imagens de exibição dos produtos",
              name: "wg24_prod_efec_img",
              description:
                "Define se ao passar o mouse em cima do produto irá aplicar algum efeito.",
              type: "select",
              options: "Type_EfeitoImagem"
            }
          ]
        },
        {
          group: "Icones",
          fields: [
            {
              label: "Carrinho",
              name: "icon_cart",
              type: "select",
              options: "Type_CartIcon"
            }
          ]
        },
        {
          group: "Listas de produtos",
          fields: [
            {
              label: "Estilo do Título",
              name: "product_list_title_style",
              type: "select",
              options: "Type_ProductListTitleStyle"
            },
            {
              label: "Cor das linhas do título",
              name: "product_list_title_line_color",
              type: "color",
              mask: "hexadecimal"
            },
            {
              label: "Tipografia do Título",
              name: "product_list_title_typhography_style",
              type: "select",
              options: "Type_ProductListTypography"
            },
            {
              label: "Cor do Título",
              name: "product_list_title_color",
              type: "color",
              mask: "hexadecimal"
            },
            {
              label: "Tipografia do Subtítulo",
              name: "product_list_subtitle_typhography_style",
              type: "select",
              options: "Type_ProductListTypography"
            },
            {
              label: "Cor do Subtítulo",
              name: "product_list_subtitle_color",
              type: "color",
              mask: "hexadecimal"
            },
            {
              label: "Origem da fonte",
              name: "product_list_font_style",
              type: "select",
              options: "Type_ProductListFont"
            },
            {
              label: "Fontes do sistema",
              name: "product_list_font_system_style",
              type: "select",
              options: "Type_ProductListSystemFonts"
            },
            {
              label: "Fontes do google",
              name: "product_list_font_google_style",
              type: "select",
              options: "Type_ProductListGoogleFonts"
            }
          ]
        },
        {
          group: "Cabeçalho",
          fields: [
            {
              label: "Posição do Logo",
              name: "header_logo_position",
              type: "select",
              options: "Type_HeaderLogoPosition"
            }
          ]
        },
        {
          group: "Carrinho de compras",
          fields: [
            {
              label: "Exibir botão continuar comprando",
              name: "cart_continue_button",
              type: "select",
              options: "Type_Status"
            }
          ]
        },
        {
          group: "Menu Principal",
          fields: [
            {
              label: "Posicionamento",
              name: "menu_position",
              type: "select",
              options: "Type_MenuPosition"
            },
            {
              label: "Barras de Divisão",
              name: "menu_divider",
              type: "select",
              options: "Type_StatusEn"
            },
            {
              label: "Tipografia do menu",
              name: "menu_typography",
              type: "select",
              options: "Type_MenuTypography"
            },
            {
              label: "Estilo do Submenu",
              name: "menu_style_subcategory",
              type: "select",
              options: "Type_MenuSubCategory"
            },
            {
              label: "Indicadores de Seleção",
              name: "menu_selector",
              type: "select",
              options: "Type_StatusEn"
            },
            {
              label: "Tipos de Indicadores de Seleção",
              name: "menu_selector_indicator",
              type: "select",
              options: "Type_SelectionIndicators"
            },
            {
              label: "Link para Página Principal",
              name: "wg24_main_menu_link_home",
              type: "select",
              options: "Type_StatusEn"
            },
            {
              label: "Exibição do Link para Página Principal",
              name: "wg24_main_menu_link_home_display",
              type: "select",
              options: "Type_MenuLinkHomeDisplay"
            },
            {
              label: "Menu Departamentos",
              name: "wg24_main_menu_departamentos",
              type: "select",
              options: "Type_StatusEn"
            },
            {
              label: "Título Menu Departamentos",
              name: "wg24_main_menu_departamentos_text",
              type: "text",
              rules: "max:25"
            },
            {
              label: "Tipo de Arredondamento da Borda",
              name: "menu_border_radius",
              type: "select",
              options: "Type_MenuBorderRadius"
            },
            {
              label: "Exibir imagens para categorias",
              name: "wg24_exibe_imagens_categorias_menu",
              type: "select",
              options: "Type_DsimDnao"
            },
            {
              label: "Altura da Imagem",
              name: "wg24_altura_imagens_categorias",
              type: "text",
              mask: "positiveInteger"
            },
            {
              label: "Largura da Imagem",
              name: "wg24_largura_imagens_categorias",
              type: "text",
              mask: "positiveInteger"
            },
            {
              label: "Título do submenu",
              name: "wg24_submenu_text",
              type: "select",
              options: "Type_StatusEn"
            },
            {
              label: "Largura do submenu",
              name: "wg24_submenu_width",
              type: "select",
              options: "Type_Screen"
            }
          ]
        },
        {
          group: "Listas de categorias",
          fields: [
            {
              label: "Modo de visualização dos produtos",
              name: "wg24_cate_list_grid",
              type: "select",
              options: "Type_gridOrListView"
            },
            {
              label: "Exibir imagem da categoria",
              name: "wg24_category_image_status",
              type: "select",
              options: "Type_Status"
            }
          ]
        },
        {
          group: "Página de produto",
          fields: [
            {
              label: "Visualização das imagens do produto",
              name: "product_show_type",
              type: "select",
              options: "Type_ProductShow",
              description:
                "Define a forma em que as imagens do produto vão ficar."
            },
            {
              label: "Opção de zoom na imagem do produto",
              name: "wg24_tipo_zoom_prod",
              type: "select",
              options: "Type_TipoZoom",
              description:
                "Efeito do zoom ao passar o mouse sobre a imagem do produto."
            },
            {
              label: "Descrição Expansível",
              name: "tipo_descricao_expansivel",
              type: "select",
              options: "Type_Status",
              description:
                "Define se na página do produto irá sempre mostrar a descrição completa, ou se precisa clicar para expandir."
            },
            {
              label: "Mostrar preço em produtos sem estoque",
              name: "mostra_preco_sem_estoque",
              type: "select",
              options: "Type_DsimDnao",
              description:
                "Define se na página do produto irá mostrar o preço do produto mesmo se não tiver estoque."
            },
            {
              label: "Aba personalizada",
              name: "wg24_l_custom_tab",
              type: "select",
              options: "Type_StatusEn",
              description:
                "Você pode habilitar ou desabilitar a aba personalizada na página de produto."
            },
            {
              label: "Título da aba",
              name: "wg24_l_tab_title",
              type: "text",
              rules: "required|max:25",
              description: "Título da aba personalizada na página de produto."
            },
            {
              label: "Conteúdo da Aba",
              name: "wg24_l_tabc",
              type: "ckeditor",
              description:
                "Texto ou html personalizada para conteúdo da aba personalizada."
            }
          ]
        }
      ]
    };
  },
  components: {
    BaseCarousel: () =>
      import(
        /* webpackChunkName: "BaseCarousel" */ "@elements/BaseCarousel/index.vue"
      )
  },
  mounted() {
    this.getGoogleFonts();
  },
  watch: {
    selectedVisual(newConfig, oldConfig) {
      if (newConfig === this.visual[8]) {
        this.$nextTick(() => {
          CKEDITOR.replace("wg24_l_tabc", {
            skin: "moono"
          });
          CKEDITOR.instances["wg24_l_tabc"].on("change", () => {
            this.handleTextArea(CKEDITOR.instances.wg24_l_tabc.getData());
          });

          if (this.configurations.wg24_l_tabc) {
            const div = document.createElement("div");
            div.innerHTML = String(this.configurations.wg24_l_tabc.trim());
            this.$refs.tabPersonalized.innerHTML =
              div.firstChild.wholeText ?? div.innerHTML;
            this.configurations.wg24_l_tabc =
              div.firstChild.wholeText ?? div.innerHTML;
            CKEDITOR.instances["wg24_l_tabc"].setData(
              div.firstChild.wholeText ?? div.innerHTML
            );
          }
        });
        this.forceRerender();
      }
    }
  },
  methods: {
    getTypeEnumList(name, tipo, customOptions) {
      if (customOptions === "true") {
        return this.getTypeEnumListCustomOptions(name, tipo);
      } else {
        switch (tipo) {
          case "Type_ProductListTitleStyle":
            this.handleType_ProductListTitleStyle(name);
            return this[tipo].getEnumList();
          case "Type_ProductListGoogleFonts":
            this.handleType_ProductListGoogleFonts(name);
            break;
          case "Type_ProductListSystemFonts":
            this.handleType_ProductListSystemFonts(name);
            break;
          case "Type_StatusEn":
            this.handleType_StatusEn(name);
            return this[tipo].getEnumList();
          case "Type_Status":
            this.handleType_Status(name);
            return this[tipo].getEnumList();
          case "Type_SelectionIndicators":
            if (
              name == "menu_selector_indicator" &&
              this.configurations.menu_selector_indicator ==
                this.Type_SelectionIndicators.Underline
            ) {
              document.documentElement.style.setProperty(
                "--menu_selector_underline",
                this.wg24_menum_lcolor
              );
            }
            return this[tipo].getEnumList();
          case "Type_MenuBorderRadius":
            if (name == "menu_border_radius") {
              const tabs = document.querySelectorAll(".submenu.js-submenu");
              tabs.forEach(element => {
                element.style.borderRadius = this.configurations.menu_border_radius;
              });
            }
            return this[tipo].getEnumList();
          case "Type_MenuTypography":
            if (name == "menu_typography" && this.$refs.menu_typography) {
              const menuText = document.querySelectorAll(
                ".menu__content > .menu__text"
              );

              if (
                this.configurations.menu_typography ==
                this.Type_MenuTypography.Uppercase
              ) {
                menuText.forEach(element => {
                  element.innerHTML = element.innerHTML.toLocaleUpperCase();
                });
              }

              if (
                this.configurations.menu_typography ==
                this.Type_MenuTypography.Lowercase
              ) {
                menuText.forEach(element => {
                  element.innerHTML = element.innerHTML.toLocaleLowerCase();
                });
              }

              if (
                this.configurations.menu_typography ==
                this.Type_MenuTypography.FirstUpperCase
              ) {
                menuText.forEach(element => {
                  element.innerHTML =
                    element.innerHTML.charAt(0).toUpperCase() +
                    element.innerHTML.slice(1).toLocaleLowerCase();
                });
              }

              if (
                this.configurations.menu_typography ==
                this.Type_MenuTypography.Any
              ) {
                menuText.forEach((element, index) => {
                  if (index == 0 || index == 2 || index == 4) {
                    element.innerHTML = element.innerHTML.toLocaleLowerCase();
                  } else {
                    element.innerHTML =
                      element.innerHTML.charAt(0).toLocaleUpperCase() +
                      element.innerHTML.slice(1);
                  }
                });
              }
            }
            return this[tipo].getEnumList();
          case "Type_gridOrListView":
            this.handleType_gridOrListView(name);
            return this[tipo].getEnumList();
          case "Type_ProductShow":
            this.handleType_ProductShow();
            return this[tipo].getEnumList();
          case "Type_TipoZoom":
            this.handleType_TipoZoom();
            return this[tipo].getEnumList();
          case "Type_ProductListFont":
            this.handleType_ProductListFont(name);
            return this[tipo].getEnumList();
          case "Type_DsimDnao":
            this.handleType_DsimDnao(name);
            return this[tipo].getEnumList();
          default:
            return this[tipo].getEnumList();
        }
      }
    },
    handleTextArea(text) {
      this.$nextTick(() => {
        this.$refs.tabPersonalized.innerHTML = text.trim();
        this.configurations.wg24_l_tabc = text.trim();
      });
    },
    handleType_ProductListGoogleFonts(name) {
      this.$nextTick(() => {
        if (
          name == "product_list_font_google_style" &&
          this.$refs.product_list_font_google_style
        ) {
          if (
            !this.$refs.product_list_font_google_style[0].$refs.select.options
              .length > 0
          ) {
            this.fontGoogle.map(font => {
              this.$refs.product_list_font_google_style[0].$refs.select.insertAdjacentHTML(
                "beforeend",
                `
                        <option value="${font}">${font}</option>
                      `
              );
            });
          }
        }
      });
    },
    handleType_ProductListSystemFonts(name) {
      this.$nextTick(() => {
        if (
          name == "product_list_font_system_style" &&
          this.$refs.product_list_font_system_style
        ) {
          this.fontSystem.map(font => {
            this.$refs.product_list_font_system_style[0].$refs.select.insertAdjacentHTML(
              "beforeend",
              `
                  <option value="${Object.keys(font)}">${Object.values(
                font
              )}</option>
                `
            );
          });
        }
      });
    },
    handleType_StatusEn(name) {
      this.$nextTick(() => {
        switch (name) {
          case "wg24_main_menu_departamentos":
            if (this.$refs.wg24_main_menu_departamentos_text) {
              this.toogleVisibilityMainMenu(
                this.configurations.wg24_main_menu_departamentos,
                this.$refs.wg24_main_menu_departamentos_text[0].$el
              );
            }
            break;
          case "wg24_main_menu_link_home":
            if (this.$refs.wg24_main_menu_link_home_display) {
              this.toogleVisibilityMainMenu(
                this.configurations.wg24_main_menu_link_home,
                this.$refs.wg24_main_menu_link_home_display[0].$el
              );
            }
            break;
          case "menu_selector":
            if (this.$refs.menu_selector_indicator) {
              this.toogleVisibilityMainMenu(
                this.configurations.menu_selector,
                this.$refs.menu_selector_indicator[0].$el
              );
            }
            break;
          case "wg24_l_custom_tab":
            if (
              this.configurations.wg24_l_custom_tab ==
                Type_StatusEn.Tp_Disable &&
              this.$refs.wg24_l_tab_title &&
              this.$refs.wg24_l_tabc
            ) {
              document
                .getElementById("div_wg24_l_custom_tab")
                .classList.add("hidden");

              this.$refs.wg24_l_tab_title[0].$el.classList.add("hidden");
              this.$refs.wg24_l_tabc[0].classList.add("hidden");
            }
            if (
              this.configurations.wg24_l_custom_tab ==
                Type_StatusEn.Tp_Enable &&
              this.$refs.wg24_l_tab_title &&
              this.$refs.wg24_l_tabc
            ) {
              document
                .getElementById("div_wg24_l_custom_tab")
                .classList.remove("hidden");

              this.$refs.wg24_l_tab_title[0].$el.classList.remove("hidden");
              this.$refs.wg24_l_tabc[0].classList.remove("hidden");
            }
            break;
          default:
            return;
        }
      });
    },
    handleType_DsimDnao(name) {
      this.$nextTick(() => {
        switch (name) {
          case "mostra_preco_sem_estoque":
            if (
              this.configurations.mostra_preco_sem_estoque ==
              Type_DsimDnao.Tp_Nao
            ) {
              document.getElementById("price").classList.add("hidden");
            } else {
              document.getElementById("price").classList.remove("hidden");
            }
            break;
          case "wg24_exibe_imagens_categorias_menu":
            if (
              this.configurations.wg24_exibe_imagens_categorias_menu ==
                Type_DsimDnao.Tp_Nao &&
              this.$refs.wg24_altura_imagens_categorias &&
              this.$refs.wg24_largura_imagens_categorias
            ) {
              this.$refs.wg24_altura_imagens_categorias[0].$el.classList.add(
                "hidden"
              );
              this.$refs.wg24_largura_imagens_categorias[0].$el.classList.add(
                "hidden"
              );
            }
            if (
              this.configurations.wg24_exibe_imagens_categorias_menu ==
                Type_DsimDnao.Tp_Sim &&
              this.$refs.wg24_altura_imagens_categorias &&
              this.$refs.wg24_largura_imagens_categorias
            ) {
              this.$refs.wg24_altura_imagens_categorias[0].$el.classList.remove(
                "hidden"
              );
              this.$refs.wg24_largura_imagens_categorias[0].$el.classList.remove(
                "hidden"
              );
            }
            break;
          case "config_code_list_product":
            if (
              this.configurations.config_code_list_product &&
              this.configurations.config_code_list_product ==
                Type_DsimDnao.Tp_Nao
            ) {
              document.querySelector(".itembox-model").classList.add("hidden");
            }

            if (
              this.configurations.config_code_list_product &&
              this.configurations.config_code_list_product ==
                Type_DsimDnao.Tp_Sim
            ) {
              document
                .querySelector(".itembox-model")
                .classList.remove("hidden");
            }
            break;
          default:
            return;
        }
      });
    },
    handleType_gridOrListView(name) {
      if (
        name == "wg24_cate_list_grid" &&
        this.configurations.wg24_cate_list_grid &&
        this.configurations.wg24_cate_list_grid == Type_gridOrListView.Tp_List
      ) {
        document.querySelector(
          ".list-categorie-itens"
        ).style.gridTemplateColumns = "repeat(1, 1fr)";
      }
      if (
        name == "wg24_cate_list_grid" &&
        this.configurations.wg24_cate_list_grid &&
        this.configurations.wg24_cate_list_grid == Type_gridOrListView.Tp_Grid
      ) {
        document.querySelector(
          ".list-categorie-itens"
        ).style.gridTemplateColumns = "repeat(3, 1fr)";
      }
    },
    handleType_ProductShow() {
      if (
        this.configurations.product_show_type == Type_ProductShow.AsideSlide
      ) {
        document.querySelector(".product-show-content").style.columnGap =
          "1.5rem";
        document.querySelector(
          ".product-show-content"
        ).style.gridTemplateColumns = "54% 1fr";
        document.querySelector(
          ".product-show-slide-content"
        ).style.flexDirection = "row";
        document.querySelector(".product-show-slide-content").style.gap =
          "0.5rem";
        document.querySelector(
          ".product-show-image-main > img"
        ).style.maxWidth = "none";
      } else {
        document.querySelector(".product-show-content").style.columnGap =
          "2.5rem";
        document.querySelector(
          ".product-show-content"
        ).style.gridTemplateColumns = "50% 1fr";
        document.querySelector(
          ".product-show-slide-content"
        ).style.flexDirection = "column";
        document.querySelector(
          ".product-show-image-main > img"
        ).style.maxWidth = "100%";
        document.querySelector(
          ".product-show-image-main"
        ).style.justifyContent = "center";
      }

      this.$nextTick(() => {
        $(".zoomWindowContainer").remove();
        $(".zoomContainer").remove();
        $(".zoomLens").remove();
      });
    },
    handleType_ProductListTitleStyle(name) {
      this.$nextTick(() => {
        if (
          name == "product_list_title_style" &&
          this.$refs.product_list_title_line_color
        ) {
          this.configurations.product_list_title_style != 3
            ? this.$refs.product_list_title_line_color[0].$el.classList.add(
                "hidden-xs-up"
              )
            : this.$refs.product_list_title_line_color[0].$el.classList.remove(
                "hidden-xs-up"
              );
        }
      });

      if (
        name == "product_list_title_style" &&
        this.$refs.product_list_title_line_color
      ) {
        this.configurations.product_list_title_style == 3
          ? document.documentElement.style.setProperty(
              "--product_title_line_color",
              this.configurations.product_list_title_line_color
            )
          : null;
      }
    },
    handleMainImageClick() {
      if (
        this.configurations.wg24_tipo_zoom_prod == Type_TipoZoom.Tp_Fancybox
      ) {
        $($(".js-thumbnail")[0]).trigger("click");
        this.handleProductShowClick();
      } else {
        this.openPhotoSwipe();
      }
    },
    handleProductShowClick(image) {
      event.preventDefault();
      this.$nextTick(() => {
        if (
          this.configurations.wg24_tipo_zoom_prod == Type_TipoZoom.Tp_Fancybox
        ) {
          $(".js-thumbnail").fancybox({
            prevEffect: "elastic",
            nextEffect: "elastic",
            closeBtn: true,
            nextClick: true,
            type: "image",
            beforeLoad: function() {
              if (this.element[0].dataset.type == "video") {
                this.type = "iframe";
              }
            }
          });
        } else if (
          this.configurations.wg24_tipo_zoom_prod == Type_TipoZoom.Tp_PhotoSwipe
        ) {
          this.openPhotoSwipe();
        } else if (
          this.configurations.wg24_tipo_zoom_prod ==
            Type_TipoZoom.Tp_Cloudzoom ||
          this.configurations.wg24_tipo_zoom_prod ==
            Type_TipoZoom.Tp_ElevateZoom
        ) {
          document.querySelectorAll(".border-active").forEach(element => {
            element.classList.remove("border-active");
          });
          this.$refs[image][0].classList.add("border-active");
        }
      });
    },
    handleType_ProductListFont(name) {
      this.$nextTick(() => {
        if (
          this.$refs.product_list_font_system_style &&
          this.$refs.product_list_font_system_style &&
          this.configurations.product_list_font_style ==
            Type_ProductListFont.Google
        ) {
          this.$refs.product_list_font_system_style[0].$el.classList.add(
            "hidden"
          );
          this.$refs.product_list_font_google_style[0].$el.classList.remove(
            "hidden"
          );
        }

        if (
          this.$refs.product_list_font_system_style &&
          this.$refs.product_list_font_system_style &&
          this.configurations.product_list_font_style ==
            Type_ProductListFont.System
        ) {
          this.$refs.product_list_font_google_style[0].$el.classList.add(
            "hidden"
          );
          this.$refs.product_list_font_system_style[0].$el.classList.remove(
            "hidden"
          );
        }
      });
    },
    handleType_Status(name) {
      switch (name) {
        case "tipo_descricao_expansivel":
          this.$nextTick(() => {
            const divProductDescription = document.querySelectorAll(
              ".js-toggle-product-description"
            );

            if (
              divProductDescription &&
              this.configurations.tipo_descricao_expansivel ==
                Type_Status.Tp_Desabilitado
            ) {
              divProductDescription.forEach(element => {
                element
                  .querySelector(".js-product-description-plus")
                  .classList.add("hidden");
                element
                  .querySelector(".js-product-description-minus")
                  .classList.add("hidden");
              });

              document
                .querySelectorAll(".js-product-description-container")
                .forEach(element => {
                  element.classList.remove("hidden");
                });
            }

            if (
              divProductDescription &&
              this.configurations.tipo_descricao_expansivel ==
                Type_Status.Tp_Habilitado
            ) {
              divProductDescription.forEach(element => {
                element
                  .querySelector(".js-product-description-plus")
                  .classList.remove("hidden");
                element
                  .querySelector(".js-product-description-minus")
                  .classList.add("hidden");
              });

              document
                .querySelectorAll(".js-product-description-container")
                .forEach(element => {
                  element.classList.add("hidden");
                });
            }
          });
          break;
        case "wg24_category_image_status":
          if (
            this.configurations.wg24_category_image_status &&
            this.configurations.wg24_category_image_status ==
              this.Type_Status.Tp_Habilitado
          ) {
            document
              .querySelector(".list-categorie-image")
              .classList.remove("ui-helper-hidden");
          }
          if (
            this.configurations.wg24_category_image_status &&
            this.configurations.wg24_category_image_status ==
              this.Type_Status.Tp_Desabilitado
          ) {
            document
              .querySelector(".list-categorie-image")
              .classList.add("ui-helper-hidden");
          }
          break;
        default:
          break;
      }
    },
    initElevateZoom() {
      if (window.matchMedia("(pointer: coarse)").matches) {
        $(".js-thumbnail").on("click", function(e) {
          e.preventDefault();
          $("#main-image").attr("data-index", $(this).index());
          this.openPhotoSwipe();
        });
        return;
      }
      if (
        $.fn.elevateZoom &&
        this.configurations.wg24_tipo_zoom_prod == Type_TipoZoom.Tp_ElevateZoom
      ) {
        $("#main-image").elevateZoom({
          gallery: "thumbnails",
          cursor: "crosshair",
          galleryActiveClass: "border-gray",
          containLensZoom: true,
          zoomType: "inner"
        });
      } else if (
        $.fn.elevateZoom &&
        this.configurations.wg24_tipo_zoom_prod == Type_TipoZoom.Tp_Cloudzoom
      ) {
        $("#main-image").elevateZoom({
          gallery: "thumbnails",
          cursor: "crosshair",
          galleryActiveClass: "border-gray",
          containLensZoom: true,
          zoomType: "window"
        });
      }
    },
    openPhotoSwipe() {
      const pswpElement = document.querySelectorAll(".pswp")[0],
        mainImage = document.getElementById("main-image"),
        items = [];

      items[0] = {
        src: mainImage.getAttribute("data-zoom-image"),
        w: parseInt(mainImage.getAttribute("data-w"), 10),
        h: parseInt(mainImage.getAttribute("data-h"), 10)
      };

      let thumbs = document.querySelectorAll(".js-thumbnail");

      for (var i = 0; i < thumbs.length; i++) {
        if ($(thumbs[i]).data("type") == "video") {
          items[i] = {
            html:
              '<div class="flex full-height middle-xs">' +
              $(thumbs[i]).attr("href") +
              "</div>"
          };
        } else {
          items[i] = {
            src: thumbs[i].getAttribute("href"),
            w: parseInt(mainImage.getAttribute("data-w"), 10),
            h: parseInt(mainImage.getAttribute("data-h"), 10)
          };
        }
      }

      var options = {
        history: false,
        focus: false,
        shareEl: false,
        showAnimationDuration: 0,
        hideAnimationDuration: 0,
        index: parseInt(mainImage.getAttribute("data-index"), 10)
      };

      var gallery = new window.PhotoSwipe(
        pswpElement,
        window.PhotoSwipeUI_Default,
        items,
        options
      );
      gallery.init();
    },
    forceRerender() {
      this.updateComponent += 1;
    },
    handleType_TipoZoom() {
      this.$nextTick(() => {
        if (
          this.configurations.wg24_tipo_zoom_prod != Type_TipoZoom.Tp_Fancybox
        ) {
          $(document).unbind("click.fb-start");
        }
        if (
          this.configurations.wg24_tipo_zoom_prod ==
            Type_TipoZoom.Tp_Cloudzoom ||
          this.configurations.wg24_tipo_zoom_prod ==
            Type_TipoZoom.Tp_ElevateZoom
        ) {
          document.querySelectorAll(".border-active").forEach(element => {
            element.classList.remove("border-active");
          });
          const firstImage = document.querySelectorAll(
            ".js-thumbnail > img"
          )[0];
          firstImage.classList.add("border-active");
          this.initElevateZoom();
        } else {
          $(".zoomWindowContainer").remove();
          $(".zoomContainer").remove();
          $(".zoomLens").remove();
          document.querySelectorAll(".border-active").forEach(element => {
            element.classList.remove("border-active");
          });
        }
      });
    },
    getTypeEnumListCustomOptions(nome, tipo) {
      switch (nome) {
        case "wg24_productbox_size": {
          return this[tipo].getRemoveArray([
            this[tipo].Tp_MuitoPequeno,
            this[tipo].Tp_Medio,
            this[tipo].Tp_MuitoGrande,
            this[tipo].Tp_SemEspaco
          ]);
        }
        default: {
          return this[tipo].getEnumList();
        }
      }
    },
    nextMenu(event) {
      event.preventDefault();

      const menuContainer = document.querySelector(".js-menu__container");
      const menuItems = menuContainer.querySelectorAll(".js-menu__item");
      const lastMenuItem = menuItems[menuItems.length - 1],
        firstMenuItem = menuItems[0];
      const firstMenuItemStyle = window.getComputedStyle(firstMenuItem);

      const menuContainerRect = menuContainer.getBoundingClientRect(),
        lastMenuItemRect = lastMenuItem.getBoundingClientRect();

      if (lastMenuItemRect.right === menuContainerRect.right) {
        return;
      }

      let marginLeft = 0;

      for (
        let menuItemIndex = 0;
        menuItemIndex < menuItems.length;
        menuItemIndex++
      ) {
        const menuItemRect = menuItems[menuItemIndex].getBoundingClientRect();

        if (menuItemRect.right - 5 > menuContainerRect.right) {
          marginLeft = menuItemRect.right - menuContainerRect.right;
          break;
        }
      }

      const oldMarginLeft = parseFloat(firstMenuItemStyle.marginLeft);
      const newMarginLeft = oldMarginLeft - marginLeft;
      firstMenuItem.style.marginLeft = `${newMarginLeft}px`;
    },
    prevMenu(event) {
      event.preventDefault();

      const menuContainer = document.querySelector(".js-menu__container");
      const menuItems = menuContainer.querySelectorAll(".js-menu__item");
      const firstMenuItem = menuItems[0];
      const firstMenuItemStyle = window.getComputedStyle(firstMenuItem);

      const menuContainerRect = menuContainer.getBoundingClientRect();

      let marginLeft = 0;

      for (
        let menuItemIndex = 0;
        menuItemIndex < menuItems.length;
        menuItemIndex++
      ) {
        const menuItemRect = menuItems[menuItemIndex].getBoundingClientRect();

        if (menuContainerRect.left <= menuItemRect.right + 5) {
          marginLeft = menuContainerRect.left - menuItemRect.left;
          break;
        }
      }

      const oldMarginLeft = parseFloat(firstMenuItemStyle.marginLeft);
      const newMarginLeft = oldMarginLeft + marginLeft;
      firstMenuItem.style.marginLeft = `${newMarginLeft}px`;
    },
    toogleProductListSubtitle(event) {
      document
        .querySelector("#preview-style-title h3")
        .classList.toggle("ui-helper-hidden");
    },
    toogleVisibilityMainMenu(value, element) {
      value == "disable"
        ? element.classList.add("hidden-xs-up")
        : element.classList.remove("hidden-xs-up");
    },
    toogleProductDescription(event) {
      if (
        this.configurations.tipo_descricao_expansivel ==
        Type_Status.Tp_Habilitado
      ) {
        const productDescription = event.currentTarget.parentElement;
        productDescription
          .querySelector(".js-product-description-container")
          .classList.toggle("hidden");
        productDescription
          .querySelector(".js-product-description-plus")
          .classList.toggle("hidden");
        productDescription
          .querySelector(".js-product-description-minus")
          .classList.toggle("hidden");
      }
    },
    async getGoogleFonts() {
      await axiosApi({
        method: "get",
        url:
          "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyBGSBS_pzdsUff3dah-mgL-AaHqTWJ8eQo"
      })
        .then(({ data }) => {
          this.fontGoogle = data.items.map(font => new Object(font.family));
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
});

AdmVue.init(vm);
