import { useDebounce, useLocalStorage, useClickOutside } from 'use-hookit';

// Debounce search input
const debouncedSearch = useDebounce(searchTerm, 300);

// Persistent state (localStorage)
const [theme, setTheme, removeTheme] = useLocalStorage('theme', 'light');

// Click outside detection
const ref = useClickOutside(() => setModalOpen(false));

import {
	useClickOutside,
	useEventListener,
	useIntersectionObserver,
	useLongPress,
} from 'use-hookit/ui';

import {
	useArray,
	useObject,
	useSet,
	useMap, // Data structures
	useBoolean,
	useLoading,
	useCopyToClipboard, // State management
	useWindowSize,
	useMediaQuery,
	useNetworkStatus,
	useGeolocation, // Browser APIs
	useUrlQuery, // URL query management
} from 'use-hookit/utility';

// Boolean state
const { value, toggle, setTrue, setFalse } = useBoolean({ initialValue: false });

// Loading state
const { isLoading, startLoading, stopLoading } = useLoading();

import { useDebounce, useThrottle } from 'use-hookit/performance';

import { useIsMounted, usePrevious } from 'use-hookit/lifecycle';

import { useLocalStorage, useSessionStorage } from 'use-hookit/storage';

// LocalStorage (with TypeScript generic)
const [user, setUser, removeUser] = useLocalStorage<{ name: string; email: string }>('user', {
	name: '',
	email: '',
});

// SessionStorage
const [token, setToken, removeToken] = useSessionStorage('token', '');

// Array management with 20+ methods
const [array, { push, pop, filter, map, sort, reverse }] = useArray({
	initialValue: [1, 2, 3],
}); // [T[], ArrayOperations<T>]

// Object state management
const [obj, { set, has, remove, merge, pick, omit }] = useObject({
	initialValue: { name: 'John' },
}); // [T, ObjectOperations<T>]

// Set operations
const [set, { add, delete: remove, union, intersection, difference }] = useSet({
	initialValue: ['apple', 'banana'],
}); // [Set<T>, SetOperations<T>]

// Map key-value management
const [map, { set, get, has, delete: remove, filter, map: mapValues }] = useMap({
	initialValue: [['key', 'value']],
}); // [Map<K, V>, MapOperations<K, V>]

// useArray<number>
const [numbers, { push }] = useArray<number>({ initialValue: [1, 2, 3] });

// useMap<string, number>
const [scoreMap, { set }] = useMap<string, number>({ initialValue: [['math', 100]] });

// Click outside detection
const ref = useClickOutside(() => setOpen(false));

// Long press detection
const { handlers, isLongPressing } = useLongPress({
	onLongPress: () => console.log('Long pressed!'),
	delay: 500,
});

// Intersection observer
const { isIntersecting, ref } = useIntersectionObserver({
	threshold: 0.5,
});

// Debounce values
const debouncedSearch = useDebounce(searchTerm, 300);

// Throttle callbacks
const throttledScroll = useThrottle(handleScroll, 100);

// Window size with breakpoints
const { width, height, isMobile, isDesktop } = useWindowSize();

// Media queries
const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

// Network status
const { isOnline, isOffline } = useNetworkStatus();

// Geolocation
const { position, loading, error } = useGeolocation();

// URL 쿼리 파라미터 관리
const { query, set, get, clear, isEmpty } = useUrlQuery({
	page: 1,
	search: '',
	category: 'all',
});

// 특정 파라미터 설정
set('page', 2);

// 파라미터 값 가져오기
const currentPage = get('page');

// 모든 파라미터 제거
clear();