import { html, css, LitElement } from 'lit';

export class TooltipColorGuide extends LitElement {
  static styles = css`
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .tooltip-text {
      visibility: hidden;
      width: 200px;
      background-color: black;
      color: white;
      text-align: left;
      border-radius: 5px;
      padding: 10px;
      position: absolute;
      z-index: 1;
      top: 125%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .tooltip span {
      color : white;
    }
    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }

    .color-box {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px;
    }
  `;

  render() {
    return html`
      <div class="tooltip">
        <span>Color Guide</span>
        <div class="tooltip-text">
          <div><span class="color-box" style="background-color: white;"></span>this.probability > 0.9: (White)</div>
          <div><span class="color-box" style="background-color: yellow;"></span>this.probability > 0.7: (Yellow)</div>
          <div><span class="color-box" style="background-color: orange;"></span>this.probability > 0.5: (Orange)</div>
          <div><span class="color-box" style="background-color: red;"></span>this.probability ≤ 0.5: (Red)</div>
        </div>
      </div>
    `;
  }
}
