useDropdown.ts

import { useState, useCallback } from 'react';

export interface DropdownBundle<T> {
  isOpen: boolean;
  selectedValue: T;
  onClickDropdown: () => void;
  onClickOption: (v: T) => void;
  onRequestClose: () => void;
}

interface Options<T> {
  initialValue?: T;
}

function useDropdown<T>(options?: Options<T>): DropdownBundle<T> {
  const { initialValue } = options || {};
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [selectedValue, setSelectedValue] = useState<T>(initialValue);

  const onClickDropdown = useCallback(() => {
    setIsOpen(true);
  }, []);

  const onClickOption = useCallback((value: T) => {
    setSelectedValue(value);
    setIsOpen(false);
  }, []);

  const onRequestClose = useCallback(() => {
    setIsOpen(false);
  }, []);

  return {
    isOpen,
    selectedValue,
    onClickDropdown,
    onClickOption,
    onRequestClose,
  }
}

export default useDropdown;