jQuery(document).ready(function() {
  jQuery(".ean13").mask("9999999999999");
  jQuery(".parcelas").mask("99");
  jQuery(".form input").val("");
  jQuery(".form textarea").val("");
  jQuery(".parcelas").val("10");
  var img = new Image();
  var img_cada = new Image();
  var img_virgula = new Image();
  var img_corte = new Image();
  var img_bandeira = new Image();
  var scale = 3;
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  const FONT_NAME_1 = 'Futura_ExtraBlackitalic';
  const FONT_NAME_2 = 'Gotham_UltraItalic';
  const FONT_NAME_3 = 'Gotha_MediumItalic';
  var lines;
  function printAt(index, context , text, x, y, lineHeight, fitWidth) {
    lines = text.split('\n');
    
    for (var i = 0; i<lines.length; i++)
        context.fillText(lines[i], x, y + (i*lineHeight) );
  }
  var patt = /,/g;
  result = false;
  var descricaoW = 0;
  var descricaoT = "";
  function validador(index, id, x, y, cnt) {
    var indexi = index+1;
    var txt = jQuery("#form-"+indexi+" "+id).val();
    if (txt) {
      txt = jQuery("#form-"+indexi+" "+id).val();
    } else {
      txt = cnt;
    }
    result = patt.test(txt);
    if (id == ".descricao") {
      descricaoW = ctx.measureText(","+jQuery("#form-"+indexi+" .descricao").val()).width;
      printAt(index, ctx, txt, x, y, 70*scale, 550*scale);
    } else if (id == ".preco" && result) {
        if (href == "parcelamento" && jQuery(".parcelas").val() > 1){
          canvas.style.letterSpacing = -10*scale+"px";
          var parcela = ((txt.replace(/,.*/,'')+"."+txt.replace(/.*,/,''))/jQuery(".parcelas").val()).toFixed(3).toString();
          console.log(Number(parcela.replace(/.*\./,'')));
          if (parcela.replace(/.*\.../,'') == 0 || Number(parcela.replace(/.*\./,'')) < 990) {
            parcela = ((txt.replace(/,.*/,'')+"."+txt.replace(/.*,/,''))/jQuery(".parcelas").val()).toFixed(2).toString();
          }
          if(parcela.replace(/.*\./,'').length > 2){
            ctx.font = 80*scale+`px "${FONT_NAME_1}"`;
            widthPrecoPor2 = ctx.measureText(","+parcela.replace(/.*\./,'').replace(/.$/,'')).width;
          } else if(Number(parcela.replace(/.*\./,'')) > 0){
            ctx.font = 80*scale+`px "${FONT_NAME_1}"`;
            widthPrecoPor2 = ctx.measureText(","+parcela.replace(/.*\./,'')).width;
          } else {
            widthPrecoPor2 = 0;
          }
          ctx.font = 210*scale+`px "${FONT_NAME_1}"`;
          widthPrecoPor = ctx.measureText(parcela.replace(/\..*/,'')).width;
          ctx.fillText(parcela.replace(/\..*/,''), x-widthPrecoPor2/2, y);
          if(Number(parcela.replace(/.*\./,'')) > 0){
            if(parcela.replace(/.*\./,'').length > 2){
              ctx.font = 80*scale+`px "${FONT_NAME_1}"`;
              ctx.fillText(","+parcela.replace(/.*\./,'').replace(/.$/,''), canvas.width/2+widthPrecoPor/2, y-85);
              ctx.font = 15*scale+`px "${FONT_NAME_1}"`;
              ctx.fillText(parcela.replace(/.*\./,'').replace(/../,''), canvas.width/2+widthPrecoPor/2+widthPrecoPor2/2+10, y-85);
            } else {
              ctx.font = 80*scale+`px "${FONT_NAME_1}"`;
              ctx.fillText(","+parcela.replace(/.*\./,'').replace(/.*\./,''), canvas.width/2+widthPrecoPor/2, y-85);
            }
          } else {
            widthPrecoPor2 = 0;
          }
        } else {
           ctx.fillText(txt.replace(/,.*/,''), x-widthPrecoPor2/2-(60-space1)*scale, y);
            canvas.style.letterSpacing = -11*scale+"px";
            ctx.font = 200*scale/fontPrice+`px "${FONT_NAME_1}"`;
            ctx.fillText(txt.replace(/.*,/,''), canvas.width/2+widthPrecoPor/2+20*scale, y-130*scale/fontPrice);
            jQuery(img_virgula).attr("src", "assets/img/img-virgula.png").load(function() {
                ctx.drawImage(img_virgula,canvas.width/2+widthPrecoPor/2-widthPrecoPor2,canvas.height-this.naturalHeight-10*scale/tamPrice-space2*quantPrice*scale,this.naturalWidth-4*scale*tamPrice,this.naturalHeight-4*scale*tamPrice);
            });
        }
        // widthPrecoPor2 = ctx.measureText(","+txt.replace(/.*,/,'')).width;
        widthPrecoPor = widthPrecoPor + widthPrecoPor2;
    } else if (id == "#ean13") {
      ctx.fillText("cód. barras "+txt, x, y);
    } else {
      if (href == "parcelamento" && id == ".preco" && jQuery(".parcelas").val()){
        ctx.fillText(Math.round(txt.replace(/,.*/,'')/jQuery(".parcelas").val()), x, y);
      } else {
        ctx.fillText(txt, x, y);
      }
    }

  }
  var widthPrecoPor, widthPrecoPor2, widthPrecoDe, posY, letterSpacingPreco, fontPrice, tamPrice, space1, space2, space3, parY = 0;
  var space2 = 10;
  var href_old;
  var href = location.hash.replace("#",'');
  if(href==""){href="oferta"}
  var normal = 0;
  function zerar(){
    ctx.resetTransform();
    ctx.clearRect(0, 0, canvas.width*5, canvas.height*5);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.restore();
    ctx.shadowBlur = 30;
    ctx.shadowOffsetY = 0;
    ctx.shadowOffsetX = 0;
  }
  function desenhar() {
    var indexi;
    zerar();
    jQuery(".forms form").each(function(index){
      ctx.resetTransform();
      ctx.fillStyle = '#000';
      ctx.textAlign='center';
      indexi = index+1;
      valor = jQuery("#form-"+indexi+" .preco").val().replace(/[^0-9,]+/g,'');
      jQuery("#form-"+indexi+" .preco").val(valor);
      if (href == "oferta" || !href){
        normal = 0;
        jQuery("#form-"+indexi+" .preco_de").show();
        jQuery("#form-"+indexi+" .preco").attr("placeholder", 'Preço por');
        if (jQuery("#form-"+indexi+" preco_de").val()=="00") {
          jQuery("#form-"+indexi+" preco_de").val("");
        }
      } else {
        jQuery("#form-"+indexi+" .preco_de").val("00");
        jQuery("#form-"+indexi+" .preco_de").hide();
        jQuery("#form-"+indexi+" .preco").attr("placeholder", 'Preço');
        normal = 58;
      }
      
      
    if (href == "parcelamento"){
      parY = 100;
      jQuery(".parcelas").show();
      ctx.font = 50*scale+`px "${FONT_NAME_3}"`;
      if (jQuery(".parcelas").val()) {
        if (jQuery(".parcelas").val() == 0) {
          jQuery(".parcelas").val("1");
        } else if (jQuery(".parcelas").val() > 10 && jQuery(".parcelas").val() < 20){
          jQuery(".parcelas").val("10");
        } else if(jQuery(".parcelas").val() >= 20){
          var par = jQuery(".parcelas").val().replace(/.$/,'');
          jQuery(".parcelas").val(par);
        }
        ctx.fillText(jQuery(".parcelas").val()+"X", 200*scale, 515*scale);
        var widthParcelas = ctx.measureText(jQuery(".parcelas").val()+"X").width;
      } else {
        ctx.fillText("0X", 200*scale, 515*scale);
        var widthParcelas = ctx.measureText("0X").width;
      }
      console.log(jQuery(".parcelas").val());
      ctx.font = 20*scale+`px "${FONT_NAME_2}"`;
      ctx.fillText("EM", 140*scale, 515*scale);
      ctx.fillText("sem juros nos cartões", 200*scale+ctx.measureText("sem juros nos cartões").width/2+widthParcelas-widthParcelas/2+25, 515*scale);

      jQuery(img_bandeira).attr("src", "assets/img/bandeiras.svg").load(function() {
        ctx.drawImage(img_bandeira,canvas.width/2-this.naturalWidth/2,canvas.height-this.naturalHeight-150,this.naturalWidth,this.naturalHeight);
      });
    } else {
      parY = 0;
      jQuery(".parcelas").val("10");
      jQuery(".parcelas").hide();
    }

      canvas.style.letterSpacing = "0";
      ctx.font = 75.5*scale+`px "${FONT_NAME_2}"`;
      posY = canvas.height/2-(66+normal)*scale
      validador(index, ".descricao", canvas.width/2, posY, "DESCRIÇÃO\n DO PRODUTO");
      
      posY = posY+75.5*scale*lines.length-10*scale*lines.length;
      ctx.font = 51*scale+`px "${FONT_NAME_3}"`;
      validador(index, ".caracteristicas", canvas.width/2, posY, "Características");
      ctx.font = 18*scale+`px "${FONT_NAME_3}"`;
      var widthEan = ctx.measureText(jQuery("#form-"+indexi+" .ean13").val()).width;
      if(widthEan==0){widthEan=ctx.measureText(jQuery("1234567890123").val()).width}
      validador(index, ".ean13", canvas.width-widthEan/2-35*scale, canvas.height-20*scale, "1234567890123");
      
      quantPrice = jQuery("#form-"+indexi+" .preco").val().replace(/,.*/,'').length;
      if(quantPrice==1){
         fontPrice = 1;
         tamPrice = 1;
      } else if(quantPrice==2) {
         fontPrice = quantPrice*.7;
         tamPrice = quantPrice*3;
      } else {
         fontPrice = quantPrice*.6;
         tamPrice = quantPrice*3;
      }
      if(jQuery("#form-"+indexi+" .preco").val().charAt(0)==1){
          letterSpacingPreco = 90/fontPrice;
          space1 = 0;
          space3 = 15;
         if(quantPrice==1){
            tamPrice = quantPrice*3;
         } else if(quantPrice==2){
            fontPrice = quantPrice*.62;
            tamPrice = quantPrice*2;
            space1 = 10;
            space3 = 15;
            if (href == "normal"){
             space3 = 15;
            }
         } else {
            fontPrice = quantPrice*.52;
            tamPrice = quantPrice*2.8;
            letterSpacingPreco = 80/fontPrice;
            space1 = 20;
            space3 = 5;
         }
      } else {
          letterSpacingPreco = 38/fontPrice;
          space1 = 40;
          space3 = 5;
      }
      ctx.fillStyle = '#E41C25';
      canvas.style.letterSpacing = -11*scale+"px";
      ctx.font = 200*scale/fontPrice+`px "${FONT_NAME_1}"`;
      widthPrecoPor2 = ctx.measureText(jQuery("#form-"+indexi+" .preco").val().replace(/.*,/,'')).width;
      canvas.style.letterSpacing = -letterSpacingPreco*scale+"px";
      ctx.font = 400*scale/fontPrice+`px "${FONT_NAME_1}"`;
      widthPrecoPor = ctx.measureText(jQuery("#form-"+indexi+" .preco").val().replace(/,.*/,'')).width;
      validador(index, ".preco", canvas.width/2, canvas.height-20*scale-space2*quantPrice*scale-parY*scale, "00");
      if (widthPrecoPor==0) {
        widthPrecoPor = ctx.measureText("00").width;
      }
      
      img_cada = new Image();
      if (href == "normal"){
        jQuery(img).attr("src", "assets/img/img-r$.png").load(function() {
            ctx.drawImage(img,20*scale,canvas.height/2+this.naturalHeight+8*scale*tamPrice,this.naturalWidth,this.naturalHeight);
        });
      } else if (href == "a_partir"){
          canvas.style.letterSpacing = "0";
          ctx.font = 50*scale*fontPrice+`px "${FONT_NAME_1}"`;
          ctx.fillText("A PARTIR", canvas.width/2, 670*scale-500/fontPrice);
          ctx.font = 30*scale+`px "${FONT_NAME_1}"`;
          ctx.fillText("DE", canvas.width/2-widthPrecoPor+widthPrecoPor/2-10*scale, 730*scale-500/fontPrice);
        } else if (href == "parcelamento") {
          canvas.style.letterSpacing = "0";
          ctx.font = 25*scale+`px "${FONT_NAME_1}"`;
          ctx.fillText("DE", canvas.width/2-widthPrecoPor+widthPrecoPor/2-20*scale, 580*scale);
    
          ctx.textAlign='right';
          ctx.font = 15*scale+`px "${FONT_NAME_2}"`;
          ctx.fillText("preço à vista", canvas.width/2+widthPrecoPor-widthPrecoPor/2-100*scale, (790-normal)*scale);
          ctx.textAlign='left';
          if (jQuery(".preco").val().indexOf(",") > 0 && jQuery(".preco").val().replace(/.*,/,'').length == 1) {
            ctx.font = 35*scale+`px "${FONT_NAME_3}"`;
            ctx.fillText(jQuery(".preco").val()+"0", canvas.width/2+10+widthPrecoPor-widthPrecoPor/2-100*scale, (790-normal)*scale);
          } else {
            ctx.font = 35*scale+`px "${FONT_NAME_3}"`;
            ctx.fillText(jQuery(".preco").val(), canvas.width/2+10+widthPrecoPor-widthPrecoPor/2-100*scale, (790-normal)*scale);
          }
          ctx.textAlign='center';
          img_cada = 0;
        } else {
            ctx.fillStyle = '#000000';
            ctx.textAlign='left';
            canvas.style.letterSpacing = -1*scale+"px";
            ctx.font = 35*scale+`px "${FONT_NAME_1}"`;
            validador(index, ".preco_de", 50*scale, canvas.height/2+(101-space3)*scale+5*scale*tamPrice, "00");
            widthPrecoDe = ctx.measureText(jQuery("#form-"+indexi+" .preco_de").val()).width;
            
            console.log(widthPrecoDe);
            jQuery(img_corte).attr("src", "assets/img/img_corte.png").load(function() {
                ctx.drawImage(img_corte,35*scale,canvas.height/2+(73-space3)*scale+5*scale*tamPrice,widthPrecoDe+30*scale,35*scale);
            });
          
            canvas.style.letterSpacing = 0;
            ctx.font = 20*scale+`px "${FONT_NAME_3}"`;
            ctx.fillText("DE", 15*scale, canvas.height/2+(100-space3)*scale+5*scale*tamPrice);
            
            ctx.fillStyle = '#E41C25';
            ctx.font = 25*scale+`px "${FONT_NAME_3}"`;
            ctx.fillText("POR", 15*scale, canvas.height/2+(140-space3)*scale+5*scale*tamPrice);
        }
        
          jQuery(img_cada).attr("src", "assets/img/img-cada.png").load(function() {
            ctx.drawImage(img_cada,canvas.width/2+widthPrecoPor/2-widthPrecoPor2+110*scale/fontPrice,canvas.height-this.naturalHeight-80*scale/fontPrice-space2*quantPrice*scale,this.naturalWidth-6.66*scale*tamPrice,this.naturalHeight-2*scale*tamPrice);
          });
    });
  }

  function downloadCanvas(link, filename) {
    link.href = document.getElementById('myCanvas').toDataURL();
    link.download = filename;
  }

  jQuery("#imprimir").on('click', function(e) {
    var cont = 0;
    jQuery(".form input, .form textarea").each(function(){
      if(jQuery(this).val() == "") {
        jQuery(this).css("border-color", "#F00");
        cont++;
      }
    });
    if(cont == 0) {
      jQuery(".col-right").hide();
      jQuery("#myCanvas").css("max-height", '100%');
      jQuery("#myCanvas").css("top", 0);
      window.print();
      jQuery(".col-right").show();
      jQuery("#myCanvas").css("max-height", '842px');
      jQuery("#myCanvas").css("top", jQuery(window).scrollTop());
    }
  });

  jQuery(".form input, .form textarea").on('keyup', function(e) {
    var code = e.key;
    jQuery(this).css("border-color", "#ccc");
    desenhar();
  })
  .blur(function() {
    if(jQuery(this).val() == ""){
      jQuery(this).css("border-color", "#F00");
    }
  });
  desenhar();
    if(href=="oferta"){
        jQuery("#myCanvas").css("background-image", "url(assets/img/bg-1.jpg)");
    } else {
        jQuery("#myCanvas").css("background-image", "url(assets/img/bg-2.jpg)");
    }
    
    var ExcelToJSON = function() {

        this.parseExcel = function(file) {
          var reader = new FileReader();

          reader.onload = function(e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, {
              type: 'binary'
            });
            workbook.SheetNames.forEach(function(sheetName) {
              // Here is your object
              var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
              var json_object = JSON.stringify(XL_row_object);
              var json_parse = JSON.parse(json_object)
              console.log(json_parse);
              json_parse.forEach(function(current, index) {
                  console.log(index);
                  console.log(current["Tipo"]);
                  console.log(current["Descrição"]);
                  console.log(current["Preço"]);
                  console.log(current["Preço De"]);
                  console.log(current["cód. Barras"]);
              });
            })
          };

          reader.onerror = function(ex) {
            console.log(ex);
          };

          reader.readAsBinaryString(file);
        };
    };

    function handleFileSelect(evt) {

      var files = evt.target.files; // FileList object
      var xl2json = new ExcelToJSON();
      xl2json.parseExcel(files[0]);
    }
    
    document.getElementById('upload').addEventListener('change', handleFileSelect, false);
});