import { HumanTitle, Tag as TagComponent, Z_INDEX_HIGHEST } from "@heydovetail/ui-components";
import * as React from "react";
import { Tag } from "../HighlightWidgetPlugin";

interface Props {
  anchorPosition: {
    x: number;
    y: number;
  };
  tags: Tag[];
}

export const HighlightHover: React.SFC<Props> = ({ anchorPosition, tags }) => {
  return tags.length > 0 ? (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        left: anchorPosition.x + 4,
        pointerEvents: "none",
        position: "absolute",
        top: anchorPosition.y + 4,
        zIndex: Z_INDEX_HIGHEST
      }}
    >
      {tags.map(t => (
        <span key={t.id} style={{ marginBottom: 4 }}>
          <TagComponent color={t.color} title={t.title as HumanTitle} count={t.count !== null ? t.count : undefined} />
        </span>
      ))}
    </div>
  ) : null;
};