turash/bugulma/frontend/hooks/ui/useMultiSelect.ts

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

export const useMultiSelect = (
  options: string[],
  selected: string[],
  onChange: (selected: string[]) => void
) => {
  const [isOpen, setIsOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const wrapperRef = useRef<HTMLDivElement>(null);

  const toggleOption = useCallback(
    (option: string) => {
      const newSelected = selected.includes(option)
        ? selected.filter((item) => item !== option)
        : [...selected, option];
      onChange(newSelected);
    },
    [selected, onChange]
  );

  const filteredOptions = useMemo(
    () => options.filter((option) => option.toLowerCase().includes(searchTerm.toLowerCase())),
    [options, searchTerm]
  );

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

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

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      setIsOpen(false);
    }
  };

  return useMemo(
    () => ({
      isOpen,
      setIsOpen,
      searchTerm,
      setSearchTerm,
      wrapperRef,
      toggleOption,
      filteredOptions,
      handleKeyDown,
    }),
    [isOpen, searchTerm, toggleOption, filteredOptions]
  );
};