import { getButtons } from "./buttons";
import { extConfig, isMobile, isLikesDisabled, isNewDesign, isShorts } from "./state";
import { cLog, getColorFromTheme } from "./utils";

function createRateBar(likes, dislikes) {
  if (!isLikesDisabled()) {
    let rateBar = document.getElementById("ryd-bar-container");

    const widthPx =
      getButtons().children[0].clientWidth +
      getButtons().children[1].clientWidth +
      8;

    const widthPercent =
      likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;

    var likePercentage = parseFloat(widthPercent.toFixed(1));
    const dislikePercentage = (100 - likePercentage).toLocaleString();
    likePercentage = likePercentage.toLocaleString();


    if (extConfig.showTooltipPercentage) {
      var tooltipInnerHTML;
      switch (extConfig.tooltipPercentageMode) {        
        case "dash_dislike":
          tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${dislikePercentage}%`
        break;
        case "both":
          tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%`
          break;
        case "only_like":
          tooltipInnerHTML = `${likePercentage}%`
          break;
        case "only_dislike":
          tooltipInnerHTML = `${dislikePercentage}%`
          break;
        default: // dash_like
          tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${likePercentage}%`
      }
    } else {
      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`
    }  
    
    if (!isShorts()) {
      if (!rateBar && !isMobile()) {
        let colorLikeStyle = "";
        let colorDislikeStyle = "";
        if (extConfig.coloredBar) {
          colorLikeStyle = "; background-color: " + getColorFromTheme(true);
          colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
        }

        (
         document.getElementById(isNewDesign() ? "actions-inner" : "menu-container") ||
          document.querySelector("ytm-slim-video-action-bar-renderer")
        ).insertAdjacentHTML(
          "beforeend",
          `
              <div class="ryd-tooltip" style="width: ${widthPx}px${isNewDesign() ? "; margin-bottom: -2px" : ""}">
              <div class="ryd-tooltip-bar-container">
                <div
                    id="ryd-bar-container"
                    style="width: 100%; height: 2px;${colorDislikeStyle}"
                    >
                    <div
                      id="ryd-bar"
                      style="width: ${widthPercent}%; height: 100%${colorLikeStyle}"
                      ></div>
                </div>
              </div>
              <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
                <!--css-build:shady-->${tooltipInnerHTML}
              </tp-yt-paper-tooltip>
              </div>
      `
        );
        
      // Add border between info and comments
      if (isNewDesign()) {
        let descriptionAndActionsElement = document.getElementById("top-row");
        descriptionAndActionsElement.style.borderBottom = "1px solid var(--yt-spec-10-percent-layer)";
        descriptionAndActionsElement.style.paddingBottom = "10px";
      } else {
        document.getElementById("ryd-bar-container").style.width = widthPx + "px";
        document.getElementById("ryd-bar").style.width = widthPercent + "%";
        document.querySelector(
          "#ryd-dislike-tooltip > #tooltip"
        ).innerHTML = tooltipInnerHTML;
        if (extConfig.coloredBar) {
          document.getElementById("ryd-bar-container").style.backgroundColor =
            getColorFromTheme(false);
          document.getElementById("ryd-bar").style.backgroundColor =
            getColorFromTheme(true);
        }
      }
    }
  } else {
    cLog("removing bar");
    let ratebar = document.getElementById("ryd-bar-container");
    if(ratebar) {
      ratebar.parentNode.removeChild(ratebar);
    }
  }
}

export { createRateBar };