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, mentions, tags]);

  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>
  );
};