import { Highlighter, LayerWithAnimation } from "@heydovetail/ui-components";
import * as React from "react";
import { Tag, TagGroup } from "../HighlightWidgetPlugin";

interface Props {
  anchorPosition: {
    x: number;
    y: number;
  };
  anchorHeight: number;
  createTag: (options: { groupId: string | null; title: string }) => Promise<Tag>;
  currentTags: Tag[];
  onAddTag: (options: { id: string; from: number; to: number }) => void;
  onDismiss: () => void;
  onRemoveTag: (options: { id: string; from: number; to: number }) => void;
  selection: { from: number; to: number };
  tagGroups: TagGroup[];
}

export const HighlightWidget: React.SFC<Props> = ({
  anchorHeight,
  anchorPosition,
  createTag,
  currentTags,
  onAddTag,
  onDismiss,
  onRemoveTag,
  selection,
  tagGroups
}) => {
  return (
    <>
      <div
        style={{
          left: anchorPosition.x,
          position: "absolute",
          top: anchorPosition.y,
          height: anchorHeight
        }}
        id="highlight-anchor"
      />
      <LayerWithAnimation parentId="highlight-anchor" align="center" delay={250}>
        <Highlighter
          currentTags={currentTags}
          groups={tagGroups}
          onCreateTag={async (tagGroupId, title) => {
            const tag = await createTag({ groupId: tagGroupId, title });
            onAddTag({ ...selection, id: tag.id });
          }}
          onDismiss={onDismiss}
          onRemoveTag={id => onRemoveTag({ id, ...selection })}
          onSelectTag={id => onAddTag({ id, ...selection })}
        />
      </LayerWithAnimation>
    </>
  );
};