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);
