import { EuiTitle, EuiInputPopover, EuiSelectable } from "@elastic/eui";

import React, { useEffect, useRef, useState } from "react";
import {
  SuggestionModes,
  TagSuggestionInstance,
} from "../hooks/useSearchInputWithTags";

interface TagSearchInterface {
  currentTag: string;
  tagsString: string;
  setTagsString: (tagsString: string) => void;
  acceptSuggestion: (suggestion: TagSuggestionInstance) => void;
  tagSuggestions: TagSuggestionInstance[];
  suggestionMode: SuggestionModes;
  setCursorPosition: (position: number | undefined) => void;
}

interface SelectableOption {
  label: string;
  checked?: "on" | "off" | undefined;
  suggestion: TagSuggestionInstance;
}

// Helper Functions
const suggestionFormatter = (item: TagSuggestionInstance) => {
  return {
    label: item.suggestion,
    suggestion: item,
    showIcons: false,
    append: <span>{item.description}</span>,
  };
};

const getCursorPosition = (
  inputNode: React.MutableRefObject<HTMLInputElement | null>
) => {
  return inputNode.current?.selectionStart || undefined;
};

const computePlaceholderText = (
  tagSuggestions: TagSuggestionInstance[] | undefined
) => {
  return !tagSuggestions
    ? ""
    : "e.g. " +
        tagSuggestions
          .slice(0, 2)
          .map((s) => `"${s.suggestion}"`)
          .join(" or ");
};

const generateResultsCount = (
  currentTag: string,
  suggestionMode: SuggestionModes,
  tagSuggestions: TagSuggestionInstance[]
) => {
  let resultsCount = undefined;

  const currentTagIsEmpty = currentTag.length <= 0;
  const currentTagHasNoValue = currentTag.split(":")[1] === "";
  const operatingWord =
    currentTagIsEmpty || currentTagHasNoValue ? "possible" : "matching";
  const counterWord = suggestionMode === "KEY" ? `key` : `value`;

  if (tagSuggestions.length > 0) {
    const isPlural = tagSuggestions.length > 1 ? "s" : "";
    resultsCount = (
      <span>{`${tagSuggestions.length} ${operatingWord} ${counterWord}${isPlural}`}</span>
    );
  }

  return resultsCount;
};

// Hooks
const useInputHack = (
  setTagsString: (s: string) => void,
  setCursorPosition: (n: number | undefined) => void
) => {
  // HACK --- route around the lack of onChange
  // See: https://github.com/elastic/eui/issues/5651
  const inputNode = useRef<HTMLInputElement | null>(null);
  useEffect(() => {
    const cb = () => {
      const s: string = inputNode.current?.value || "";

      setTagsString(s);
      setCursorPosition(getCursorPosition(inputNode));
    };

    const copiedNode = inputNode.current;

    if (copiedNode) {
      copiedNode.addEventListener("input", cb);
    }

    return () => {
      if (copiedNode) {
        copiedNode.removeEventListener("input", cb);
      }
    };
  }, [inputNode, setTagsString, setCursorPosition]);

  return inputNode;
};

const useSelectableOptions = (
  tagSuggestions: TagSuggestionInstance[],
  acceptSuggestion: (suggestion: TagSuggestionInstance) => void
) => {
  const [options, setOptions] = useState<SelectableOption[]>(
    tagSuggestions ? tagSuggestions.map(suggestionFormatter) : []
  );

  const onSelectableChange = (options: SelectableOption[]) => {
    // Get the thing that just got "checked"
    const clickedItem = options.find((option) => option.checked === "on");

    if (clickedItem) {
      acceptSuggestion(clickedItem.suggestion);
    }

    setOptions(options);
  };

  useEffect(() => {
    // Update options when new set of suggestions are passed down
    setOptions(tagSuggestions.map(suggestionFormatter));
  }, [tagSuggestions, setOptions]);

  return {
    options,
    onSelectableChange,
  };
};

const TagSearch = ({
  currentTag,
  tagsString,
  setTagsString,
  acceptSuggestion,
  tagSuggestions,
  suggestionMode,
  setCursorPosition,
}: TagSearchInterface) => {
  // HACK --- route around the lack of onChange
  const inputNode = useInputHack(setTagsString, setCursorPosition);

  // Handling Suggestion Options
  const { options, onSelectableChange } = useSelectableOptions(
    tagSuggestions, // Gets turned into options
    acceptSuggestion // Get triggered when an option is selected
  );

  // Using EuiInputPopover: https://elastic.github.io/eui/#/layout/popover
  const [hasFocus, setHasFocus] = useState<boolean>(false);

  // Props for EuiFieldSearch
  const searchProps = {
    value: tagsString,
    inputRef: (node: HTMLInputElement | null) => {
      // HTMLInputElement is hooked into useInputHack
      inputNode.current = node;
    },
    onFocus: () => {
      setHasFocus(true);
    },
    fullWidth: true,
    placeholder: computePlaceholderText(tagSuggestions),
  };

  const resultsCount = generateResultsCount(
    currentTag,
    suggestionMode,
    tagSuggestions
  );

  return (
    <>
      <EuiTitle size="xs">
        <h2>Filter by Tags</h2>
      </EuiTitle>
      <EuiSelectable
        onFocus={() => {
          setHasFocus(true);
        }}
        onBlur={() => {
          setHasFocus(false);
        }}
        searchable={true}
        isPreFiltered={true}
        searchProps={searchProps}
        aria-label="Filter by "
        onChange={onSelectableChange}
        options={options}
        singleSelection={true}
        listProps={{ bordered: true }}
      >
        {(list, search) => {
          return (
            <EuiInputPopover
              fullWidth
              disableFocusTrap={true}
              input={<>{search}</>}
              isOpen={hasFocus}
              closePopover={() => {
                setHasFocus(false);
              }}
            >
              {resultsCount}
              {list}
            </EuiInputPopover>
          );
        }}
      </EuiSelectable>
    </>
  );
};

export default TagSearch;