window.onload = function () {
  var setshowcode = "hex";

  function rgbToHex(r, g, b) {
    r = r.toString(16);
    g = g.toString(16);
    b = b.toString(16);

    if (r.length == 1) r = "0" + r;
    if (g.length == 1) g = "0" + g;
    if (b.length == 1) b = "0" + b;

    return r + g + b;
  }

  function setcolorfun(setcolorcode, colors, itemset) {
    var setcode, getss;
    var c = w3color(colors);
    switch (setcolorcode) {
      case "hex":
        getss = "#" + colors;
        setcode = "hex";
        break;
      case "rgb":
        getss = "rgb(" + c.toRgbString() + ")";
        setcode = "rgb";
        break;
      case "hsl":
        getss = "hsl(" + c.toHslString() + ")";
        setcode = "hsl";
        break;
      case "hwb":
        getss = "hwb(" + c.toHwbString() + ")";
        setcode = "hwb";
        break;
      case "hsv":
        getss = "hsv(" + c.toHsvString() + ")";
        setcode = "hsv";
        break;
      case "ncol":
        getss = "ncol(" + c.toNcolString() + ")";
        setcode = "ncol";
        break;
      case "lab":
        getss = "lab(" + c.toLabString() + ")";
        setcode = "lab";
        break;
      case "cmyk":
        getss = "cmyk(" + c.toCmykString() + ")";
        setcode = "cmyk";
        break;
    }
    itemset.attr("data-val", setcode);
    itemset.attr("data-hint", getss);
  }

  const showColorsForImage = function (image) {
    let start = Date.now();

    let result = colorThief.getColor(image);

    let elapsedTime = Date.now() - start;
    const colorHTML = Mustache.to_html(
      document.getElementById("color-tpl").innerHTML,
      {
        color: result,
        colorStr: result.toString(),
        elapsedTime,
      }
    );

    let paletteHTML = "";
    let colorCounts = [4, 5, 6, 7];
    colorCounts.forEach((count) => {
      let start = Date.now();

      let result = colorThief.getPalette(image, count);

      let elapsedTime = Date.now() - start;
      paletteHTML += Mustache.to_html(
        document.getElementById("palette-tpl").innerHTML,
        {
          count,
          palette: result,
          paletteStr: result.toString(),
          elapsedTime,
        }
      );
    });

    let button = document.querySelector(".colorViewok");
    button.innerHTML +=
      colorHTML + "<div class='allpalette'>" + paletteHTML + "</div>";

    $(".copyvalue").each(function () {
      var r = Number($(this).attr("data-r"));
      var g = Number($(this).attr("data-g"));
      var b = Number($(this).attr("data-b"));
      $(this).attr("data-val", "hex");
      $(this).attr("data-hex", rgbToHex(r, g, b));
    });

    var largeContent = $("#largeContent").html();
    var settings = {
      trigger: "click",
      title: '<svg style="display: inline-block;vertical-align: top;" class="icon icon16"><use xlink:href="#color-photo-camera"></use></svg> 添加调色板',
      content: "",
      width: 400,
      multi: false,
      closeable: false,
      style: "",
      selector: true,
      padding: true,
      arrow: false,
    };

    var largeSettings = {
      content: largeContent,
      width: "80%",
      height: 550,
      closeable: true,
      backdrop: true,
      animation: "pop",
      onShow: function ($element) {
        $(".header").addClass("showblur");
        $(".main").addClass("showblur");
        window.scrollTo(0, 0);
        setTimeout(function () {
          $(".onlinecolor").addClass("onlinehide");
        }, 100);

        $("span.selectitem").click(function () {
            $("span.selectitem").removeClass('Active');
            if ($(this).hasClass("Active")) {  
                $(this).removeClass('Active');
            }else{
                $(this).addClass('Active');
            }
        });

        $("span.addcolorb").click(function () {
            var addstyle=$("span.selectitem.Active").attr('data-val');
            var addcolorcode=$("#addcolorsvalue").val();
            var setsvg = '<svg class="icon icon32 spop-icon" style="color:#FCC503;"> <use xlink:href="#color-photo-camera"></use> </svg>';
            $.ajax({
                url: 'addcolor.php',
                type: 'post',
                data: {
                    name: addstyle,
                    colorcode:addcolorcode
                },
                success: function(response) {
                    if (response=="color"){
                        $("div.addcolorto").webuiPopover('hide');
                        spop({
                            template: setsvg + '<div><span>'+sun_add_color+'</span><text>'+online_new_see+'</text></div>',
                            position: 'bottom-center',
                            style: 'warning',
                            autoclose: 2000
                        });
                    }else{
                        setsvg = '<svg class="icon icon32 spop-icon" style="width: 24px;height: 24px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14958"><path d="M0 0m146.285714 0l731.428572 0q146.285714 0 146.285714 146.285714l0 731.428572q0 146.285714-146.285714 146.285714l-731.428572 0q-146.285714 0-146.285714-146.285714l0-731.428572q0-146.285714 146.285714-146.285714Z" fill="#FFEEE9" p-id="14959"></path><path d="M877.714286 0a146.285714 146.285714 0 0 1 146.285714 146.285714v731.428572a146.285714 146.285714 0 0 1-146.285714 146.285714H146.285714a146.285714 146.285714 0 0 1-146.285714-146.285714V146.285714a146.285714 146.285714 0 0 1 146.285714-146.285714h731.428572z m0 54.857143H146.285714a91.428571 91.428571 0 0 0-91.245714 85.430857L54.857143 146.285714v731.428572a91.428571 91.428571 0 0 0 85.430857 91.245714L146.285714 969.142857h731.428572a91.428571 91.428571 0 0 0 91.245714-85.430857L969.142857 877.714286V146.285714a91.428571 91.428571 0 0 0-85.430857-91.245714L877.714286 54.857143z" fill="#FFCECB" p-id="14960"></path><path d="M757.211429 312.758857l-44.397715-44.397714-200.338285 200.265143-199.972572-200.045715-43.885714 43.922286 200.045714 199.972572-200.301714 200.338285 44.397714 44.397715 200.338286-200.265143 199.972571 200.045714 43.885715-43.922286-200.045715-199.972571z" fill="#EB2F3F" p-id="14961"></path></svg>';
                        spop({
                            template: setsvg + '<div><span>'+online_paletteok+'</span><text>'+online_new_see+'</text></div>',
                            position: 'bottom-center',
                            style: 'warning',
                            autoclose: 2000
                        });
                    }
                }
            });
        });
        
        
      },
      onHide: function ($element) {
        $(".header").removeClass("showblur");
        $(".main").removeClass("showblur");
        $(".onlinecolor").removeClass("onlinehide");
      },
    };


    $("div.addcolorto").webuiPopover("destroy").webuiPopover($.extend({}, settings, largeSettings));

    
    $("div.addcolorto").hover(function () {
      var showcode = "";
      var showhtml = "";
      var setint = 0;
      var gethex;
      $(this)
        .parent()
        .find(".copyvalue")
        .each(function () {
          gethex = $(this).attr("data-hex");
          gethex = gethex.toUpperCase();
          if (setint == 0) {
            showcode = "#" + $(this).attr("data-hex");
            showhtml =
              '<div class="copycolor" data-color="' +
              gethex +
              '" style="background: #' +
              gethex +
              ';"><span data-val="' +
              gethex +
              '">' +
              gethex +
              "</span></div>";
          } else {
            showcode = showcode + "," + "#" + gethex;
            showhtml =
              showhtml +
              '<div class="copycolor" data-color="' +
              gethex +
              '" style="background: #' +
              gethex +
              ';"><span data-val="' +
              gethex +
              '">' +
              gethex +
              "</span></div>";
          }
          setint = setint + 1;
        });

      showcode = showcode.toUpperCase();

      $(".addpalettecolors").html(showhtml);

      $("#addcolorsvalue").val(showcode);
    });

    $(".showcolor-item").click(function () {
      var showc = $(this).attr("data-val");
      $(".sorttext").html(showc.toUpperCase());
      $(".dropdown-menu").css("display", "none");
      $(".copyvalue").each(function () {
        var dahex = $(this).attr("data-hex");
        setcolorfun(showc, dahex, $(this));
      });
      setTimeout(function () {
        $(".dropdown-menu").css("display", "");
      }, 800);
      $(".showshowt").html('<use xlink:href="#color-' + showc + '"></use>');
      $(".copyvalue")
        .find(".icon20")
        .html('<use xlink:href="#color-' + showc + '"></use>');
    });

    $(".copyvalue").click(function () {
      var r = Number($(this).attr("data-r"));
      var g = Number($(this).attr("data-g"));
      var b = Number($(this).attr("data-b"));
      var setc = $(this).attr("data-hint");
      var setv = $(this).attr("data-val");
      var setsvg =
        '<svg class="icon icon32 spop-icon"> <use xlink:href="#color-' +
        setv +
        '"></use> </svg>';
      navigator.clipboard.writeText(setc);

      spop({
        template:
          setsvg +
          "<div><span>"+suncopystrr+"</span><text>" +
          setc +
          "</text></div>",
        position: "bottom-center",
        autoclose: 4000,
      });
    });
  };

  let button = document.querySelector("#chooseBtn");
  let img = document.querySelector(".target-image");
  var colorThief = new ColorThief();

  button.onchange = function () {
    if (this.files.length === 0) img.src = "assets/default.webp";
    else img.src = URL.createObjectURL(this.files[0]);

    img.onload = function () {
      document.querySelector(".colorViewok").innerHTML = "";
      showColorsForImage(img);
    };
  };

  let event = new Event("change");
  button.dispatchEvent(event);
};