var elementColorsArray = {};

function setColorElement(elementname, colorhex, elementText) {
  $('[name="' + elementname + '"]').prop('value', colorhex);
  $('[name="' + elementname + '"]').css('background', colorhex);

  //Define a cor da fonte para branca se o fundo for escuro e preta se o fundo for claro
  if (window.chroma(colorhex).luminance() > 0.6) {
    $('[name="' + elementname + '"]').css('color', '#000000');
  } else {
    $('[name="' + elementname + '"]').css('color', '#FFFFFF');
  }

  elementColorsArray[elementname] = colorhex;
  if (elementText) {
    if (window.chroma(colorhex).luminance() > 0.6) {
      $('[name="' + elementText + '"]').css('color', '#FFFFFF');
      $('[name="' + elementText + '"]').prop('value', '#000000');
      $('[name="' + elementText + '"]').css('background', '#000000');
      elementColorsArray[elementText] = '#000000';
    } else {
      $('[name="' + elementText + '"]').css('color', '#000000');
      $('[name="' + elementText + '"]').prop('value', '#FFFFFF');
      $('[name="' + elementText + '"]').css('background', '#FFFFFF');
      elementColorsArray[elementText] = '#FFFFFF';
    }
  }
}

function getColorHexElement(elementname) {
  return $('[name="' + elementname + '"]').prop('value');
}

//================================== Elementos Cores ==================================//
var elementsColorPredominante = {
  wg24_l_linkc: '', // PRINCIPAL - Cor do link

  wg24_link_color_stick: '', // TOPO (Geral) - Cor dos links
  wg24_header_btsearch: 'wg24_icon_btnsearch_color', // TOPO (Botão pesquisar) - Cor do botão pesquisar : Cor do icone do botão pesquisar
  wg24_l_body_tbc: '', // TOPO (Barra de opções) - Cor da Borda Superior
  wg24_header_menulcolor: '', // TOPO (Barra de opções) - Cor dos links da barra de opções

  wg24_btnsearch_color: 'wg24_link_hover_color_stick', // BANNER PRINCIPAL - Cor do botão : Cor do texto do botão

  wg24_mm_bgcol: 'wg24_menum_lcolor', // MENU PRINCIPAL - Cor do fundo : Cor dos links
  wg24_mm_bgcol_center: '', // MENU PRINCIPAL - Cor do fundo central
  wg24_mainm_brcol: '', // MENU PRINCIPAL - Cor da borda da direita

  wg24_bg_color_menu_lateral: 'wg24_link_color_menu_lateral', //MENU LATERAL - Cor do Fundo : Cor dos links
  wg24_bg_color_menu_lateral: 'wg24_title_color_menu_lateral', //MENU LATERAL - Cor do Fundo : Cor dos links
  wg24_border_color_menu_lateral: '', //MENU LATERAL - Cor da Borda categorias

  wg24_btn_1bg_col: 'wg24_btn_text_col', // BOTÕES (Geral) - Cor de fundo : Cor do texto do botão comprar
  wg24_home_sbtn_bgcol: 'wg24_home_btn_hbr_txclr', // BOTÕES (Botões de navegação) - Cor de fundo : Cor do texto

  /* wg24_fotlinicon_h_col: 'wg24_fotlinicon_col',  RODAPÉ (Geral) - Cor do fundo dos ícones de contato : Cor dos ícones de contato ----- // Removed in new footer, awaiting customers approval*/
  wg24_fot_bbg_col: 'wg24_fot_powerred_col', // Rodapé (Geral : Personalizado) - Cor de fundo da base do rodapé : Cor do texto
  wg24_fot_bbg_col: 'wg24_fot_powerred_hover_col', // RODAPÉ (Personalizado) - Cor do texto quando o mouse estiver por cima
};

var elementsColorSecundaria = {
  wg24_top_cart_bgcol: 'wg24_topcart_te_colo', // BANNER PRINCIPAL - Cor de fundo : Cor do texto

  wg24_icon_checked_color_menu_lateral: '', // MENU LATERAL - Cor do checked
  wg24_button_color_menu_lateral: 'wg24_button_text_color_menu_lateral', // MENU LATERAL - Cor dos botões : Cor do texto

  wg24_finalizar_carrinho: 'wg24_finalizar_carrinho_texto', // Botões (Botão finalizar) - Cor de fundo : Cor do texto
};

//================================== Elementos Cores Hover ==================================//
var elementsColorPredominanteHover = {
  wg24_l_hcolor: '', // PRINCIPAL - Cor dos links quando o mouse passa por cima

  wg24_m_color_background: '', // TOPO (Geral) - Cor dos links quando o mouse passa por cima
  wg24_header_menulhcolor: '', // TOPO (Barra de opções) - Cor dos links quando o mouse estiver por cima

  wg24_menu_hbgcolor: 'wg24_mainm_lhcolor', // MENU PRINCIPAL - Cor do fundo : Cor dos links

  wg24_home_sbtn_hbr_bgclr: '', // BOTÕES (Botões de navegação) - Cor de fundo do botão quando o mouse estiver por cima
};

//================================== Elementos Cores Neutras ==================================//
var elementsNeutralColor = {
  //Principal
  wg24_l_bodyb: '#FFFFFF', // PRINCIPAL - Cor do Fundo
  wg24_l_header_color: '#0D0D0D', //PRINCIPAL - Cor dos Títulos
  wg24_l_body_fc: '#666666', // PRINCIPAL - Cor da Fonte Padrão

  //Topo
  wg24_header_bg_color: '#FFFFFF', // TOPO (Geral) - Cor do Fundo no Topo
  wg24_heade_m_lin_bg_c: '#FFFFFF', // TOPO (Geral) - Cor da borda superior
  wg24_color_border_background: '#FFFFFF', // TOPO (Geral) - Cor da borda inferior
  wg24_header_bgcolor: '#FFFFFF', // TOPO (Barra de opções) - Cor do fundo do menu no topo

  //Destaques Principais
  wg24_home_fboxbg_col: '#FFFFFF', // DESTAQUES PRINIPAIS - Cor do fundo das informações
  wg24_hom_fe_boxdes_col: '#666666', // DESTAQUES PRINIPAIS - Cor da descrição nas caixas de informações

  //Produtos
  wg24_product_bx_bgclr: '#FFFFFF', // PRODUTOS (Caixa de produto) - Cor do fundo
  wg24_product_bx_bdrclr: '#FFFFFF', // PRODUTOS (Caixa de produto) - Cor da borda
  wg24_product_box_n_col: '#666666', // PRODUTOS (Caixa de produto) - Cor do nome do produto
  wg24_product_box_nhov_col: '#0D0D0D', // PRODUTOS (Caixa de produto) - Cor do nome do produto quando o mouse estiver por cima
  wg24_product_box_price_col: '#0D0D0D', // PRODUTOS (Caixa de produto) - Cor do preço
  wg24_product_box_oldprce_col: '#666666', // PRODUTOS (Caixa de produto) - Cor do preço antigo
  wg24_product_box_sicon_bgcolor: '#DD4B39', // PRODUTOS (Destaque produto com desconto) - Fundo da mensagem de produtos com desconto
  wg24_product_box_sale_nicontcolor: '#FFFFFF', // PRODUTOS (Destaque produto com desconto) - Cor do texto de produtos com desconto

  //Rodapé
  wg24_footer_bg_col: '#FFFFFF', // RODAPÉ (Geral) - Cor de fundo
  wg24_fotheadin_col: '#0D0D0D', // RODAPÉ (Geral) - Cor do título do rodapé
  wg24_fotlin_col: '#666666', // RODAPÉ (Geral) - Cor dos links no rodapé
  wg24_fotlin_h_col: '#0D0D0D', // RODAPÉ (Geral) - Cor do link do rodapé no hover
  wg24_fot_line: '#CCCCCC', // RODAPÉ (Geral) - Cor da linha de separação do rodapé
  wg24_fotaout_des_col: '#0D0D0D', // RODAPÉ (Sobre nós) -  Cor do texto
};

function setColors() {
  $('#primary_color').data('initial-color', $('#primary_color').val());
  $('#secondary_color').data('initial-color', $('#secondary_color').val());

  let vcorpredominante = getColorHexElement($('#primary_color').attr('name'));
  let vcorsecundaria = getColorHexElement($('#secondary_color').attr('name'));

  for (var key in elementsNeutralColor) {
    setColorElement(key, elementsNeutralColor[key]);
  }

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

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

  for (var key in elementsColorPredominanteHover) {
    setColorElement(key, hoverColor(vcorpredominante), elementsColorPredominanteHover[key]);
  }

  return elementColorsArray;
}

//Retorna a cor do hover
//(mais clara quando a cor é escura e mais escura quando a cor é clara)
function hoverColor(corHex, variacao) {
  if (typeof variacao == 'undefined') {
    variacao = 40;
  }

  var corRGB = window.chroma(corHex).rgb();

  var lumini = corRGB[0] * 0.4 + corRGB[1] * 0.5 + corRGB[2] * 0.1;
  let luminosidade = lumini / 255;

  if (luminosidade >= 0.4) {
    for (var i = 0; i < corRGB.length; i++) {
      if (corRGB[i] >= variacao) {
        corRGB[i] -= variacao;
      } else {
        corRGB[i] = 0;
      }
    }
  } else {
    for (var i = 0; i < corRGB.length; i++) {
      if (corRGB[i] <= 255 - variacao) {
        corRGB[i] += variacao;
      } else {
        corRGB[i] = 255;
      }
    }
  }
  return window.chroma(corRGB).hex();
}

//Desmarca o numero nas cores detectadas
function desmarcaCor(cor) {
  $('.setted-color').each(function() {
    if ($(this).text() == cor) {
      $(this)
        .text('')
        .hide();
    }
  });
}

function isColor(color) {
  var RGB = /[R][G][B][(]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*[)]/i;
  var RGBA = /[R][G][B][A][(]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(\s*,\s*([0]?[.][0-9]?[0-9]|[01]))?\s*[)]/i;
  var HEX = /^[\#]?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;

  var HSL = /[H][S][L][(]\s*([01]?[0-9]?[0-9]|2[0-9][0-9]|3[0-5][0-9]|360)\s*,\s*([0-9]?[0-9]\%|100\%)\s*,\s*([0-9]?[0-9]\%|100\%)\s*[)]/i;
  var HSLA = /[H][S][L][A][(]\s*([01]?[0-9]?[0-9]|2[0-9][0-9]|3[0-5][0-9]|360)\s*,\s*([0-9]?[0-9]\%|100\%)\s*,\s*([0-9]?[0-9]\%|100\%)(\s*,\s*([0]?[.][0-9]?[0-9]|[01]))?\s*[)]/i;

  var result;
  if (RGB.test(color)) result = 'rgb';
  if (RGBA.test(color)) result = 'rgba';
  if (HEX.test(color)) result = 'hex';
  if (HSL.test(color)) result = 'hsl';
  if (HSLA.test(color)) result = 'hsla';
  return result;
}

export {elementsNeutralColor, elementsColorPredominante, elementsColorSecundaria, elementsColorPredominanteHover,
  setColorElement, hoverColor, getColorHexElement, setColors, desmarcaCor, isColor, elementColorsArray};
