import { useState, useEffect } from "react";
import type { FetchFunction } from "../../types/list";

export function useListView<TItem>(fetchFn: FetchFunction<TItem>) {
  const [items, setItems] = useState<TItem[]>([]);
  const [cursor, setCursor] = useState<string | undefined>();
  const [search, setSearch] = useState("");
  const [viewMode, setViewMode] = useState<"horizontal" | "square">("horizontal");
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    loadItems(true);
  }, [search]);

  const loadItems = async (reset = false) => {
    setIsLoading(true);
    const result = await fetchFn({
      search,
      cursor: reset ? undefined : cursor,
    });

    setItems(prev => reset ? result.items : [...prev, ...result.items]);
    setCursor(result.nextCursor);
    setIsLoading(false);
  };

  return {
    items,
    search,
    setSearch,
    viewMode,
    setViewMode,
    loadMore: () => loadItems(),
    hasMore: Boolean(cursor),
    isLoading,
  };
}