//Function to convert hex format to a rgb color

var hexAlpha,
  hexAlphaSE,
  hex,
  gethex,
  opacity,
  opaslider = 1;

function rgb2hex(rgba) {
  var rgb = validDigits(rgba);

  rgb = rgb.match(/^[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
  return rgb && rgb.length === 4
    ? "#" +
        ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2)
    : "";
}

// $('button').click(function(){
//   var hex = rgb2hex($('input').val());
//   $('.result').html(hex);
//   $('body').css('background-color', hex);
// });

$(".rgb-input").on("input", function () {
  getrgb2hex();
});

function getrgb2hex(opaslider) {
  //alert(opaslider);

  var hexvalue = trim($("#colorInput").val());
  var rgba = validDigits(hexvalue);
  opacityval = getOpacity(rgba);

  trim(hexvalue);

  if (hexvalue.indexOf("#") > -1) {
    $(".container").show();
    //     //opaslider
    //     newhexvalue = hexvalue.substr(0, hexvalue.lastIndexOf(","));
    // //alert(newhexvalue);

    hex = hexvalue;
    hex2 = addAlpha(hexvalue, opaslider);
    hex3 = addAlphaSE(hexvalue, opaslider);
    hex4 = addFlipSE(hexvalue);
  } else if (hexvalue.indexOf(",") > -1) {
    $(".container").hide();

    hex = rgb2hex(rgba);
    hex2 = addAlpha(hex, opacityval);
    hex3 = addAlphaSE(hex, opacityval);
    hex4 = addFlipSE(hex);
  } else {
    $(".container").show();
    hexvalue = "#" + hexvalue;
    hex = hexvalue;
    hex2 = addAlpha(hexvalue, opaslider);
    hex3 = addAlphaSE(hexvalue, opaslider);
    hex4 = addFlipSE(hexvalue);
  }

  //var hex = rgb2hex($("input").val());
  $("#colorPicker").val(hex);

  $(".result").html(hex);
  $(".result2").html(hex2);
  $(".result3").html(hex3);
  $(".result4").html(hex4);
  $("body").css("background-color", hex2);
}

function validDigits(n) {
  return n.replace(/[^\d,.]+/g, "");
}

function addAlpha(color, opacity) {
  var opacity;
  // coerce values so ti is between 0 and 1.
  const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
  return color + _opacity.toString(16).toUpperCase();
}

function addAlphaSE(color, opacity) {
  // coerce values so ti is between 0 and 1.
  color = color.substring(1);
  const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
  return _opacity.toString(16).toUpperCase() + color;
}

function addFlipSE(colorcode){

colorcode = colorcode.slice(colorcode.length - 6);
const colorlasttwo = colorcode.slice(- 2);
const colorcenter = colorcode.slice(2,-2);
const colorfirsttwo = colorcode.slice(0,2);

return '#'+colorlasttwo+colorcenter+colorfirsttwo;
}

function getOpacity(colorcode) {
  var opacity = colorcode.split(",");
  // Accessing individual values

  return opacity[3];
}

function trim(str) {
  return str.replace(/^\s+|\s+$/gm, "");
}

const mySlider = document.getElementById("my-slider");
const sliderValue = document.getElementById("slider-value");

function slider() {
  valPercent = (mySlider.value / mySlider.max) * 100;

  var slideropacity = mySlider.value;

  getrgb2hex(slideropacity);

  mySlider.style.background = `linear-gradient(to right, #3264fe ${valPercent}%, #d5d5d5 ${valPercent}%)`;
  sliderValue.textContent = mySlider.value;
}
//slider();

///////////// COLOR PICKER

document.querySelectorAll("input[type=color]").forEach(function (picker) {
  picker.addEventListener("change", function () {
    let color_input = document.getElementById("colorInput");
    color_input.value = picker.value;
    getrgb2hex();
  });
});