import Tooltip from './tooltip';
export default class HtmlTooltip extends Tooltip {
  private rootDOM: HTMLElement;
  constructor(chart, options) {
    super(chart, options);
    this.create();
    this.open = this.open.bind(this);
  }
  render() {}

  open() {
    const { rootDOM } = this;
    rootDOM.innerHTML = this.getHtmlSinp();
    const { width, height } = rootDOM.getBoundingClientRect();
    rootDOM.style.visibility = 'visible';
    const y = this.computeTooltipY(height) + this.getPaddingTop();
    rootDOM.style.transform = `translate3d(${this.computeTooltipX(width, true)}px, ${y}px, 0)`;
  }

  close() {
    const { rootDOM } = this;
    rootDOM.style.visibility = 'hidden';
  }

  private create() {
    const { element, size } = this.canvas;
    const { parentElement } = element;

    parentElement.style.position = 'relative';

    const $div = document.createElement('div');
    $div.textContent = 'ddfd';
    $div.setAttribute(
      'style',
      `position: absolute; left:0; top: 0; visibility: hidden; display: inline-flex;flex-direction: column; box-sizing: border-box; max-width: ${size.width}px;padding: 2px 10px; border-radius: 2px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .4)`,
    );
    parentElement.appendChild($div);
    this.rootDOM = $div;
  }

  private computeTooltipY(height) {
    const { params, canvas } = this;
    const { coordinate, point } = params;

    if (coordinate === 'cartesian') {
      return 0;
    }

    return canvas.size.height - point.y + canvas.padding.top - height / 2;
  }
}