import React, { useCallback, useEffect, useRef, useState } from "react";

type SearchType = {
  bscFctNm: string;
  bscFctCd: string;
};

type thisProps = {
  label: string | undefined;
  initValue: string | undefined;
  setValue: (searchNm?: string) => void;
  setRtnData: (rtnData: any) => void;
  searchList?: SearchType[];
};

export default function SearchInputText({
  label = undefined,
  initValue = undefined,
  setValue = () => {},
  setRtnData = () => {},
  searchList = [],
}: thisProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [textValue, setTextValue] = useState(initValue || "");
  const [highlightIndex, setHighlightIndex] = useState<number>(-1);

  const wrapperRef = useRef<HTMLDivElement>(null);

  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      setTextValue(value);
      setValue(value);
      setHighlightIndex(-1);
      setIsOpen(value !== "");
    },
    [setValue]
  );

  const handleSuggestionClick = useCallback(
    (searchNm: string) => {
      setValue(searchNm);
      setTextValue(searchNm);
      setIsOpen(false);
      setRtnData(searchList?.find((item) => item.bscFctNm === searchNm) || {});
    },
    [searchList, setRtnData, setValue]
  );

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (!isOpen || searchList.length === 0) return;

      if (e.key === "ArrowDown") {
        e.preventDefault();
        setHighlightIndex((prev) => (prev + 1) % searchList.length);
      } else if (e.key === "ArrowUp") {
        e.preventDefault();
        setHighlightIndex((prev) =>
          prev <= 0 ? searchList.length - 1 : prev - 1
        );
      } else if (e.key === "Enter") {
        e.preventDefault();
        if (searchList.length === 1 && searchList[0]) {
          handleSuggestionClick(searchList[0].bscFctNm);
        } else if (highlightIndex >= 0 && highlightIndex < searchList.length && searchList[highlightIndex]) {
          handleSuggestionClick(searchList[highlightIndex].bscFctNm);
        }
      }
    },
    [highlightIndex, isOpen, searchList, handleSuggestionClick]
  );

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        wrapperRef.current &&
        !wrapperRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <div ref={wrapperRef} className="relative">
      <input
        type="text"
        value={textValue || ""}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown}
        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        placeholder={`${label}을(를) 입력하세요`}
        onClick={() => {
          setTextValue("");
          setValue("");
          setIsOpen(false);
        }}
      />
      {isOpen && (
        <div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
          <div className="max-h-72">
            {searchList.length > 0 ? (
              searchList.map((item, index) => (
                <div
                  key={index}
                  className={`w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl ${
                    highlightIndex === index
                      ? "bg-blue-100"
                      : "hover:bg-gray-100"
                  }`}
                  onClick={() => handleSuggestionClick(item.bscFctNm)}
                  role="button"
                  tabIndex={0}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" || e.key === " ") {
                      handleSuggestionClick(item.bscFctNm);
                    }
                  }}
                >
                  <span className="float-left">{item.bscFctNm}</span>
                </div>
              ))
            ) : (
              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
                검색 결과가 없습니다.
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}