import {
  COLORS,
  Dropdown,
  DropdownItemButton,
  DropdownSeparator,
  MeatballMenu,
  MeatballMenuApi,
  Tag as TagComponent,
  LocationLink,
  LocationDescriptor,
  HumanTitle
} from "@heydovetail/ui-components";
import * as React from "react";
import { styled } from "typestyle-react";
import { Tag } from "../HighlightWidgetPlugin";
import { HighlightRange } from "../../range/types";

interface Props {
  highlight: HighlightRange;
  tag: Tag;

  generateTagURL: (tagId: string) => LocationDescriptor;
  onRemoveTag?: (options: { from: number; to: number; tagId: string }) => void;
  onCopyHighlightURL?: (rangeId: string) => void;
  onFocusRange: (rangeId: string | null) => void;
  tagQuickEditRenderer?: (tagId: string, menuApi: MeatballMenuApi) => React.ReactNode;
}

interface State {
  hover: boolean;
  open: boolean;
}

export class HighlightSidebarItem extends React.PureComponent<Props, State> {
  state = {
    hover: false,
    open: false
  };

  public render() {
    const { highlight, tag, onRemoveTag, onCopyHighlightURL, tagQuickEditRenderer, generateTagURL, onFocusRange } = this.props;
    const { hover, open } = this.state;

    return (
      <Container onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
        <LocationLink location={generateTagURL(tag.id)} style={{ minWidth: 0 }}>
          <TagComponent color={tag.color} title={tag.title as HumanTitle} count={tag.count !== null ? tag.count : undefined} />
        </LocationLink>
        <Actions style={hover || open ? undefined : { visibility: "hidden" }}>
          <MeatballMenu
            align="right"
            height={24}
            subtle
            onToggle={open => {
              this.setState({ open });
              if (open) {
                onFocusRange(null);
              }
            }}
          >
            {menuApi => (
              <Dropdown>
                {onCopyHighlightURL !== undefined ? (
                  <DropdownItemButton value="Copy link" onClick={() => onCopyHighlightURL(highlight.id)} />
                ) : null}
                {tagQuickEditRenderer !== undefined ? (
                  <DropdownItemButton
                    branch
                    value="Edit…"
                    onClick={() => menuApi.push(tagQuickEditRenderer(tag.id, menuApi))}
                  />
                ) : null}
                {onRemoveTag !== undefined ? (
                  <>
                    <DropdownSeparator />
                    <DropdownItemButton
                      value="Remove"
                      onClick={() => onRemoveTag({ from: highlight.from, to: highlight.to, tagId: tag.id })}
                    />
                  </>
                ) : null}
              </Dropdown>
            )}
          </MeatballMenu>
        </Actions>
      </Container>
    );
  }

  private readonly onMouseEnter = () => {
    this.setState({ hover: true });
    this.props.onFocusRange(this.props.highlight.id);
  };

  private readonly onMouseLeave = () => {
    this.setState({ hover: false });
    if (!this.state.open) {
      this.props.onFocusRange(null);
    }
  };
}

const Actions = styled("div", {
  color: COLORS.i60,
  marginLeft: "4px"
});

const Container = styled("div", {
  display: "flex",
  marginBottom: 4,
  cursor: "pointer"
});