import { useEffect, useRef, useState } from "react";
import { Combobox } from "@headlessui/react";
import { Message, UserProfile } from "../../../types/notifications";
import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
import { DefaultList } from "../../../utils/helpers/pmTab";

// const people = [
//   { id: 1, name: "Durward Reynolds" },
//   { id: 2, name: "Kenton Towne" },
//   { id: 3, name: "Therese Wunsch" },
//   { id: 4, name: "Benedict Kessler" },
//   { id: 5, name: "Katelyn Rohan" },
// ];

// declare type Person = {
//   id: number;
//   name: string;
// };

function MessageSearchBar({ user }: { user: UserProfile }) {
  const [selectedPeople, setSelectedPeople] = useState(null);
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState("");
  const [profile, setProfile] = useState<UserProfile>();
  // const [show, setShow] = useState(false);
  const searchInput = useRef(null);
  // const messageBox = useRef(null);
  // const [focus, setFocus] = useState(false);
  //const [dm, setDm] = useState<Message[]>([]);
  // const [dm, setDm] = useState(false);
  const filteredMessages =
    query === ""
      ? user.messages
      : user.messages.filter((message: Message): boolean => {
          return message.sender.toLowerCase().includes(query.toLowerCase());
        });

  // let handleFocus = ({ open }: { open: boolean }) => {
  //   console.log("focus");
  // };
  useEffect(() => {
    console.log(`${user.name} is here`);
    if (user !== undefined) {
      return setProfile(user);
    }
    return;
  }, [user]);

  if (profile) {
    return (
      <Combobox
        value={selectedPeople == null ? profile.messages : selectedPeople}
        onChange={() => setSelectedPeople}
        multiple
        nullable
      >
        {/* scrollbar-hide */}
        <div className=" flex w-full flex-col overflow-auto scrollbar-hide ">
          <div className="sticky top-0 z-50  border-y-[0.05rem] border-[rgba(83,83,95,0.48)] bg-[#1E1E20]">
            {/* wrap whole input in button to make dropdown active on slection */}
            <div className="flex w-full items-center ">
              <Combobox.Input
                autoFocus={true}
                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                  if (e.code === "Space") {
                    e.stopPropagation();
                  }
                }}
                className=" 
                   my-1 mx-3 h-[55%] w-full rounded-md border-2 border-transparent bg-[hsla(0,0%,100%,.16)]
                py-1 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:border-0 focus:bg-black focus:text-white focus:ring-2 focus:ring-violet-400  "
                //displayValue={(messages: Message) => messages.id}
                onChange={(event) => setQuery(event.target.value)}
                placeholder="Search for People"
                ref={searchInput}
                //onFocus={() => handleFocus({ show, focus, setFocus })}
                //onBlur={() => handleBlur({ messageBox, setShow, setFocus })}
                //onClick={(e: React.MouseEvent<HTMLElement>) =>
                //  handleClick({ e, show, focus, setShow })
                //}
              />
              {query !== "" && (
                <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
                  <ChevronUpDownIcon
                    className="h-5 w-5 text-gray-400"
                    aria-hidden="true"
                  />
                </Combobox.Button>
              )}
            </div>
          </div>
          {query == ""
            ? profile.messages.map((message, index) => {
                return (
                  <DefaultList
                    key={`defaultList-${index}`}
                    message={message}
                    selected={selected}
                  />
                );
              })
            : filteredMessages.map((message, index) => {
                return (
                  <DefaultList
                    key={`defaultList-${index}`}
                    message={message}
                    selected={selected}
                  />
                );
              })}
        </div>
      </Combobox>
    );
  } else {
    return <div> Please Log in to see messages... smile </div>;
  }
}
export default MessageSearchBar;