import AdmVue from '@assets/js/adm-vue.js';
import axiosApi from '@assets/js/axios-api';
import {elementsNeutralColor, elementsColorPredominante, elementsColorSecundaria, elementsColorPredominanteHover, hoverColor}
  from '@admin/view/javascript/colors.js';

var contColor = 0;

AdmVue.component('setted-color', {
  props: ['text'],
  template: '<div class="setted-color" style="display: block">{{ text }}</div>'
});

const vm = new AdmVue({
  components: {
    WireframeHome: () => import(/* webpackChunkName: "WireframeHome" */ '@components/Wireframe/WireframeHome.vue'),
  },
  data() {
    return {
      configurations: {
        setted_color0: '',
        setted_color1: '',
        setted_color2: '',
        setted_color3: '',
        setted_color4: '',
        setted_color5: '',
        setted_color6: '',
        setted_color7: '',
      },
      selectedColor: {},
      colors: [
        {
          group: 'Cores padrões',
          fields: [
            { label: 'Cores primárias', name: 'primary_color' },
            { label: 'Cores secundárias', name: 'secondary_color' },
          ],
        },
        {
          group: 'Geral',
          fields: [
            { label: 'Cor do fundo', name: 'wg24_l_bodyb', class: 'container' },
            { label: 'Cor das fontes', name: 'wg24_l_body_fc', class: 'footer-contact-text' },
            { label: 'Cor dos links', name: 'wg24_l_linkc', class: 'content-link' },
            { label: 'Cor dos links com o mouse em cima', name: 'wg24_l_hcolor', class: 'link-hover-color' },
            { label: 'Cor dos títulos', name: 'wg24_l_header_color', class: 'content-title' },
          ],
        },
        {
          group: 'Cabeçalho de opções',
          fields: [
            { label: 'Cor da borda superior', name: 'wg24_l_body_tbc' },
            { label: 'Cor do fundo', name: 'wg24_header_bgcolor', class: 'option' },
            { label: 'Cor da borda inferior', name: 'wg24_heade_m_lin_bg_c' },
            { label: 'Cor dos textos', name: 'wg24_header_menulcolor', class: 'option-item' },
            { label: 'Cor dos textos com o mouse em cima', name: 'wg24_header_menulhcolor' },
          ],
        },
        {
          group: 'Cabeçalho principal',
          fields: [
            { label: 'Cor do fundo', name: 'wg24_header_bg_color', class: 'header' },
            { label: 'Cor da borda inferior', name: 'wg24_color_border_background' },
            { label: 'Cor dos textos', name: 'wg24_link_color_stick', class: 'header-item-ref' },
            { label: 'Cor dos textos quando o mouse estiver por cima', name: 'wg24_m_color_background' },
            { label: 'Cor do botão pesquisar', name: 'wg24_header_btsearch', class: 'header-search-button' },
            { label: 'Cor do icone do botão pesquisar', name: 'wg24_icon_btnsearch_color', class: 'header-search-button-text' },
          ],
        },
        {
          group: 'Menu principal',
          fields: [
            { label: 'Cor do fundo', name: 'wg24_mm_bgcol', class: 'nav' },
            { label: 'Cor do fundo central', name: 'wg24_mm_bgcol_center', class: 'nav-item' },
            { label: 'Cor da borda', name: 'wg24_mainm_brcol' },
            { label: 'Cor do texto', name: 'wg24_menum_lcolor', class: 'nav-item-text' },
            { label: 'Cor do texto com o mouse em cima', name: 'wg24_mainm_lhcolor' },
            { label: 'Cor do fundo com o mouse em cima', name: 'wg24_menu_hbgcolor' },
          ],
        },
        {
          group: 'Banner principal',
          fields: [
            { label: 'Cor do fundo', name: 'wg24_top_cart_bgcol', class: 'banner-content' },
            { label: 'Cor do texto', name: 'wg24_topcart_te_colo', class: 'banner-text-ref' },
            { label: 'Cor do botão', name: 'wg24_btnsearch_color', class: 'banner-button' },
            { label: 'Cor do texto do botão', name: 'wg24_link_hover_color_stick', class: 'banner-button-text' },
            { label: 'Cor do botão de navegação', name: 'wg24_home_sbtn_bgcol', class: 'banner-nav' },
            { label: 'Cor do texto do botão de navegação', name: 'wg24_home_btn_hbr_txclr', class: 'banner-nav-icon' },
            { label: 'Cor do botão de navegação com o mouse em cima', name: 'wg24_home_sbtn_hbr_bgclr' },
          ],
        },
        {
          group: 'Menu lateral',
          fields: [
            { label: 'Cor de fundo', name: 'wg24_bg_color_menu_lateral', class: 'aside-ref' },
            { label: 'Cor da borda', name: 'wg24_border_color_menu_lateral' },
            { label: 'Cor dos links', name: 'wg24_link_color_menu_lateral', class: 'aside-text' },
            { label: 'Cor dos títulos', name: 'wg24_title_color_menu_lateral', class: 'aside-title' },
            { label: 'Cor do check', name: 'wg24_icon_checked_color_menu_lateral', class: 'aside-check' },
            { label: 'Cor de fundo dos botões', name: 'wg24_button_color_menu_lateral', class: 'aside-button' },
            { label: 'Cor do texto nos botões', name: 'wg24_button_text_color_menu_lateral', class: 'aside-button-text' },
          ],
        },
        {
          group: 'Destaques da página inicial',
          fields: [
            { label: 'Cor de fundo', name: 'wg24_home_fboxbg_col' },
            { label: 'Cor da descrição', name: 'wg24_hom_fe_boxdes_col' },
          ],
        },
        {
          group: 'Produto',
          fields: [
            { label: 'Cor do fundo', name: 'wg24_product_bx_bgclr', class: 'product' },
            { label: 'Cor da borda', name: 'wg24_product_bx_bdrclr' },
            { label: 'Cor do nome do produto', name: 'wg24_product_box_n_col', class: 'product-name' },
            { label: 'Cor do nome do produto com o mouse em cima', name: 'wg24_product_box_nhov_col' },
            { label: 'Cor do preço', name: 'wg24_product_box_price_col', class: 'product-price' },
            { label: 'Cor do preço antigo', name: 'wg24_product_box_oldprce_col', class: 'product-old-price' },
            { label: 'Cor do fundo da mensagem de produtos com desconto', name: 'wg24_product_box_sicon_bgcolor', class: 'product-discount' },
            { label: 'Cor do texto de produtos com desconto', name: 'wg24_product_box_sale_nicontcolor', class: 'product-discount-text' },
            { label: 'Cor do fundo do botão comprar', name: 'wg24_btn_1bg_col', class: 'product-button' },
            { label: 'Cor do texto do botão comprar', name: 'wg24_btn_text_col', class: 'product-button-text' },
          ],
        },
        {
          group: 'Outros',
          fields: [
            { label: 'BOTÃO FINALIZAR: Cor do botão', name: 'wg24_finalizar_carrinho' },
            { label: 'BOTÃO FINALIZAR: Cor do texto', name: 'wg24_finalizar_carrinho_texto' },
          ],
        },
        {
          group: 'Rodapé',
          fields: [
            { label: 'Cor de fundo', name: 'wg24_footer_bg_col', class: 'footer-ref' },
            { label: 'Cor do título', name: 'wg24_fotheadin_col', class: 'footer-title' },
            { label: 'Cor dos links', name: 'wg24_fotlin_col', class: 'footer-link-ref' },
            { label: 'Cor dos links com o mouse em cima', name: 'wg24_fotlin_h_col' },
            { label: 'Cor dos ícones', name: 'wg24_fotlinicon_col', class: 'footer-icon' },
            { label: 'Cor do fundo dos ícones', name: 'wg24_fotlinicon_h_col', class: 'footer-circle' },
            { label: 'Cor da linha de separação', name: 'wg24_fot_line' },
            { label: 'Cor de fundo da base', name: 'wg24_fot_bbg_col', class: 'footer-copyright' },
            { label: 'Cor do texto da base', name: 'wg24_fot_powerred_col', class: 'footer-copyright-text' },
            { label: 'Cor do texto da base com o mouse em cima (apenas link)', name: 'wg24_fot_powerred_hover_col' },
            { label: 'Cor do texto da coluna "Sobre nós"', name: 'wg24_fotaout_des_col' },
          ],
        },
      ],
    };
  },
  methods: {
    updateColor(event) {
      this.colors.some((item, index) => {
        var objectIndex = item.fields.findIndex(function(object) {
          // return [event.target.className, event.target.parentElement.className].includes(object.class);
          // return event.target.className == object.class;
          var objectClass = '\\b(^|\\s)' + object.class + '($|\\s)\\b';
          return event.target.className.search(objectClass) !== -1;
        });
        if (objectIndex > -1){
          this.selectedColor = item;
          // Ajuste técnico pra funcionar o click pra selecionar diretamente a cor, sem o timeout não da tempo
          // da tela renderizar e acaba não abrindo
          setTimeout(function() {
            $("input[name=" + item.fields[objectIndex].name + "]").click();
          }, 300);
          return true;
        }
      });
    },
    setColorElement(elementname, colorhex, elementText){
      this.configurations[elementname] = colorhex;

      if (elementText) {
        if (window.chroma(colorhex).luminance() > 0.6) {
          this.configurations[elementText] = '#000000';
        } else {
          this.configurations[elementText] = '#FFFFFF';
        }
      }
    },
    detectColors(){
      let colorThief = new ColorThief();

      let img = new Image();
      img.src = $('#img_config_logo').attr('src');

      let vpaleta = colorThief.getPalette(img, 7);
      let vcor = colorThief.getColor(img);

      let paletaPosition = 0;
      for (paletaPosition = 0; paletaPosition < vpaleta.length - 1; paletaPosition++) {
        let rgb1 = String(vcor).split(',');
        let rgb2 = String(vpaleta[paletaPosition]).split(',');
        let soma = 0;

        for (let i = 0; i < 3; i++) {
          soma += Math.abs(rgb1[i] - rgb2[i]);
        }

        if (soma > 75) {
          break;
        }
      }

      let vcorpredominante = window.chroma(vcor).hex();
      let vcorsecundaria = window.chroma(vpaleta[paletaPosition]).hex();

      this.setColorElement('primary_color', vcorpredominante);
      this.setColorElement('secondary_color', vcorsecundaria);

      $('.color-pallet').show();
      this.desmarcaCor();
      this.configurations['setted_color0'] = '1';
      this.configurations['setted_color' + (paletaPosition + 1)] = '2';

      this.setColorElement('color0', vcorpredominante);
      for (var i = 0; i < vpaleta.length; i++) {
        this.setColorElement('color' + (i + 1), window.chroma(vpaleta[i]).hex());
      }
    },
    invertColors(){
      let vPrimaryColor = this.configurations['primary_color'];
      this.configurations['primary_color'] = this.configurations['secondary_color'];
      this.configurations['secondary_color'] = vPrimaryColor;

      for (let i = 0; i <= 7; i++) {
        if (this.configurations['setted_color' + i] == '1'){
          this.configurations['setted_color' + i] = '2'
        } else if (this.configurations['setted_color' + i] == '2'){
          this.configurations['setted_color' + i] = '1'
        }
      }
    },
    applyColors(){
      if (confirm('Esta ação modificará todo o site. Deseja realmente aplicar as cores?')) {
        let vcorpredominante = this.configurations.primary_color;
        let vcorsecundaria = this.configurations.secondary_color;

        let key;
        for (key in elementsNeutralColor) {
          this.setColorElement(key, elementsNeutralColor[key]);
        }

        for (key in elementsColorPredominante) {
          this.setColorElement(key, vcorpredominante, elementsColorPredominante[key]);
        }

        for (key in elementsColorSecundaria) {
          this.setColorElement(key, vcorsecundaria, elementsColorSecundaria[key]);
        }

        for (key in elementsColorPredominanteHover) {
          this.setColorElement(key, hoverColor(vcorpredominante), elementsColorPredominanteHover[key]);
        }
      }
    },
    desmarcaCor(color){
      for (let i = 0; i <= 7; i++) {
        if (color) {
          if (this.configurations['setted_color' + i] == color) {
            this.configurations['setted_color' + i] = ''
          }
        } else {
          this.configurations['setted_color' + i] = ''
        }
      }
    },
    handleInputColorClick(field, event){
      event.preventDefault();
      var element = 'secondary_color';
      if (contColor > 2 || contColor == 0) {
        contColor = 1;
        element = 'primary_color';
      }

      this.desmarcaCor(contColor);

      this.configurations['setted_' + field] = contColor;
      this.setColorElement(element, this.configurations[field]);
      contColor++;
    }
  },
});

AdmVue.init(vm);
