import type { ChangeEvent } from "react";

import { useState } from "react";

import styles from "./SearchDropdown.module.scss";

export default function SearchDropdown({
  name,
  placeholder,
  data,
  onSelect,
}: {
  name: string;
  placeholder: string;
  data: { label: string; value: string }[];
  onSelect?: (item: { label: string; value: string }) => void;
}) {
  const [query, setQuery] = useState("");
  const [isOpen, setIsOpen] = useState(false);

  const resultData = data.filter((item) =>
    item.label.toLowerCase().includes(query.toLowerCase()),
  );

  function handleSelect(item: { label: string; value: string }) {
    onSelect?.(item);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    setQuery(event.target.value);
  }

  return (
    <div className={styles["search-dropdown"]}>
      <input
        type="search"
        name={name}
        id={name}
        value={query}
        placeholder={placeholder}
        onChange={handleChange}
        onFocus={() => {
          setIsOpen(true);
        }}
        onBlur={() => {
          setIsOpen(false);
        }}
        className={styles["search-dropdown__input"]}
      />

      {isOpen && (
        <div className={styles["search-dropdown__body"]}>
          {resultData.map((item) => (
            <div
              key={item.value}
              onMouseDown={() => {
                handleSelect(item);
              }}
              className={styles["search-dropdown__item"]}
            >
              {item.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}