import { useState, useEffect, FC } from "react";
// remirror imports
import { cx } from "@remirror/core";
import {
  useMentionAtom,
  MentionAtomNodeAttributes,
  FloatingWrapper,
} from "@remirror/react";

// export const;

export interface IMentionAutoComplete {
  mentions?: any[];
  tags?: any[];
}

export const MentionAutoComplete: FC<IMentionAutoComplete> = (props) => {
  const { mentions = [], tags = [] } = props;
  // states
  const [options, setOptions] = useState<MentionAtomNodeAttributes[]>([]);

  const { state, getMenuProps, getItemProps, indexIsHovered, indexIsSelected } =
    useMentionAtom({
      items: options,
    });

  useEffect(() => {
    if (!state) {
      return;
    }
    const searchTerm = state.query.full.toLowerCase();
    let filteredOptions: MentionAtomNodeAttributes[] = [];

    if (state.name === "tag") {
      filteredOptions = tags.filter((tag) =>
        tag?.label.toLowerCase().includes(searchTerm)
      );
    } else if (state.name === "at") {
      filteredOptions = mentions.filter((user) =>
        user?.label.toLowerCase().includes(searchTerm)
      );
    }

    filteredOptions = filteredOptions.sort().slice(0, 5);
    setOptions(filteredOptions);
  }, [state]);

  const enabled = Boolean(state);
  return (
    <FloatingWrapper
      positioner="cursor"
      enabled={enabled}
      placement="bottom-start"
    >
      <div {...getMenuProps()} className="suggestions">
        {enabled &&
          options.map((user, index) => {
            const isHighlighted = indexIsSelected(index);
            const isHovered = indexIsHovered(index);

            return (
              <div
                key={user.id}
                className={cx(
                  "suggestion",
                  isHighlighted && "highlighted",
                  isHovered && "hovered"
                )}
                {...getItemProps({
                  item: user,
                  index,
                })}
              >
                {user.label}
              </div>
            );
          })}
      </div>
    </FloatingWrapper>
  );
};