import React, { useEffect, useRef } from "react";
import { X } from "lucide-react";


interface MultiSelectProps {
  id: string;
  placeholder: string;
  selected?: string[];
  options: string[];
  onChange: (selected: string[]) => void;
  isOpen?: boolean;
}

const MultiSelect: React.FC<MultiSelectProps> = ({
  id,
  placeholder,
  selected,
  options,
  onChange,
  isOpen,
}) => {
  const dropdownRef = useRef<HTMLDivElement>(null);
  if (!options || !selected ) {
    return <p>No options</p>;
  }

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        onChange([]);
      }
    };

    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }

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

  const handleSelect = (option: string) => {
    const title = option;
    if (selected.includes(title)) {
      onChange(selected.filter((item) => item !== title));
    } else {
      onChange([...selected, title]);
    }
  };

  const handleRemove = (optionTitle: string) => {
    onChange(selected.filter((item) => item !== optionTitle));
  };

  const filteredOptions = options.filter(
    (option) => !selected.includes(option)
  );


  return (
    <div ref={dropdownRef} className="relative bg-white rounded-md">
      <div className="border border-gray-200 p-2 rounded-md cursor-pointer w-full">
        {selected.length > 0 ? (
          selected.map((title) => (
            <div
              key={title}
              className="flex justify-center m-1 w-[60%] bg-blue-100 text-blue-800 px-2 py-1 rounded-full"
            >
              {title}
              <button
                title="Remove"
                className="ml-1 focus:outline-none"
                onClick={(e) => {
                  e.stopPropagation();
                  handleRemove(title);
                }}
              >
                <X size={16} />
              </button>
            </div>
          ))
        ) : (
          <span className="text-gray-400 text-[14px]">{placeholder}</span>
        )}
      </div>
      {isOpen && (
        <div className="absolute z-10 bg-white border border-gray-200 rounded-md mt-2 p-2 w-full">
          {filteredOptions.map((option) => (
            <div
              key={option}
              className="p-2 cursor-pointer hover:bg-gray-200 rounded-md"
              onClick={() => handleSelect(option)}
            >
              {option}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default MultiSelect;