/**
 * Renders a list of youtube comments.
 */
class YTComments {
  /**
   * Sets data and renders comments.
   * @param {HTMLElement} el 
   * @param {Array.<Object>} comments 
   */
  constructor(options) {
    this.el = options.el;
    this.comments = options.comments;

    this.loadCss();
    this.setHtml();
    this.renderHtml();
  }

  loadCss() {
    const css = `
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500');

        .yt-comment {
          font-family: "Roboto", sans-serif;
          box-sizing: border-box;
          padding: 0;
          margin: 0;
          border: 0;
          display: flex;
          margin-bottom: 20px
        }
        .yt-comment:last-child {
          margin-bottom: 0
        }
        
        .yt-comment svg {
          cursor: pointer;
          user-select: none;
        }
        
        .yt-comment-icon-like, .yt-comment-icon-dislike {
          transition: all 0.1s ease-in-out
        }
        
        .yt-comment svg:hover path:last-child {
          fill: #686868
        }
        
        .yt-comment-content-section {
          display: flex;
          align-items: center;
        }
        
        .yt-comment-likes, .yt-comment-dislikes {
          display: flex;
          align-items: center;
        }
        
        .yt-comment-icon-like {
          margin-right: 8px
        }
        
        .yt-comment-dislikes {
          margin: 0 20px 0 10px
        }
        
        .yt-comment-icon-verified {
          width: 13px;
          height: 13px;
          position: relative;
          top: 1px;
          margin: 0 3px 0 0px;
        }
        
        .yt-comment-image {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 15px;
          position: relative;
          top: 3px;
          cursor: pointer;
        }
        
        .yt-comment-username {
          font-weight: 500;
          font-size: 13px;
          line-height: 18px;
          color: #fff;
          cursor: pointer;
          margin-right: 4px
        }
        
        .yt-comment-date {
          font-weight: 400;
          font-size: 13px;
          line-height: 18px;
          color: #606060;
          transition: all 0.1s ease-in-out;
          cursor: pointer;
        }
        .yt-comment-date:hover {
          color: #fff;
        }
        
        .yt-comment-text {
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #fff;
          margin: 5px 0 10px
        }
        
        .yt-comment-likes-amount {
          font-weight: 400;
          font-size: 13px;
          line-height: 18px;
          color: #606060;
          margin-right: 5px
        }
        
        .yt-comment-reply {
          font-weight: 500;
          font-size: 13px;
          color: #606060;
          text-transform: uppercase;
          cursor: pointer;
          user-select: none;
        }
      </style>
    `
    document.querySelector('head').innerHTML += css;
  }

  /**
   * Creates and returns comments html using comment data.
   */
  createHtml() {
    let html = ``;

    let iconsHtml = {
      like: `
      <svg class="yt-comment-icon-like" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#909090" width="18px" height="18px">
        <path d="M24 24H0V0h24v24z" fill="none"/><path d="M2 20h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1H2v11zm19.83-7.12c.11-.25.17-.52.17-.8V11c0-1.1-.9-2-2-2h-5.5l.92-4.65c.05-.22.02-.46-.08-.66-.23-.45-.52-.86-.88-1.22L14 2 7.59 8.41C7.21 8.79 7 9.3 7 9.83v7.84C7 18.95 8.05 20 9.34 20h8.11c.7 0 1.36-.37 1.72-.97l2.66-6.15z"/>
      </svg>
      `,
      dislike: `
        <svg class="yt-comment-icon-dislike" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#909090" width="18px" height="18px">
          <path d="M24 24H0V0h24v24z" fill="none"/><path d="M22 4h-2c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h2V4zM2.17 11.12c-.11.25-.17.52-.17.8V13c0 1.1.9 2 2 2h5.5l-.92 4.65c-.05.22-.02.46.08.66.23.45.52.86.88 1.22L10 22l6.41-6.41c.38-.38.59-.89.59-1.42V6.34C17 5.05 15.95 4 14.66 4h-8.1c-.71 0-1.36.37-1.72.97l-2.67 6.15z"/>
        </svg>
      `,
      verified: `
        <svg class="yt-comment-icon-verified" viewBox="0 0 24 24">
          <path fill="#909090" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
        </svg>
      `
    }

    this.comments.forEach(comment => {
      if (!comment.verified) {iconsHtml.verified = ""}
      html += `
        <div class="yt-comment">
          <div class="yt-comment-image-container">
            <img class="yt-comment-image" alt="Profile" src="${comment.img}" />
          </div>
          <div class="yt-comment-content">
            <div class="yt-comment-content-section">
              <span class="yt-comment-username">${comment.username}</span>
              <span class="yt-comment-verified">${iconsHtml.verified}</span>
              <span class="yt-comment-date">${comment.date}</span>
            </div>
            <div class="yt-comment-content-section">
              <p class="yt-comment-text">${comment.text}</p>
            </div>
            <div class="yt-comment-content-section">
              <div class="yt-comment-likes">
                ${iconsHtml.like}
                <span class="yt-comment-likes-amount">${comment.likesAmt}</span>
              </div>
              <div class="yt-comment-dislikes">
                ${iconsHtml.dislike}
              </div>
              <span class="yt-comment-reply">Reply</span>
            </div>
          </div>
        </div>
      `
    })

    return html;
  }

  /**
   * Sets html as public class property.
   */
  setHtml() {this.html = this.createHtml()}

  /**
   * Renders html to user-defined container element.
   */
  renderHtml() {this.el.innerHTML = this.html}
}