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: {},
      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
      },
      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: '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' },
          ],
        },
        {
          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: 'Habilitar Barras de Divisão', name: 'menu_divider', type: 'select', options: 'Type_Status'},
            {label: 'Habilitar Indicadores de Seleção', name: 'menu_selector', type: 'select', options: 'Type_Status'},
            {label: 'Habilitar 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: 'Habilitar 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: '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'},
          ],
        },
      ],
    };
  },
  methods: {
    getTypeEnumList(nome, tipo, customOptions){
      if (customOptions === 'true'){
        return this.getTypeEnumListCustomOptions(nome, tipo);
      } else {
        return this[tipo].getEnumList();
      }
    },
    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`;
    }
  },
});

AdmVue.init(vm);