import { View } from "react-native";

import { SearchBar } from "@/components/ui/SearchBar";
import { ItemsPerPageMenu } from "@/components/shared/ItemsPerPageMenu";

interface MobileTableControlsProps {
  searchQuery: string;
  menuVisible: boolean;
  menuAnchor: { x: number; y: number };
  searchPlaceholder?: string;
  onSearch: (query: string) => void;
  onMenuDismiss: () => void;
  onItemsPerPageChange: (value: number) => void;
  itemsPerPage?: number;
  renderFilterComponent?: () => React.ReactNode;
  renderFilterChips?: () => React.ReactNode;
  renderActionButtons?: () => React.ReactNode;
  itemsPerPageMenuOptions?: number[];
}

export const MobileTableControls = ({
  searchQuery,
  menuVisible,
  menuAnchor,
  searchPlaceholder = "Search",
  onSearch,
  onMenuDismiss,
  onItemsPerPageChange,
  itemsPerPage = 25,
  renderFilterComponent,
  renderFilterChips,
  renderActionButtons,
  itemsPerPageMenuOptions,
}: MobileTableControlsProps) => {
  return (
    <>
      <View className="flex-1">
        <SearchBar
          placeholderText={searchPlaceholder}
          searchQuery={searchQuery}
          onChange={onSearch}
        />
      </View>
      {renderFilterComponent && (
        <View className="flex-row flex-wrap items-center mb-2 mt-2">
          <View className="flex-row flex-wrap items-center flex-1">
            {renderFilterComponent()}
          </View>
        </View>
      )}

      {/* Filter Chips Row */}
      {renderFilterChips && <View className="mb-2">{renderFilterChips()}</View>}

      {/* Action Buttons and Items Per Page Row */}
      <View className="flex-row items-center justify-between">
        <View className="flex-row items-center flex-1">
          {renderActionButtons && renderActionButtons()}
        </View>
        <View className="ml-2">
          <ItemsPerPageMenu
            menuVisible={menuVisible}
            menuAnchor={menuAnchor}
            onDismiss={onMenuDismiss}
            onItemsPerPageChange={onItemsPerPageChange}
            totalItems={itemsPerPage}
            itemsPerPageMenuOptions={itemsPerPageMenuOptions || [25, 50, 100]}
          />
        </View>
      </View>
    </>
  );
};